Documentation DrasticTreemap

DrasticTreemap 1.5 by DrasticData.


DrasticTreemap ia a dynamic treemap in Flash.
It is configurable in many ways and can be embedded in a web page. The treemap interacts with the web page via javascript.
Examples are contained in the distribution and on the web page of DrasticData:

Embedding DrasticTreemap in your web page

We advise to use flashembed to include the DrasticTreemap Flash component in your web page.
For your convenience, we included a version of flashembed in the drastictreemap release.
Here we show how to call DrasticTreemap on a specific datafile using a specific sizeColumn and default values for the rest:

<!doctype html>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script src="js/flashembed.min.js" type="text/javascript"></script>
<script type="text/javascript">
	var treemap;
	var treemapConfig = {
		"dataFile": "DrasticTreemapExampleData100nodes.txt",
		"sizeColumn": "var1",
		"labelColumn": "label",
		"colorColumn": "category1"
		treemap = flashembed("container", {src: 'DrasticTreemap.swf', version: [11, 0]}, {config: treemapConfig}).getApi();
    <div id="container"></div>

The size can be specified in your stylesheet (called mystyle.css above):

#container {
	width: 300px;
	height: 250px;

Configuring DrasticTreemap

You can configure DrasticTreemap using the 'treemapConfig' variable in JSON format.
The complete list of configuration options are:

var treemapConfig={
	// if dataFile is absent DrasticTreemap will search for the file 'DrasticTreemap.txt'
	"dataFile": "DrasticTreemapExampleData100nodes.txt",
	// if dataFileDelimiter is absent a tab delimiter is expected
	"dataFileDelimiter": "	",
	// 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"],
	// labelColumn specifies the column to use as labels for leafs (smallest rectangles).
	// If labelColumn is absent no labels will be displayed on leaf level
	"labelColumn": "label",
	// labelFormat specifies the format (size, color, alpha, visible) of labels to display on a level in case of grouping
	// level 0 applies to leaf nodes
	// level 1 applies to parents of leafs
	// level 2 applies to parents of parents of leafs etc.
	// If visible="false" for a level they won't be displayed unless you make them visible with the toggleLabels function.
	// Label calculation can be performance critical for the leaf level (0), so with many nodes, leave out the labelFormat for level 0
	"labelFormat": [
		{"level": 0, "size": 10},
		{"level": 1, "size": 26, "color": 0xC0C0C0, "alpha": 0.7},
		{"level": 2, "size": 30, "color": 0x222222, "alpha":"0.4, "visible": false}
	// 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": 0xFF0000}, {"value": "B","color": 0x00FF00}, {"value": "C", "color": 0x0000FF}],
	// tipTextTitle specifies the title in teh tooltip; {0} will be replaced with value of labelColumn
	"tipTextTitle": "Node: {0}",
	// the tipTextContentCol tags (maximum 6) specify which columns to display in the tooltip
	// if there is no tipTextContentCol specified, the first 6 dataColumns will be displayed
	"tipTextContentCol": ["label", "var1", "var2", "var3", "category1", "category2"],
	// OTHER:
	// speed of animation in seconds, default 0.8
	"speed": 0.5,
	// if fixedLayout is true, nodes will try to keep their relative positions on recalculating; default is true
	"fixedLayout": true,
	// frameWidth specifies the amount of space to draw around parent nodes; default is 0
	// Caution: a frameWith > 0 may slow down treemap calculations
	"frameWidth": 2,

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

Adding data to DrasticTreemap

By default DrasticTreemap will look for its data in a file called DrasticTreemap.txt in the same directory. You can overrule this by specifying the name of the data file using the "dataFile" tag in the configuration. The dataFile contains records. Fields are delimited by a character, by default a tab. The first line of the data file must contains the names of the columns. Numbers should use dots for decimals. An example data file is shown below. More extensive examples are included in the DrasticTreemap release in the Examples map and are also available on the website

Example data file (tab delimited):

name	gender	2006	2007	2008	2009	2010	2011	2012
John	1	300	350	600	700	800	850	860
Jim	1	200	100	50	100	200	150	160
Julie	0	200	400	500	350	400	425	430
Julian	1	300	450	320	390	320	325	320

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 a parameter, the value of the column (usually an id) you indicate to be used in the configuration file. Here is how it works:

In the treemapConfig variable:

    "onclick": "displayname",
    "onClickColumn": "label"

In the calling html file:

  <script type="text/javascript">
    function displayname(s) {alert("you clicked on the item with label: " + s);}

A more extensive example of the use of events is included in the examples map in the release.

Manipulating the treemap from Javascript

You can manipulate the treemap from the embedding javascript by calling the following functions. All these functions will return true in case of success.

Example of the use of these functions are included in the examples map in the release.


The license applicable to this component and the licenses of the libraries used in the component are included in the file license.txt in the distribution.

Version History

Version 1.5:

Version 1.4:

Version 1.3:

Version 1.2:

Version 1.1:

Version 1.0: