JQuery Tree Map¶ ↑

A simple jQuery plugin to create a tree map view of json data.

How to use¶ ↑

1. Import the script. Then your jQuery objects will have a new function.

   $('div#someId').treemap([]);

2. 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
   ]);

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

1. 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.