D3 - Treemap Layout

About

treemap in D3 is implemented as a layout.

v4.

You pass the root node of a tree to the treemap function and it will then add the coordinates of the tile to each node.

Articles Related

Steps

• Create a tree
• Call tree.sum or tree.count because treemap requires the value property for each node
• Apply the treemap function on it

Example

• Create a tree with a CSV and the stratify method

var stratify = d3.stratify()
    .parentId(function (d) {
        return d.id.substring(0, d.id.lastIndexOf("\\"));
    });

var data = d3.csvParse(`id,value
root,0
root\\child1,10
root\\child2,20
root\\child3,15
root\\child4,30
`);
var tree = stratify(data);

• Create and calculate the mandatory value property

tree.sum(function(d) { return d.value});

• Definition of the treemap layout and apply it to the tree

var width = 600, height = 300;
var treemap = d3.treemap()
    .size([width, height])
    .round(true)
    .padding(1);

// Apply to the tree
treemap(tree);
console.log(tree)

Treemap will add the coordinates of each rectangle to each node:

• x0
• x1
• y0
• y1

You use this coordinates after to draw the treemap.

var color = d3.scaleOrdinal(d3.schemeCategory20);

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);

var cell = svg.selectAll("g")
            .data(tree.leaves())
            .enter().append("g")
            .attr("transform", function (d) {
                return "translate(" + d.x0 + "," + d.y0 + ")";
            });

        cell.append("rect")
            .attr("id", function (d) {
                return d.data.id;
            })
            .attr("width", function (d) {
                return d.x1 - d.x0;
            })
            .attr("height", function (d) {
                return d.y1 - d.y0;
            })
            .attr("fill", function (d) {
                 var a = d.ancestors();
                 return color(a[a.length - 2].id);
            });
            
       cell.append("title")
        .text(function (d) {
            return d.id + "\n" + d.value;
        });