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:
view:"treemap", value:”#value#”,
template: function(item){ return item.label||""; },
data:data
});
And you get the following output:
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:
{ 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:
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?
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:
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 Treemap 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.
