jQuery Plugin For Tree Map View of JSON Data - Tree Map

Tree Map is a jQuery plugin which allows you to presents hierarchical JSON Data using the tree map layout algorithm.

See also:

• jQuery Treemap Plugin for Hierarchical Data - jsTreemap

Basic Usage:

1. Create a container for the treemap layout

<div id='my-treemap'></div>

2. Include the jQuery library and jQuery Tree Map Plugin on the page

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
<script src='jquery-treemap.js'></script> 

3. The javascript

<script>
$('div#my-treemap').treemap([
{
label: 'Label 1',
value: 100, 
data: 'label 1 data'
},
{
label: 'Label 2',
value: 70, 
data: 'label 2 data'
},
{
label: 'Label 3',
value: 50, 
data: 'label 3 data'
},
{
label: 'Label 4',
value: 30, 
data: 'label 4 data'
},
{
label: 'Label 5',
value: 70, 
data: 'label 5 data'
},
], {
nodeClass: function(node, box){
  if(node.value <= 50){
    return 'minor';
  }
  return 'major';
},
itemMargin: 2
});
</script>

Change log:

2014-02-01

• update to the latest version.

---

This awesome jQuery plugin is developed by lrgalego. For more Advanced Usages, please check the demo page or visit the official website.