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:
http://www.drasticdata.nl/DDHome.php?m=drastictreemap
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>
<html><head>
<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"
}
window.onload=function(){
treemap = flashembed("container", {src: 'DrasticTreemap.swf', version: [11, 0]}, {config: treemapConfig}).getApi();
};
</script>
</head>
<body>
<div id="container"></div>
</body></html>
The size can be specified in your stylesheet (called mystyle.css above):
#container {
width: 300px;
height: 250px;
}
You can configure DrasticTreemap using the 'treemapConfig' variable in JSON format.
The complete list of configuration options are:
var treemapConfig={
// THE DATA:
// 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": " ",
// SIZING:
// if sizeColumn is absent, the component will choose the first numeric column, if present
"sizeColumn": "var1",
// GROUPING:
// An array of variables for grouping by. The order specifies the grouping order. If absent no grouping
"groupBy": ["category1", "category2"],
// LABELS:
// 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}
],
// COLORS:
// 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}],
// TOOLTIPS:
// 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,
// CALLBACKS:
// 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
}
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 www.drasticdata.nl
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
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);}
</script>
A more extensive example of the use of events is included in the examples map in the release.
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 1.5:
Version 1.4:
Version 1.3:
Version 1.2:
Version 1.1:
Version 1.0: