Draw a Treemap

Treemap layout

As we have discussed in the previous lesson, we need the d3.treemap() API to define a layout for treemap. Additionally, we need some information in the data to know the location of each rectangle within the treemap. Don’t worry. D3.js provides another API d3.hierarchy(), which will add hierarchical information with data and will help us to draw the treemap.

Example

Let’s draw a treemap by taking dummy data of different countries situated on different continents. We will use the above-discussed APIs to draw a treemap in the following code.