Treemap | the D3 Graph Gallery

Step by step

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

A .csv file with one line per connection in the hierarchy. See here.
A .json file. See here

Basic: from Csv

The most basic treemap you can do in d3.js. Only one level of a hierarchy is represented.

Input: csv format

Basic: from Json

The most basic treemap you can do in d3.js.

Input: Json format. R code to go from csv to json is provided.

Customization

Custom your treemap: color, title, padding, value labels, opacity and more.

Input: Json

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

Clean static treemap

A clean layout for this static treemap by Mike Bostock. Always good to read d3.js creator's code.

Button and smooth transition

A treemap with a button allowing to switch from size to count for rectangle size. Good to learn how to perform a smooth transition.