This tutorial requires you to have read Feeding JSON tree structures to the JIT and on controllers first.
Hi, this is going to be a quick tutorial on how to set the treemap up and running.
Note: You could change all calls to TM.Squarified to TM.SliceAndDice and it should also work.
We are going to work with this tree JSON structure:
var json = {"id":"node02",
"name":"0.2",
"data":[
{"key":"key1",
"value":195},
{"key":"key2",
"value":5}],
"children":[
{"id":"node13",
"name":"1.3",
"data":[
{"key":"key1",
"value":23},
{"key":"key2",
"value":8}],
"children":[
{"id":"node24",
"name":"2.4",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":-75}],
"children":[]},
{"id":"node25",
"name":"2.5",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":-48}],
"children":[]},
{"id":"node26",
"name":"2.6",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":-1}],
"children":[]},
{"id":"node27",
"name":"2.7",
"data":[
{"key":"key1",
"value":7},
{"key":"key2",
"value":25}],
"children":[]}]},
{"id":"node18",
"name":"1.8",
"data":[
{"key":"key1",
"value":17},
{"key":"key2",
"value":28}],
"children":[
{"id":"node29",
"name":"2.9",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-28}],
"children":[]},
{"id":"node210",
"name":"2.10",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":-83}],
"children":[]}]},
{"id":"node111",
"name":"1.11",
"data":[
{"key":"key1",
"value":25},
{"key":"key2",
"value":-82}],
"children":[
{"id":"node212",
"name":"2.12",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-27}],
"children":[]},
{"id":"node213",
"name":"2.13",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":-80}],
"children":[]},
{"id":"node214",
"name":"2.14",
"data":[
{"key":"key1",
"value":7},
{"key":"key2",
"value":-73}],
"children":[]},
{"id":"node215",
"name":"2.15",
"data":[
{"key":"key1",
"value":7},
{"key":"key2",
"value":26}],
"children":[]}]},
{"id":"node116",
"name":"1.16",
"data":[
{"key":"key1",
"value":17},
{"key":"key2",
"value":91}],
"children":[
{"id":"node217",
"name":"2.17",
"data":[
{"key":"key1",
"value":7},
{"key":"key2",
"value":48}],
"children":[]},
{"id":"node218",
"name":"2.18",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":-86}],
"children":[]}]},
{"id":"node119",
"name":"1.19",
"data":[
{"key":"key1",
"value":52},
{"key":"key2",
"value":-77}],
"children":[
{"id":"node220",
"name":"2.20",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":64}],
"children":[]},
{"id":"node221",
"name":"2.21",
"data":[
{"key":"key1",
"value":5},
{"key":"key2",
"value":84}],
"children":[]},
{"id":"node222",
"name":"2.22",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":81}],
"children":[]},
{"id":"node223",
"name":"2.23",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":25}],
"children":[]},
{"id":"node224",
"name":"2.24",
"data":[
{"key":"key1",
"value":4},
{"key":"key2",
"value":18}],
"children":[]},
{"id":"node225",
"name":"2.25",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":37}],
"children":[]},
{"id":"node226",
"name":"2.26",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":83}],
"children":[]},
{"id":"node227",
"name":"2.27",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":-62}],
"children":[]}]},
{"id":"node128",
"name":"1.28",
"data":[
{"key":"key1",
"value":37},
{"key":"key2",
"value":-40}],
"children":[
{"id":"node229",
"name":"2.29",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-67}],
"children":[]},
{"id":"node230",
"name":"2.30",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":46}],
"children":[]},
{"id":"node231",
"name":"2.31",
"data":[
{"key":"key1",
"value":4},
{"key":"key2",
"value":-99}],
"children":[]},
{"id":"node232",
"name":"2.32",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-38}],
"children":[]},
{"id":"node233",
"name":"2.33",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":-3}],
"children":[]},
{"id":"node234",
"name":"2.34",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":82}],
"children":[]}]},
{"id":"node135",
"name":"1.35",
"data":[
{"key":"key1",
"value":24},
{"key":"key2",
"value":63}],
"children":[
{"id":"node236",
"name":"2.36",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":8}],
"children":[]},
{"id":"node237",
"name":"2.37",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":63}],
"children":[]},
{"id":"node238",
"name":"2.38",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":46}],
"children":[]}]}]};
Note: remember that the Treemap takes the first dataset object value to calculate the rectangles dimensions. That means that the values you setted on the first dataset object for all nodes must be coherent. Coherent means that, for example, if node A has nodes B and C as children, B having 3 as its first dataset object value and C having 2 as its first dataset value, then A must have 5 as its first dataset object value.
Put this HTML in your page:
<html> <head> <link type="text/css" rel="stylesheet" href="/static/css/example-treemap.css" /> <script type="text/javascript" src="/static/js/mootools-1.2.js"></script> <script type="text/javascript" src="/static/js/treemap/Treemap.js" ></script> <script type="text/javascript" src="/static/js/example/example-treemap.js" ></script> </head> <body onload="init();"> <div id="infovis" /> </body> </html>
Note: You’ll probably have to change the paths to the css and javascript files.
Note2: This is the only visualization that requires Mootools 1.2+ to run. I use version 1.2 which comes packaged with the library (in the extras folder). You can also download it from here.
Now, create a treemap-example.css and put this code in it:
html, body {
width:100%;
height:100%;
background-color:#222;
text-align:center;
overflow:hidden;
font-size:10px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#infovis {
position:relative;
width:900px;
height:500px;
margin:auto;
background-color:#1D1D20;
}
#infovis div {
position:absolute;
overflow:hidden;
}
#infovis .content {
background-color:#333;
border:0px solid #111;
}
#infovis .head {
height:12px;
color:white;
background-color:#444;
}
#infovis .head.in-path {
background-color:#655;
}
#infovis .body {
background-color:black;
}
#infovis .leaf {
color:white;
background-color:#111;
display:table-cell;
vertical-align:middle;
}
#infovis .over-leaf {
border:1px solid #9FD4FF;
}
#infovis .over-content {
background-color: #9FD4FF;
}
#infovis .over-head { /* ...boy i'm funny */
background-color:#A4D9FF;
color:black;
}
/*TOOLTIPS*/
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
background-color: black;
}
.tip-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background-color: black;
}
.tip-text {
font-size: 11px;
padding: 4px 8px 8px;
background-color: black;
}
Note: I won’t explain all CSS classes, they are pretty much self explainable. However, you must put a position:relative; in the infovis container (the visualization container), just as specified on the CSS stylesheet.
Finally, create an example-treemap.js file and put this code in it:
function init() {
var json = //json data specified above...
var tm = new TM.Squarified();
tm.loadFromJSON(json);
}
You should see a treemap up and running.
Some notes:
- It’s mandatory to put the width and height style properties on the main div container, just as specified on the CSS stylesheet.
- You could change the main container id by setting the Config.rootId property to whatever id you like. Be sure to set that property before making a TM instance.
Customizing the Treemap
Let’s add some colors!
In order to add colors you must know three things:
- Colors are calculated by taking the second dataset object value. You must also know the range of this value. In this example the second value ranges between [-100, 100]. You can change these values by setting the Config.Color.minValue and Config.Color.maxValue parameters. Remember to do this before instanciating the TM.
- You can also choose the color range for your visualization, this is done by setting the Config.Color.minColorValue and Config.Color.maxColorValue parameters. These properties take an array of 3 integers each describing an RGB value. Remember to do this before instanciating the TM.
- Finally, to enable treemap coloring you must set the property Config.Color.allow to true.
So the init javascript function would now look like:
function init() {
var json = //..json data
//Allow coloring
Config.Color.allow = true;
//Set min value and max value for the second *dataset* object values.
//Default's to -100 and 100.
Config.Color.minValue = -100;
Config.Color.maxValue = 100;
//Set color range. Default's to reddish and greenish. It takes an array of three
//integers as R, G and B values.
Config.Color.minColorValue = [255, 0, 50];
Config.Color.maxColorValue = [0, 255, 50];
var tm = new TM.Squarified();
tm.loadFromJSON(json);
}
You should see a colored treemap now.
This part of the tutorial has been updated for the new 1.0.7a library spec. If you have any questions please feel free to post them at the google group
Finally, let’s put nice tooltips! We’ll do this by using the Tip Mootools class.
First, we’ll define an onAfterCompute controller method to query for all nodes that will be displaying information (like .head and .leaf nodes) and assign the information to be displayed. To know more about this please check the docs for the Tips Mootools plug in
I also define some extra methods that convert the dataset to HTML.
I also allow tooltips by setting Config.tips to true.
So the JavaScript file should now look like this:
function init() {
var json = //...same json data as before...
//Allow coloring
Config.Color.allow = true;
//Set min value and max value for the second *dataset* object values.
//Default's to -100 and 100.
Config.Color.minValue = -100;
Config.Color.maxValue = 100;
//Set color range. Default's to reddish and greenish. It takes an array of three
//integers as R, G and B values.
Config.Color.minColorValue = [255, 0, 50];
Config.Color.maxColorValue = [0, 255, 50];
//Allow tips for treemap
Config.tips = true;
var tm = new TM.Squarified({
onAfterCompute: function() {
var that = this, parent;
$$('#infovis .leaf', '#infovis .head').each(function(elem, i) {
//get the JSON tree node element having the same id
//as the dom element queried and makeTip.
if(p = elem.getParent()) {
var sTree = TreeUtil.getSubtree(tm.tree, p.id);
if(sTree) that.makeTip(elem, sTree);
}
});
},
//Tooltip content is setted by setting the *title* of the element to be *tooltiped*.
//Read the mootools docs for further understanding.
makeTip: function(elem, json) {
var title = json.name;
var html = this.makeHTMLFromData(json.data);
elem.store('tip:title', title).store('tip:text', html);
},
//Take each dataset object key and value and make an HTML from it.
makeHTMLFromData: function(data) {
var html = '';
for(var i=0; i<data.length; i++) {
html += data[i].key + ': ' + data[i].value + '<br />';
}
return html;
}
});
tm.loadFromJSON(json);
}
You should see some tooltips now!
Remember that you have more controller methods to customize your visualization just as you want! Hope it was helpful.
Hello there, I'm Nicolas Garcia Belmonte, a Computer Science Engineer from the Buenos Aires Institute of Technology, in Argentina. I live in France now.