JavaScript Treemaps
Overview
JavaScript Treemaps are a great way to display hierarchical data by using nested rectangles. They display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension on the data. It is also possible to color the leaf nodes to show a separate dimension of the data.
Unlike other JS charts, JavaScript treemaps use the "children" attribute to define the hierarchy and the "value", "value-size" and "value-aspect" attributes to define the data associated with the size and aspect of the rectangles.
{
"type": "treemap",
"series": [
{
"text": "North America",
"children": [
{
"text": "United States",
"children": [
{
"text": "Texas",
"value": 21
},
...
]
}
]
}
]
}Data Format
Value Arrays
A single "series" array, with at least one object within it. Each object may have a "children" array of children object, which may also include a "children" array of additional children objects, and so on.
{
"series":[ // Array of objects
{
"text":(Parent1), // String
"children":[ // Array of objects
{
"text":(Parent1 - Child1), // String
"value":val1 // Number
},
{
"text":(Parent1 -> Child2), // String
"children":[ // Array of objects
{
"text":(Parent1 -> Child2 -> Child1), // String
"value":val1 //Number
}
]
}
]
}
]
}Aspect Types
The "aspect-type" attribute sets the aspect.
Random
The "random" attribute chooses a random palette used if the "aspect-type" is set to "random".
{
"options":{
"aspect-type":"random"
}
}
Color Start/End
The "color-start" attribute sets the starting color of the color transition used when the "aspect-type" is set to "transition". The "color-end" attribute sets the ending color of the color transition used when "aspect-type" is set to "transition".
{
"options":{
"aspect-type":"transition",
"color-start":"#c00",
"color-end":"#300"
}
}
Palette
The "palette" attribute defines a custom palette used if the "aspect-type" is set to "palette". It can hold an array of strings representing colors or an array of objects having various styling attributes like complex background colors, background images or gradient definitions.
{
"options":{
"aspect-type":"palette",
"palette":["#c98411","#281300","#991e00","#470000","#ff921f","#feb950","#704700","#8a773c"]
}
}
JavaScript Rules
Define a function that returns an object containing styling attributes to be applied to each node.
{
"options":{
"aspect-type":"myfunc()"
}
}
Treemap-specific Properties
Treemaps include a number of unique chart-specific properties that allow you to manipulate appearance and behaviors. They can be implemented into your chart by placing them within the "options" object.
{
"options":{
"split-type": "balanced",
"aspect-type": "palette",
"alpha-aspect": false,
"thousands-separator": ",",
"decimals-separator": ".",
"decimals": "2",
"palette": [],
"min-alpha": .4,
"color-start": "#336699",
"color-end": "#99ccff",
"box": {},
"tooltip-box": {},
"hover-state": {}
}
}Box
The "box" attribute sets the styling for the treemap boxes (nodes).
{
"options":{
"box":{
"border-color":"red"
}
}
}
Hover State
The "hover-state" attribute sets the styling for the hover-state of the boxes (nodes).
{
"options":{
"hover-state":{
"alpha":1,
"background-color":"black"
}
}
}
Split Type
The "split-type" attribute sets the splitting algorithm. Set to "balanced" by default, you can change the value to "horizontal", "vertical", or "alternate".
{
"options": {
"split-type": "alternate" //balanced (default), horizontal, vertical, alternate
},
}
Alpha Aspect
The "alpha-aspect" attribute sets whether alpha will also be applied on the nodes based on the "value-aspect" values.
{
"options":{
"alpha-aspect":true
}
}
Min Alpha
The "min-alpha" attribute sets the minimum value of the alpha applied to the nodes, in case "alpha-aspect" is set to true.
{
"options":{
"alpha-aspect":true,
"min-alpha":0.2,
}
}
Max Children
The "max-children" attributes sets the maximum number of children each node can have.
{
"options":{
"max-children":[8,2,4]
}
}
Max Depth
The "max-depth" attribute sets the maximum depth. Child nodes with levels higher that this setting will be ignored.
{
"options":{
"max-depth":2
}
}
Tooltips
Tooltip Box
The "tooltip-box" attribute sets the styling for the tooltip that appears over the final nodes (without children).
{
"options":{
"tooltip-box":{
"background-color":"red",
"text-align":"left"
}
}
}
Tooltip Group
The "tooltip-group" attribute sets the styling for the tooltip that appears over the nodes that have at least one child.
{
"options":{
"tooltip-group":{
"background-color":"red",
"text-align":"left"
}
}
}
Summary
Got a question about how treemap charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.