Suggest an edit to this page

Treemaps in JavaScript

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


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Basic Treemap

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)

Set Different Attributes in Treemap

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)

Set Color of Treemap Sectors

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)

Nested Layers in Treemap

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.

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);
})
See https://plotly/.com/javascript/reference/treemap/ for more information and chart attribute options!