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.