Treemap from Json format in d3.js

This post describes how to build a basic treemap with d3.js from a Json format input file. See here for .csv input format. 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.

  • Note that working with Json input is probably better than from csv: data can be given to d3.hierarchy directly, without reshaping step that increase loading time of the chart.
<!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])

  // 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", "slateblue")

  // 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 })
      .attr("font-size", "15px")
      .attr("fill", "white")

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 →