A simple jQuery plugin to create a tree map view of json data.
-
Import the script. Then your jQuery objects will have a new function.
$('div#someId').treemap([]);
-
The json should have the follow format.
$('div#someId').treemap( [ { label: 'Label of treemap node', value: 100, // A number that defines the size of the node into the tree map. data: 'some arbitrary data. Can be a string' }, {...} // This is a list ]);
-
Customizing the looking and feel.
You can pass a second parameter containing some options to customize the looking and feel of the tree map.
$('div#someId).treemap( [], { backgroundColor: function(node){ //node is an item of the list passed as the first arg of this fuction; return 'red'; // You should return a css valid color string. }, color: function(node){ //node is an item of the list passed as the first arg of this fuction; return 'red'; // You should return a css valid color string. }, nodeClass: function(node){ //node is an item of the list passed as the first arg of this fuction; return 'my-class'; // You should return your customized css class here. } } );
-
Customizing the events
You can alsa pass functions to deal with events related to mouse.
$('div#someId).treemap( [], { click: function(node, event){ // click on a node }, mouseenter: function(node, event){ // mouse enter a node }, mouseleave: function(node){ //mouse leaves a node } } );