Documentation DrasticTreemap

DrasticTreemap 2.0.6 by DrasticData.


DrasticTreemap is a configurable, dynamic treemap in javascript that can be embedded in a web page to work on your own data.
The treemap interacts with the web page via javascript.

DrasticTreemap in your web page

DrasticTreemap needs some open source libraries to operate, which, for convenience, are included in the drastictreemap zip.
Put the following includes in the header of your webpage:

<script type="text/javascript" src="js/easeljs-0.8.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.6.1.min.js"></script>
<script type="text/javascript" src="js/chromath.min.js"></script>
<script type="text/javascript" src="js/DrasticTreemap.min.js"></script>

Next, configure and initialize DrasticTreemap. Below is an example using data in JSON (JavaScript Object Notation):

<script type="text/javascript">
	var data = [
		{ "label":"jkt", "var1":240.1, "var2":99.4, "var3":861.0, "category1":"F", "category2":"C"},
		{ "label":"xom", "var1":383.0, "var2":10.3, "var3":841.1, "category1":"G", "category2":"E"},
		{ "label":"wgj", "var1":209.0, "var2":97.5, "var3":718.8, "category1":"F", "category2":"E"},
		{ "label":"ryw", "var1":217.1, "var2":13.4, "var3":491.2, "category1":"G", "category2":"D"},
		{ "label":"hsg", "var1":282.0, "var2":24.4, "var3":313.4, "category1":"G", "category2":"C"},
		{ "label":"jtl", "var1":28.5,  "var2":11.8, "var3":877.9, "category1":"J", "category2":"B"},
		{ "label":"gir", "var1":265.8, "var2":59.3, "var3":603.7, "category1":"J", "category2":"C"},
		{ "label":"oub", "var1":162.7, "var2":30.4, "var3":23.0,  "category1":"C", "category2":"A"},
		{ "label":"har", "var1":305.6, "var2":13.0, "var3":366.9, "category1":"E", "category2":"E"},
		{ "label":"xpn", "var1":189.8, "var2":56.7, "var3":458.7, "category1":"E", "category2":"D"}
	var config = {
		"sizeColumn": "var1",
		"labelColumn": "label",
		"colorColumn": "category1"
	window.onload=function() {
		DrasticTreemap.init("container", data, config);

The first argument of DrasticTreemap.init is the id of the div you want DrasticTreemap to be placed in:

<div id="container"></div>

The width and height of the treemap can be specified in your stylesheet (css) as follows:

#container {
	width: 400px;
	height: 350px;

That's all, now you should have a fully operational version of DrasticTreemap.
A working example containing the above configuration is included in the release: DrasticTreemap on 10 records, data in JSON.

Loading data into DrasticTreemap from CSV

DrasticTreemap does not care where your data comes from, as long as it delivered in the JSON format in the example above.
This makes it possible to feed DrasticTreemap data from any data source (also dynamic sources).
If you have your data in CSV, you can choose any of the many CSV readers that already exist to transform your data into the JSON format required.

At DrasticData, we have good experience with the open source package Papaparse.
It is used in the examples included in this release, here is how we use it in combination with DrasticTreemap:

<script type="text/javascript" src="js/papaparse.min.js" ></script>
<script type="text/javascript">
	var config = {
		"sizeColumn": "var1",
		"labelColumn": "label",
		"colorColumn": "category1"
	window.onload=function() {
		Papa.parse("data/DrasticTreemapExampleData500nodes.txt", {
			download: true,
			header: true,
			dynamicTyping: true,
			skipEmptyLines: true,
			error: function(err) {alert("Error reading file: ", err)},
			complete: function(results) {
				if (results.errors.length>0)
					alert("Error parsing file: "+ results.errors[0].message);
					DrasticTreemap.init("container",, config);

Configuration Options

Below is a complete list of configuration options using the 'config' variable:

var config={
	// if sizeColumn is absent, the component will choose the first numeric column, if present
	"sizeColumn": "var1",
	// An array of variables for grouping by. The order specifies the grouping order. If absent no grouping
	"groupBy": ["category1", "category2"],
	// Warning: label calculation can be performance critical, so with many nodes, leave out the labels for the smallest rectangle or circles (level 0)
	// the label to be displayed can be specified by labelColumn or labelFunction, if both are absent no labels will be displayed
	// labelColumn specifies the variable that will be displayed as label:
	"labelColumn": "label",
	// alternatively specifying a labelFunction allows you calculate your label text yourself.
	// This function will be called with a data object with all the variables as properties, the same mechanism as with the event functions.
	// An example is included in the release.
	"labelFunction": "myLabelFunction",
	// labelFormat specifies the format of labels to display on a level for a visualisation type
	// level is 0 (smallest rectangles or circles) or 1 (all higher levels)
	// visType is "treemap" or "circles"
	// font is any css font (which contains size); only fonts supported by the browser can be displayed.
	// wrap (simple linewrap on spaces and tabs) is true or false; wrap is ignored for level 1
	// dynamic (scale labels to area) is true or false; dynamic is ignored for level 1
	// ellipsis (using dots at the end of a string to shorten it) is true or false; ellipsis will only be applied if both wrap and dynamic are false
	// Below are the default values:
	"labelFormat": [
		{"level": 0, "visType": "treemap", "font": "12px Arial", "color": "#000000", "wrap": false, "dynamic": false, "ellipsis": true},
		{"level": 1, "visType": "treemap", "font": "bold 14px Arial", "color": "#000000", "wrap": false, "dynamic": false, "ellipsis": true},
		{"level": 0, "visType": "circles", "font": "12px Arial", "color": "#000000", "wrap": false, "dynamic": false, "ellipsis": true},
		{"level": 1, "visType": "circles", "font": "bold 24px Arial", "color": "#000000", "wrap": false, "dynamic": false, "ellipsis": true}
	// ICONS:
	// iconColumn specifies the variable that contains the url to the image (format whatever your browser supports, such as .png or .jpg)
	"iconColumn": "icon",
	// colorColumn specifies the column to use for coloring nodes
	// if colorColumn is absent, the component will choose a column
	"colorColumn": "category1",
	// color can be used to give specific values a specific color
	"color": [{"value": "A", "color": "#FF0000"}, {"value": "B","color": "#00FF00"}, {"value": "C", "color": "#0000FF"}],
	// tipTextContentCol specifies which columns to display in the tooltip.
	// if there is no tipTextContentCol specified, all dataColumns will be displayed.
	"tipTextContentCol": ["label", "var1", "var2", "var3", "category1", "category2"],
	// OTHER:
	// speed of animation in seconds, default 0.8
	// for performance reasons, no animation will be used if the number of records exceeds 2500
	"speed": 0.5,
	// if fixedLayout is true, nodes will try to keep their relative positions on recalculating; default is false
	"fixedLayout": true,

	// Here you can specify a javascript function that will be called in case of an event
	"onMouseOver": "displayname",
	"onMouseOut": "displayname",
	"onClick": "displayname",
	"onDblClick": "displayname" // NOTE: no comma after the last element

Communication between browser and DrasticTreemap Component


The treemap supports mouseover, mouseout, click and doubleclick events. You can specify a javascript function to be called when one of these events fire. This function will be called with an object, which contains all the values for the selected item. Here is how it works:

In the treemapConfig:

    "onclick": "displayname"

In your script:

  <script type="text/javascript">
    function displayname(d) {alert("you clicked on the item with label: " + d["label"] + " and value of var 1: " + d["var1"]);}

The DrasticTreemap events example in this release shows how to use all these events..

Manipulating the treemap from Javascript

You can manipulate the treemap from javascript by calling the following functions.

Examples of the use of these functions are included in the release.


The license applicable to the DrasticTreemap component is included in the file License.txt in the distribution.
The DrasticData release (zip) includes minified versions (*.min.js) of jquery, chromath, createjs (easeljs and tweenjs) and papaparse, which all include the respective license statement and the url in the header.
The only exception is chromath.min.js which has no header. For this particular component more information including the MIT License, can be found at

Version History

Version 2.0.6:

Version 2.0.5:

Version 2.0.4:

Version 2.0.3:

Version 2.0.2:

Version 2.0.1:

Version 2.0.0:

Version 1.5:

Version 1.4:

Version 1.3:

Version 1.2:

Version 1.1:

Version 1.0: