Quick Tutorial - TreeMap
This tutorial covers the basics about creating a TreeMap visualization. If you want to know more about this visualization I’d recommend you to visit the documentation for the input JSON data and TreeMap layouts, where you can find detailed information about its configuration options and controller methods.
Hi, this is going to be a quick tutorial on how to set the TreeMap up and running.
We are going to work with this tree JSON structure:
var json = {
"id": "node02",
"name": "0.2",
"data": {
"$area": 195,
"$color": 5
},
"children": [{
"id": "node13",
"name": "1.3",
"data": {
"$area": 23,
"$color": 8
},
"children": [{
"id": "node24",
"name": "2.4",
"data": {
"$area": 6,
"$color": -75
},
"children": []
}, {
"id": "node25",
"name": "2.5",
"data": {
"$area": 9,
"$color": -48
},
"children": []
}, {
"id": "node26",
"name": "2.6",
"data": {
"$area": 1,
"$color": -1
},
"children": []
}, {
"id": "node27",
"name": "2.7",
"data": {
"$area": 7,
"$color": 25
},
"children": []
}]
}, {
"id": "node18",
"name": "1.8",
"data": {
"$area": 17,
"$color": 28
},
"children": [{
"id": "node29",
"name": "2.9",
"data": {
"$area": 8,
"$color": -28
},
"children": []
}, {
"id": "node210",
"name": "2.10",
"data": {
"$area": 9,
"$color": -83
},
"children": []
}]
}, {
"id": "node111",
"name": "1.11",
"data": {
"$area": 25,
"$color": -82
},
"children": [{
"id": "node212",
"name": "2.12",
"data": {
"$area": 8,
"$color": -27
},
"children": []
}, {
"id": "node213",
"name": "2.13",
"data": {
"$area": 3,
"$color": -80
},
"children": []
}, {
"id": "node214",
"name": "2.14",
"data": {
"$area": 7,
"$color": -73
},
"children": []
}, {
"id": "node215",
"name": "2.15",
"data": {
"$area": 7,
"$color": 26
},
"children": []
}]
}, {
"id": "node116",
"name": "1.16",
"data": {
"$area": 17,
"$color": 91
},
"children": [{
"id": "node217",
"name": "2.17",
"data": {
"$area": 7,
"$color": 48
},
"children": []
}, {
"id": "node218",
"name": "2.18",
"data": {
"$area": 10,
"$color": -86
},
"children": []
}]
}, {
"id": "node119",
"name": "1.19",
"data": {
"$area": 52,
"$color": -77
},
"children": [{
"id": "node220",
"name": "2.20",
"data": {
"$area": 8,
"$color": 64
},
"children": []
}, {
"id": "node221",
"name": "2.21",
"data": {
"$area": 5,
"$color": 84
},
"children": []
}, {
"id": "node222",
"name": "2.22",
"data": {
"$area": 6,
"$color": 81
},
"children": []
}, {
"id": "node223",
"name": "2.23",
"data": {
"$area": 1,
"$color": 25
},
"children": []
}, {
"id": "node224",
"name": "2.24",
"data": {
"$area": 4,
"$color": 18
},
"children": []
}, {
"id": "node225",
"name": "2.25",
"data": {
"$area": 10,
"$color": 37
},
"children": []
}, {
"id": "node226",
"name": "2.26",
"data": {
"$area": 8,
"$color": 83
},
"children": []
}, {
"id": "node227",
"name": "2.27",
"data": {
"$area": 10,
"$color": -62
},
"children": []
}]
}, {
"id": "node128",
"name": "1.28",
"data": {
"$area": 37,
"$color": -40
},
"children": [{
"id": "node229",
"name": "2.29",
"data": {
"$area": 8,
"$color": -67
},
"children": []
}, {
"id": "node230",
"name": "2.30",
"data": {
"$area": 8,
"$color": 46
},
"children": []
}, {
"id": "node231",
"name": "2.31",
"data": {
"$area": 4,
"$color": -99
},
"children": []
}, {
"id": "node232",
"name": "2.32",
"data": {
"$area": 8,
"$color": -38
},
"children": []
}, {
"id": "node233",
"name": "2.33",
"data": {
"$area": 1,
"$color": -3
},
"children": []
}, {
"id": "node234",
"name": "2.34",
"data": {
"$area": 8,
"$color": 82
},
"children": []
}]
}, {
"id": "node135",
"name": "1.35",
"data": {
"$area": 24,
"$color": 63
},
"children": [{
"id": "node236",
"name": "2.36",
"data": {
"$area": 10,
"$color": 8
},
"children": []
}, {
"id": "node237",
"name": "2.37",
"data": {
"$area": 8,
"$color": 63
},
"children": []
}, {
"id": "node238",
"name": "2.38",
"data": {
"$area": 6,
"$color": 46
},
"children": []
}]
}]
};
The data property for each JSON node stores two special values: $area and $color.
The $area property is required for all TreeMap layouts and specifies a node dimension. For Squarified TreeMaps, this value will determine the area of the TreeMap node being laid.
The $color property is optional and is only read by the visulalization when rendering colored TreeMaps. In that case the visualization only reads the $color property for leaf nodes. This will be discussed below.
Now we’ll create three files: example.html, example.css and example.js.
I’d recommend you to put these files in the root folder of the library (i.e the “Jit” folder), so you can easily access the packaged library.
Put this HTML in your example.html page:
<html>
<head>
<link type="text/css" rel="stylesheet" href="example.css" />
<script type="text/javascript" src="jit.js" ></script>
<script type="text/javascript" src="example.js" ></script>
</head>
<body onload="init();">
<div id="infovis" />
</body>
</html>
Now, create an example.css file 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;
}
/* style for the visualization container */
#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 style */
.tip {
color: #fff;
z-index: 13000;
background-color: black;
padding:5px;
position:absolute;
}
Note: If you want to know more about the TreeMap nodes DOM structure and how these CSS classes apply to it please read the TM documentation.
There’s one special CSS requirement though: you must put a position:relative; directive in the infovis container (the visualization container), just as specified in the CSS stylesheet.
Finally, create an example.js file and put this code in it:
function init() {
var json = //json data specified above...
var tm = new TM.Squarified({
//Where to inject the Treemap
rootId: 'infovis'
});
//load JSON data
tm.loadJSON(json);
}
You should see a treemap up and running.
Some notes:
- By changing calls from TM.Squarified to TM.SliceAndDice or TM.Strip you can implement other tree layouts.
- Another CSS requirement for the main visualization container (infovis container in this case) is that you have to set width and height style properties, just as specified on the CSS stylesheet.
Customizing the Treemap
Let’s add some colors!
Colors are applied to leaves, since adding colors to inner tree nodes would hide their descendants. To switch this feature on you have to set the Color.allow configuration parameter to true.
Colors are calculated by reading the $color data property for each leaf node. When reading these values, the visualization creates a linear interpolation between the maxValue, minValue, maxColorValue and minColorValue configuration parameters, such that when $color = minValue color is minColorValue, and when $color = maxValue color is maxColorValue.
The minColorValue and maxColorValue parameters are three element arrays representing RGB colors.
So our example.js should now look like this:
function init() {
var json = //..json data
var tm = new TM.Squarified({
//main container id.
rootId: 'infovis',
Color: {
//Allow coloring
allow: true,
//Select a value range for the $color
//property. Default's to -100 and 100.
minValue: -100,
maxValue: 100,
//Set color range. Default's to reddish and
//greenish. It takes an array of three
//integers as R, G and B values.
maxColorValue: [0, 255, 50],
minColorValue: [255, 0, 50]
}
});
tm.loadJSON(json);
}
You should see a colored treemap now. If you want to know more about the setColor method and how coloring works see this section of the documentation.
Finally, let’s add tooltips!
For adding tooltips we’ll set the Tips.allow parameter to true (just as we did with the Color.allow parameter) and set other properties such as tooltip offset positions.
We’ll also implement an onShow controller method that triggers when a Treemap DOM node is hovered. We will use this method for setting the HTML tooltip content.
function init() {
var json = //...same json data as before...
var tm = new TM.Squarified({
//main container id.
rootId: 'infovis',
Color: {
//Allow coloring
allow: true,
//Set min value and max value.
//Default's to -100 and 100.
minValue: -100,
maxValue: 100,
//Set color range. Default's to reddish and
//greenish. It takes an array of three
//integers as R, G and B values.
maxColorValue: [0, 255, 50],
minColorValue: [255, 0, 50]
},
//Allow tips
Tips: {
allow: true,
//add positioning offsets
offsetX: 20,
offsetY: 20,
//implement the onShow method to
//add content to the tooltip when a node
//is hovered
onShow: function(tip, node, isLeaf, domElement) {
tip.innerHTML = "name: " + node.name;
}
}
});
tm.loadJSON(json);
}
You should see some tooltips now!
Finally we’ll add a click event handler to the Treemap nodes for zooming in/out.
On left-click the visualization will set the clicked element as root. On right click it will set the current root’s parent element as root.
This is done by setting addLeftClickHandler and addRightClickHandler parameters to true.
function init() {
var json = //...same json data as before...
var tm = new TM.Squarified({
//main container id.
rootId: 'infovis',
//add click handlers for zooming
//in and out
addLeftClickHandler: true,
addRightClickHandler: true,
Color: {
//Allow coloring
allow: true,
//Set min value and max value.
//Default's to -100 and 100.
minValue: -100,
maxValue: 100,
//Set color range. Default's to reddish and
//greenish. It takes an array of three
//integers as R, G and B values.
maxColorValue: [0, 255, 50],
minColorValue: [255, 0, 50]
},
//Allow tips
Tips: {
allow: true,
//add positioning offsets
offsetX: 20,
offsetY: 20,
//implement the onShow method to
//add content to the tooltip when a node
//is hovered
onShow: function(tip, node, isLeaf, domElement) {
tip.innerHTML = "name: " + node.name;
}
}
});
tm.loadJSON(json);
}
If you wanted to change the way the zoom-in/out is done, you can set these properties to false and use the onCreateElement controller method to add event handlers to the treemap nodes for zooming-in/out.
Zooming-in is done by calling the method tm.enter(elem), and zoom out by calling the method tm.out(). If you want to know more about this please take a look at the documentation.
Anyway, remember that you have more controller methods!
Hope it was helpful.