3.0.1By 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:
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>;
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.
A new DrasticTreemap instance can be created by calling the new operator and specifying the data to display and the options to use.
Type: Object
(array)
array of objects containing the data as properties.
(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:
|
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"
});
Destroys the treemap
Toggles the fixedLayout status
Updates the DrasticTreemap instance. Updates the visualization to the new data values in the records. We assume no records are added or removed, in that case destroy and recreate the visualization.
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.