Treemap customization in d3.js

This post describes how to customize a treemap with d3.js. How to add color for groups, opacity, title, padding, group labels and exact values. More treemaps in the dedicated section of the gallery.

Treemap section


  • The input dataset used here is stored at the .json format. Have a look

  • If you have a .csv input, you can transform it with the code below, or see this example.

  • Start by understanding how to build a basic treemap with d3 and json input.

  • Margin between group is possible thanks to the paddingTop, paddingRight and paddingInner arguments. Play with them in the code beside to understand how they work.

  • One color per group, opacity proportional to value: classic use of scale, as described in this document.
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src=""></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
  width = 445 - margin.left - margin.right,
  height = 445 - - margin.bottom;

// append the svg object to the body of the page
var svg ="#my_dataviz")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + + margin.bottom)
        "translate(" + margin.left + "," + + ")");

// read json data
d3.json("", function(data) {

  // Give the data to this cluster layout:
  var root = d3.hierarchy(data).sum(function(d){ return d.value}) // Here the size of each leave is given in the 'value' field in input data

  // Then d3.treemap computes the position of each element of the hierarchy
    .size([width, height])
    .paddingInner(3)      // Padding between each rectangle

  // prepare a color scale
  var color = d3.scaleOrdinal()
    .domain(["boss1", "boss2", "boss3"])
    .range([ "#402D54", "#D18975", "#8FD175"])

  // And a opacity scale
  var opacity = d3.scaleLinear()
    .domain([10, 30])

  // use this information to add rectangles:
      .attr('x', function (d) { return d.x0; })
      .attr('y', function (d) { return d.y0; })
      .attr('width', function (d) { return d.x1 - d.x0; })
      .attr('height', function (d) { return d.y1 - d.y0; })
      .style("stroke", "black")
      .style("fill", function(d){ return color(} )
      .style("opacity", function(d){ return opacity(})

  // and to add the text labels
      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
      .attr("y", function(d){ return d.y0+20})    // +20 to adjust position (lower)
      .text(function(d){ return'mister_','') })
      .attr("font-size", "19px")
      .attr("fill", "white")

  // and to add the text labels
      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
      .attr("y", function(d){ return d.y0+35})    // +20 to adjust position (lower)
      .text(function(d){ return })
      .attr("font-size", "11px")
      .attr("fill", "white")

  // Add title for the 3 groups
    .data(root.descendants().filter(function(d){return d.depth==1}))
      .attr("x", function(d){ return d.x0})
      .attr("y", function(d){ return d.y0+21})
      .text(function(d){ return })
      .attr("font-size", "19px")
      .attr("fill",  function(d){ return color(} )

  // Add title for the 3 groups
      .attr("x", 0)
      .attr("y", 14)    // +20 to adjust position (lower)
      .text("Three group leaders and 14 employees")
      .attr("font-size", "19px")
      .attr("fill",  "grey" )


Building the Json format

The d3r R library allows to switch from .csv format to json format. Here is the R code allowing to build the json file used above.

# Load library

# Build a dummy data frame
data <- data.frame(
  level2=c( rep("boss1",4), rep("boss2",4), rep("boss3",6)),
  level3=paste0("mister_", letters[1:14]),
  group=c("A","A","C","C","C","A","B","B","B","A","A","D","D","D" )

# Create the json format. Note that columns that are leave features are specified.
a <- d3_nest(data, root="CEO", value_cols=c("group", "value"))

# Save it in a .json file
write(a, "data_dendrogram_full.json")

Related blocks →