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
}
}
);