Treemap





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 data-to-viz.com 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:





Interactivity

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


Treemap
Doughnut
Pie chart
Dendrogram
Circular packing