Show Sidebar Hide Sidebar
Plotly.js

Treemaps in JavaScript

How to make a D3.js-based treemap chart in javascript to visualize hierarchical data.

Treemap charts visualize hierarchical data using nested rectangles. Same as Sunburst the hierarchy is defined by labels and parents attributes. Click on one sector to zoom in/out, which also displays a pathbar in the upper-left corner of your treemap. To zoom out you can use the path bar as well.

data = [{
      type: "treemap",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ]
}]

Plotly.newPlot('myDiv', data)

This example uses the following attributes:

  1. values: sets the values associated with each of the sectors.
  2. textinfo: determines which trace information appear on the graph that can be 'text', 'value', 'current path', 'percent root', 'percent entry', and 'percent parent', or any combination of them.
  3. pathbar: a main extra feature of treemap to display the current path of the visible portion of the hierarchical map. It may also be useful for zooming out of the graph.
  4. branchvalues: determines how the items in values are summed. When set to "total", items in values are taken to be value of all its descendants. In the example below Eva = 65, which is equal to 14 + 12 + 10 + 2 + 6 + 6 + 1 + 4.
When set to "remainder", items in values corresponding to the root and the branches sectors are taken to be the extra part not part of the sum of the values at their leaves.

var labels = ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"]
var parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]
var data = [{
      type: "treemap",
      labels: labels,
      parents: parents,
      values:  [10, 14, 12, 10, 2, 6, 6, 1, 4],
      textinfo: "label+value+percent parent+percent entry",
      domain: {"x": [0, 0.48]},
      outsidetextfont: {"size": 20, "color": "#377eb8"},
      marker: {"line": {"width": 2}},
      pathbar: {"visible": false}
    },{
      type: "treemap",
      branchvalues: "total",
      labels: labels,
      parents: parents,
      domain: {x: [0.52, 1]},
      values: [65, 14, 12, 10, 2, 6, 6, 1, 4],
      textinfo: "label+value+percent parent+percent entry",
      outsidetextfont: {"size": 20, "color": "#377eb8"},
      marker: {"line": {"width": 2}},
      pathbar: {"visible": false}
    }];
var layout = {
  annotations: [{
    showarrow: false,
    text: "branchvalues: <b>remainder</b>",
    x: 0.25,
    xanchor: "center",
    y: 1.1,
    yanchor: "bottom"
    }, {
    showarrow: false,
    text: "branchvalues: <b>total</b>",
    x: 0.75,
    xanchor: "center",
    y: 1.1,
    yanchor: "bottom"
    }]}

Plotly.newPlot('myDiv', data, layout)

There are three different ways to change the color of the sectors in Treemap: 1) marker.colors, 2) colorway, 3) colorscale. The following examples show how to use each of them.

var labels = ["A1", "A2", "A3", "A4", "A5", "B1", "B2"];
var parents = ["", "A1", "A2", "A3", "A4", "", "B1"];
var data = [{
  type: 'treemap',
  labels: labels,
  parents: parents,
  marker: {colors: ["pink", "royalblue", "lightgray", "purple", "cyan", "lightgray", "lightblue"]}
}]

Plotly.newPlot('myDiv', data)

This example uses treemapcolorway attribute, which should be set in layout.

var labels = ["A1", "A2", "A3", "A4", "A5", "B1", "B2"];
var parents = ["", "A1", "A2", "A3", "A4", "", "B1"];
var data = [{
  type: 'treemap',
  labels: labels,
  parents: parents
}]
var layout = {treemapcolorway: ["pink", "lightgray"]}

Plotly.newPlot('myDiv', data, layout)

This example uses marker.colorscale to change the sector's color.

var values = ["11", "12", "13", "14", "15", "20", "30"]
var labels = ["A1", "A2", "A3", "A4", "A5", "B1", "B2"]
var parents = ["", "A1", "A2", "A3", "A4", "", "B1"]

var data = [{
  type: 'treemap',
  values: values,
  labels: labels,
  parents: parents,
  marker: {colorscale: 'Blues'}
}]

Plotly.newPlot('myDiv', data)

The following example uses hierarchical data that includes layers and grouping. Treemap and Sunburst charts reveal insights into the data, and the format of your hierarchical data. maxdepth attribute sets the number of rendered sectors from the given level.

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv', function(err, rows){
  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]});
}

var data = [{
      type: "treemap",
      ids: unpack(rows, 'ids'),
      labels: unpack(rows, 'labels'),
      parents: unpack(rows, 'parents')
    }];

Plotly.newPlot('myDiv', data, layout);
})
See https://plot.ly/javascript/reference/#treemap for more information and chart attribute options!

plotly.js runs on all SVG-compatible browsers