jQuery Treemap v0.1.0

A (simple) jQuery plugin for generating treemaps.

Download

You can download the source on GitHub. Contribution in the forms of bug reports, feature requests, and code improvements are most welcome!

Usage and Demos

Reading data from list elements of an unordered list

HTML:


<ul id="demo-ul">
  <li value="100">A</li>
  <li value="100">B</li>
  <li value="100">C</li>
  <li value="25">D</li>
  <li value="25">E</li>
  <li value="25">F</li>
  <li value="25">G</li>
</ul>

Javascript:

$('#demo-ul').treemap();

Result:

Without “heatmap”

HTML:


<ul id="demo-ul-without-heatmap">
  <li value="100">A</li>
  <li value="100">B</li>
  <li value="100">C</li>
  <li value="25">D</li>
  <li value="25">E</li>
  <li value="25">F</li>
  <li value="25">G</li>
</ul>

Javascript:

$('#demo-ul').treemap({colors: ['#36C', '#36C']);

Result:

Empty DIV, Passing in data

HTML:

<div id="demo-div"></div>

Javascript:


var population = [
    {"label":"China", "value":1343239923},
    {"label":"India", "value":1205073612},
    {"label":"United States", "value":313847465},
    {"label":"Indonesia", "value":248645008},
    {"label":"Brazil", "value":199321413},
    {"label":"Pakistan", "value":190291129},
    {"label":"Nigeria", "value":170123740},
    {"label":"Bangladesh", "value":161083804},
    {"label":"Russia", "value":142517670},
    {"label":"Japan", "value":127368088},
    {"label":"Mexico", "value":114975406},
    {"label":"Philippines", "value":103775002},
    {"label":"Vietnam", "value":91519289},
    {"label":"Ethiopia", "value":91195675},
    {"label":"Egypt", "value":83688164},
    {"label":"Germany", "value":81305856},
    {"label":"Turkey", "value":79749461},
    {"label":"Iran", "value":78868711},
    {"label":"Congo, Democratic Republic of the", "value":73599190},
    {"label":"Thailand", "value":67091089}
];

$('#demo-div').treemap({data: population});

Result:

Custom color range and legend with custom labels

HTML:


<ul id="demo-ul-with-legend">
  <li value="100">A</li>
  <li value="100">B</li>
  <li value="100">C</li>
  <li value="25">D</li>
  <li value="25">E</li>
  <li value="25">F</li>
  <li value="25">G</li>
</ul>

Javascript:


$('#demo-ul2').treemap({
    colors: ['#93c', '#f00'],
    legend: true,
    legendLabels: ['Cold', 'Hot']
});

Result:

License

jQuery Treemap is licensed under the MIT License.