By DrasticData


DrasticTreemap represents a visualization on your page. It is a JavaScript object with methods, properties and events to interact with your webpage. To broadly understand the functionality it is good to inspect these examples:


Circle charts
Hierarchical bar charts
and more...

Libraries to include

DrasticTreemap needs two open source libraries, easeljs and tweenjs which, for convenience, are included in the drastictreemap release zip file. This the way to include these libraries and the DrasticTreemap library:

<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/DrasticTreemap.min.js"></script>;

Data in JSON or from CSV

DrasticTreemap does not care where your data comes from, as long as it delivered in an array of objects each having the same properties containing the data. 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 the release.

The DrasticTreemap object

A new DrasticTreemap instance can be created by calling the new operator and specifying the data to display and the options to use.

new DrasticTreemap(data: array, options: object): DrasticTreemap

Type: Object

data (array) array of objects containing the data as properties.
options (object) configuration of the treemap
Name Description
options.container (HTMLElement | string) Mandatory. The HTML element in which DrasticTreemap will be created, or the element's string id
options.visType string? Type of visual representation to start with. Either "treemap" , "circles" or "hbar" .
options.sizeColumn string? The variable to use for sizing items. If absent, items will be sized equally.
options.groupBy array? Array of variables for grouping by. The order specifies the grouping order. If absent no grouping will occur. For hbar type visualizations only one level of grouping is supported.
options.iconColumn string? url to an icon image (format whatever your browser supports, such as .png or .jpg).
options.colorColumn string? the variable to use for coloring nodes. If absent, a variable will be chosen based on heuristics.
options.colors array? array of objects specifying specific colors for specific values of colorColumn . These values will overrule the default color for the values specified. Each object must have a value and a color property. <br/> Example: "colors": [ {"value": "A", "color": "#FF0000"}, {"value": "B","color": "#00FF00"}, {"value": "C", "color": "#0000FF"} ] `
options.tipTextContentCol array? specifies which columns to display in the tooltip. If there is no tipTextContentCol specified, all variables contained in the data will be displayed.
Example: "tipTextContentCol": ["label", "var1", "category1"]
options.speed number (default 0.8) speed of animation in seconds. For performance reasons, no animation will be used if the number of records exceeds 2500.
options.fixedLayout boolean (default false) If fixedLayout is true, nodes will try to keep their relative positions on recalculating. Applies to treemaps only.
options.labelColumn string? The variable to use for labeling items on the lowest grouping level (level 0). If absent, items will not have labels. Label calculation can be performance critical, so with many items, leave out the labels on the smallest item level (level 0). Alternatively the label to be displayed can be specified by using the labelText function.
options.labelText Function? You can use the labelText function to calculate the label text instead of displaying the labelColumn value. The labelText function will be called with an object with all the variables as properties.
An example displaying a revenue variable value with a percent value attached is
"labelText": "function(o){return(o['revenue']+' %'}"
options.labelFormat array? Array of objects specifying the format of labels on a specific level for a visualisation type. Each object must have a level , a visType , a font , a color , a wrap , a dynamic and am ellipsis property.
The level specifies the level to apply the format to. Level 0 is the lowest level, level 1 is the first grouping level etc. visType is "treemap" or "circles" for the moment. 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} ]

options.aggrType string? aggregation type for hbar visualizations, either "MEAN" or "SUM"
options.onClick Function? Function to be called when an item is clicked. The function will be called with the data object of the item as an argument.
options.onDblClick Function? Function to be called when an item is doucle clicked. The function will be called with the data object of the item as an argument.
options.onMouseOver Function? Function to be called when the mouse moves over an item. The function will be called with the data object of the item as an argument.
options.onMouseOut Function? Function to be called when the mouse moves out of an item. The function will be called with the data object of the item as an argument.
DrasticTreemap: the drastictreemap instance
var data = [
{ "label":"jkt", "var1":240.1, "category":"F"},
{ "label":"xom", "var1":383.0, "category":"G"},
{ "label":"wgj", "var1":209.8, "category":"F"}
var treemap = new DrasticTreemap('myContainer', data, {
"sizeColumn": "var1",
"labelColumn": "label",
"colorColumn": "category"
Instance Members


The license applicable to the DrasticTreemap component is included in the file License.txt in the zip release. The zip includes minified versions (*.min.js) of jquery, createjs (easeljs and tweenjs) and papaparse, which all include the respective license statement and the url in the header.

Internally DrasticTreemap uses chroma.js under the BSD-3-Clause, decimal.js-light under the MIT Expat license, and d3-scale under BSD 3-clause license.

Version History

Version 3.0.1:
  • on update, DrasticTreemap checks whether the size of its container changed and resizes if necessary. This is shown in a new example: DrasticTreemap resizing
Version 3.0.0:
  • Better documentation
  • Less dependencies
Version 2.0.7:
  • Added: update function to show new data by animation and example: "Animate to updated values"
  • Added: LabelText function to calculate the label text
  • More efficient implementation of mouse events (useful for larger datasets)
Version 2.0.6:
  • Removed debug logging
Version 2.0.5:
  • Ability to add an icon to the items (iconColumn)
  • Tooltip does no longer appear when chart animates, to prevent freeze
Version 2.0.4:
  • LabelFormat: support for wrapping and dynamic labels
  • LabelFunction: create your own labels in a javascript function
  • Fix: tooltip not hiding when changing datasets
  • Fix: labelColumn function did not work
Version 2.0.3:
  • Fix of problem with positioning of labels on mouseover on circles
  • New tooltip implementation; includes for Opentip are no longer needed
Version 2.0.2:
  • Fix of problem with interaction between switching to and from circles and groupBy
Version 2.0.1:
  • DrasticTreemap.init can be called multiple times to reinitialize the treemap with new data. An example "Loading a new dataset" was added
  • Redefining colors with the "color" option does not effect the default coloring for other items
  • Defaults of labelFormat corrected
  • Option "ellipsis" (true/false) added to LabelFormat and two examples added
Version 2.0.0:
  • Complete rewrite from Flash to JavaScript
  • No Flashembed needed any more
  • Data loaded via JSON, not via reference to csv file
  • Similar configuration settings, with some differences (dataFile, dataFileDelimiter removed; labelFormat and color changed; tipTextTitle and frameWidth removed; fixedLayout default changed; events improved)
Version 1.5:
  • improved scaling, sizing and layout of circle visualisations
  • transparent background for grouping rectangles
  • fix: sizing of rectangles in case of larger framewidth
  • some minor improvements
Version 1.4:
  • configuration in javscript instead of xml file
  • support for circles layout
  • new function: toggleFixedLayout
  • new function: visType
  • using flashembed instead of swfobject for flash embedding
  • improved documentation and examples
Version 1.3:
  • Huge performance improvement on larger datasets
  • Improved documentation and examples
  • Improved error handling
  • Needs flash player 11.0 or higher
Version 1.2:
  • Specify width of border of leaf nodes
  • Gradients on or off
Version 1.1:
  • Ability to specify the alpha value of labels per level
  • Ability to toggle labels on/off from javascript per level
  • Some minor bug fixes
Version 1.0:
  • First public release