jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Home page > Plugins > The "TreeMap" plugin

The "TreeMap" plugin

Tuesday 13 March 2007, by Renato

All the versions of this article: [English] [italiano]

A TreeMap shows hierarchical data in a compact way


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
Zip - 3.3 kb
Download the plugin
plugin Treemap

Footnotes

[1] by default the label is supposed to be in the first column, the relative main data in the second one (area), the optional secondary data in the third one (color)

Reply to this article

13 Forum messages

  • (logo)

    The "TreeMap" plugin

    3 February 2008 00:25, by Koningb

    Hi, I love the treemap plugin, nice work! I am struggling with the colorCell option, what values do I have to put in ? My colors (in hex codes) are not reflected in the treemap.

    One other thing is how to resize the text so that it fills a square totally, any ideas ? Now I just do some styling in the description cell.

    thx

    B.

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    30 October 2008 16:11, by Nicolaa

    Hi,

    I don’t know what I am doing wrong but I can’t get it to work. I have saved the treemap.js file in my root folder and written some classes for a linked stylesheet.

    I have taken the data from a list but it just displays as a list not as the treemap.

    I haven’t written any web coding for a little while and am still learning JavaScript and thought I would try and have a go but I seem to be doing something wrong. I wondered if you could suggest anything:
    http://www.aydindesign.com/wikivers...
    http://www.aydindesign.com/Styles/a...
    http://www.aydindesign.com/treemap.js

    I ultimately want to be able to display a treemap back in a wiki for a project I am doing at Surrey Uni.
    No worries if not,
    Nicola

    See online : Aydin Design

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    25 March 2009 23:44, by Eric Lee

    Awesome thanks for posting this!

    See online : http://learnaws.com

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    9 June 2009 08:39

    Hi, very nice job ! I used to work with Treemap 4.1 from HCLI (Maryland), the problem is that this solution doesn’t provide online export. Treemap plugin is very nice, but more documentation would be really usefull (data model) as a simple way to export .xls files for instance, or setting up a bridge between database to Treemap... (possible ?)

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    25 July 2009 03:25

    Hello - I can’t seem to get this plugin to work with jquery 1.3.2 , not even the small demo’s. When reverting to 1.1, all is fine. Have anyone already determined what needs to change to be supported w/ jq 1.3.2?

    Thanks,

    Reply to this message

    • (logo)
      The "TreeMap" plugin 8 March 2010 20:10, by renato

      I’m working on a new version in these days that is working with the most recent jquery versions

      Reply to this message

      • (logo)
        The "TreeMap" plugin 8 September 2010 00:45, by newkirk

        Any progress on this new version? I’d love to see an update, especially if it offers more extensive content support (IE, easier popup and clickable) and fixes the intermittent ’dangling cells’ quirk where a few cells extend beyond the bottom-right of the treemap rectangle, as well as the newer jquery/jqueryui compatibility concern.

        j

        Reply to this message

    • (logo)
      The "TreeMap" plugin 14 April 2010 12:32, by Matt Gibson

      If it helps, I found that I needed to replace:

      var cells = $(">",this);

      ...with:

      var cells = $(this).children();

      ...in getDataFromTable() to get the basic functionality working in jQuery 1.4.2. Although I don’t know whether the code will format properly in this comment!

      Basically, later versions of jQuery don’t seem to like the "greater than" selector, and I figured that the children() function would probably do the same job, though I’m no jQuery expert.

      Reply to this message

  • (logo)

    Using css to assign colors

    18 February 2010 12:24

    I am trying to use the JQuery treemap plugin and have a question about
    the assignment of colors using css. I would like to return as the color
    code "OK", "WARN", "CRITICAL" and define the colors to be green, orange
    and red respectively in a css. Is this possible? I not do you have an
    alternative suggestion for how I can achieve this result.

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    14 April 2010 12:57, by Matt Gibson

    ...oh, and thanks for the plugin, by the way! Sure it’s going to come in useful for me!

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    22 April 2010 14:16, by david

    hi,
    I’m wondering if it would be possible to have the cells randomly ordered.
    I’m thinking of using this plugin to show a tag cloud, but I don’t want them to show up ordered from the biggest to lowest.

    I guess it’s not possible because of the nature of treemap, but it’s worth asking, right?
    thanks anyway for this.
    cheers.

    See online : The "TreeMap" plugin

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    7 April 2011 23:03

    I found this answer on Stack Overflow and the plugin now works in IE7 and IE8 for me:
    http://stackoverflow.com/questions/...

    Reply to this message

  • (logo)

    The "TreeMap" plugin

    16 July 2011 05:02

    Hi

    I am trying to implement the treemap plugin to show criticality of a user. Each user will be a block in the treemap, whose size will be dependent on the criticality. Is there a way for me to color code each block based on the user’s criticality? You article mentions a secondary array to pass colors. I was not able to get this to work. Could you please post a sample of how this can be done?

    Much appreciated.
    - H

    Reply to this message


Latest comments