A Treemap displays hierarchical data as a set of nested rectangles. Each group is represented by a rectangle, which area is proportional to its value. Visit for more theoretical explanation about what it is. If you're looking for a simple way to implement it in d3.js, pick an example below.

Step by step

It is important to note that 2 different input formats can be used to build a treemap:


Two main reasons for using interactivity in treemaps. i/ Switching from one dataset to the other. ii/ building a zoomable treemap that allows to declutter the figure when several levels of hierarchy exist.

Selection of blocks

A few blocks with more complicated codes to showcase the possibility of d3 for treemaps

Related chart types

Pie chart
Circular packing