Demo
A bit of history
How many times it happens to you to have few space on your hard disk and to want to know which are the folders that take most of the space? You would surely have liked a tool able to visualize these informations in a way easily understandable. Right for this task, in 1990, a professor from University of Maryland, Ben Shneiderman, created the TreeMaps. The TreeMaps show data with rectangles with areas proportional to their value and with background colors.
Here is a nickel new jQuery plugin that will allow you to show TreeMaps on your site starting from datas in a simple HTML table or from other sources too.
How it works
The plugin is made of only one function treemap that, applied to a jQuery object, replaces it with the TreeMap generated from the supplied datas.
If the jQuery object contains some HTML tables, the function treemap will extract automatically the data from the table [1] and will replace it with a Treemap
Here is an example:
To create a Treemap of dimensions 640x480 starting from the tables in the page:
jQuery("table").treemap(640,480);
If the table datas are not in the first and the second column (and eventually in the third one for the color) you can set which are the columns containing the data to use (options labelCell, dataCell and colorCell):
To create a Treemap of dimensions 640x480 starting from the tables in the page, retrieving the descriptions from the 3rd column and the data from the 5th:
jQuery("table").treemap(640,480,{labelCell:2,dataCell,4});
If I would preserve the table in the page, I’d only need to set the element inside which I want to create the Treemap (option target):
To create a Treemap of dimensions 640x480 starting from the table with id "data" inside the element with id "map":
jQuery("table#data").treemap(640,480,{target:"#map"});
If the jQuery object contains elements other than tables, or if you want to pre-process the datas before the creation of the Treemap, you can provide a function that will have the responsibility to extract the datas (option getData):
To create a TreeMap from datas in an unordered list
<ul>
<li>
<span class="desc">Description</span>
<span class="data">100</span>
</li>
<li>...</li>
...
</ul>
jQuery("ul").treemap(640,480,{getData:getDataFromUL});
function getDataFromUL(el) {
var data = [];
jQuery("li",el).each(function(){
var item = jQuery(this);
var row = [item.find("span.desc").html(),item.find("span.data").html()];
data.push(row);
});
return data;
}The fuction getData takes as argument the element to which the plugin is applied and returns an array in which every element is in turn an array containing the description and the value of the data in the first and second item respectively (and eventually another data in the third item shown with a color code).
Here is an example of an array returned by getData:
[
['descr1',1],
['descr2',2],
['descr3',3],
]To create hierarchical TreeMap, you only need to provide in the options a function getData that returns a slightly different array. Instead of the value, that was in the second item of every row of the previous array, you need to put a new array of datas, as you can see below:
[
['level1',[
['level1-data1,1],
['level1-data2,2],
['level1-data3,3],
]
],
['level2',[
['level2-data1,1],
['level2-data2,2],
['level2-data3,3],
]
],
['level3',[
['level3-data1,1],
['level3-data2,2],
['level3-data3,3],
]
]
]The data visualization looks better if these last are sorted. The TreeMap plugin can automatically sort data setting the sort option
jQuery("ul").treemap(640,480,{getData:getDataFromUL,sort:true});Another option (headHeight) can be used to set the height, in pixels, of the headings of the hierarchical groups. To disable the headings, you can set headHeight to 0
jQuery("ul").treemap(640,480,{getData:getDataFromUL,headHeight:0});To set the width, in pixel, of the borders between cells, the option borderWidth is available.
When data contain the secondary value too to show the rectangle color, you can show a color legend with the legend option. The legend automatically detects if the secondary data is a numeric one or not, showing a color gradient in the first case or a discontinue list of colors in the second one.
jQuery("ul").treemap(640,480,{getData:getDataFromUL,legend:true});By default, the legend value description is just the secondary data. However you can set a callback function descriptionCallback able to generate different descriptions starting from the secondary data
jQuery("ul").treemap(640,480,{getData:getDataFromUL,descriptionCallback:generateDescription});
function generateDescription(val) {return "Value: "+val;}The styles
To attach styles to the TreeMaps here there are CSS classes to know:
-
.treemapView
The class of the element that "contains" the treemap. For hierarchical treemaps, the cells of the higher levels contain an element with the class.treemapView
-
.treemapSquare
The class of the element that contains a "row" od cells. The row can be horizontal or vertical
-
.treemapH,.treemapV
The class that sets the orientation of a row
-
.treemapCell
The class of a sigle cell.
-
.treemapHead
The class of the headings for hierarchical treemaps
-
.treemapLegend
The class of the legend bar
-
.treemapLegendDescr
The class of the legend descriptions
- Download the plugin
- plugin Treemap
RSS 2.0
Site Map
Private area