JQuery Tree Map¶ ↑
A simple jQuery plugin to create a tree map view of json data.
How to use¶ ↑
-
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. id: 'unique-id' // Will be used as the ID of the div, defaults to treemap-node-# // Anything else can be added and will be available to the callback functions below }, {...} // 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 ($box, node) {
// node is the item from the data list being rendered
return 'red'; // You should return a css valid color string
},
color: function ($box, node) {
// node is the item from the data list being rendered
return 'red'; // You should return a css valid color string
},
nodeClass: function ($box, node) {
// node is the item from the data list being rendered
return 'my-class'; // You should return your customized css class here
},
paintCallback: function ($label, node) {
// $label is the label div (to add any extra formatting)
// node is the item from the data list being rendered
$label.css({'text-align': 'left'});
},
smallestFontSize: 15, // If your label doesn't fit below this text size, it isn't added
startingFontSize: 24, // Labels start this size (in px) and may be smaller to accommodate text
centerLabelVertically: true, // Determine whether the labels should be centered vertically within the box
itemMargin: 2 // Determine the space between the itens in the treemap by pixels
}
);
-
Customizing the events
You can alsa pass functions to deal with events (mostly related to the mouse).
$('div#someId).treemap(
[],
{
click: function (node, event) {
// click on a node
},
mouseenter: function (node, event) {
// mouse enter a node
},
mouseleave: function (node, event) {
// mouse leaves a node
},
mousemove: function (node, event) {
// mouse moves in a node
},
ready: function () {
// Called when the tree is finished drawing
}
}
);
License¶ ↑
jQuery Treemap is released under the MIT License.