Blog

Webix TreeMap – Power of Visualization

Webix offers a number of possibilities to nicely visualize linear data – bar, pie, area, scatter and radar charts – to match any use case. But what can be done if hierarchy matters?  You may think of a Webix Tree as the first and foremost widget as it perfectly shows parent-to-child relation. But that’s almost all about its visualization abilities.

For more powerful tools we should look into the PRO package that includes Organogram (a tree-like diagram ) and TreeMap. We will pay a closer attention to the Webix TreeMap as it is the only Webix widget that can display hierarchical data on a proportional  basis.

The simplest initialization code is brief:

webix.ui({
     view:"treemap", value:”#value#”,  
     template: function(item){  return item.label||""; },
     data:data
});

And you get the following output:

TreeMap_Basic

Live demo

Basic settings

As you can see, the widget’s area is divided into proportionally sized rectangles. Each rectangle relates to the tree node and is divided into smaller tiles for sub-items (sub-branches). The rectangles are sorted from the biggest one in the top left corner to the smallest one in the right bottom corner.

Data property used for size calculation is defined  by the value parameter  – here it is “#value#” – in the widget’s constructor.  Have a look at the data snapshot:

var data = [
     { id:"1", label: "Technology", data:[
    { id:"1.1", value:"50" }, { id:"1.2", value:"30" }
    ]},
   { id:"2", label: "Healthcare", data:[
             { id:"2.1", value:"10" }, { id:"2.2", value:"60" }
   ]}
];

Text labels over the tiles are defined by another property, the template. Here we use “label” from the data item or an empty string.

You can also specify colors and other styling for rectangles via the cssClass property that allows adjusting the css of a tile to the data item it displays:

view:"treemap"
cssClass: function(item){
    var css,  comments = item.comments;
    if(!this.isBranch(item.id)){
    if(comments > 30)   css = "item3";
    else if(comments > 20)   css = "item2";
    }
    return css;
}

Looks much brighter, isn’t it?

TreeMap_Colors

 

Live demo

When and why can TreeMap be useful?

The most common use cases for TreeMap are analyzers of file system usage or stock market shares as well as economical and physical statistics and many more.

TreeMaps are easy to read and quick to analyze. They can highlight several parameters at a time, one of which takes part in tile sizing while another one can be used for  coloring.

Webix TreeMap is interactive, which means that you can “zoom” any area by clicking on it and explore its sub-items separately. You can check it by the link.

TreeMap can be used to visualize data of any complexity level. You can dig for the end children by clicking on the sub-branches (and their sub-branches) until you see them:

TreeMap_Header

 

Live demo

Further directions

TreeMap excellently fits in the family of Webix data management widgets and supports all data operations: selection, inline editing, data binding, loading and saving. It is highly customizable and at the same time simple in use.

For details please consult the documentation or browse the samples. And also please note that the widget is only available in Webix Pro edition – but you can always have a try.

Written by
The following two tabs change content below.
Olga Kustova

Olga Kustova

Front-end web developer fond of high-quality code and effective design. Is eager to share all the tips and tricks regarding Webix usage with wide audience.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit
  • Bruce Petersen

    Magnificent!

    Thank you for this articulate description of TreeMap. The behavior is just what I was looking for in our products migration toolkit.

    Great Job!!