Data Visualization with D3.js Cookbook

Building a treemap

Treemaps were introduced by Ben Shneiderman in 1991. A treemap displays hierarchical tree-structured data as a set of recursively subdivided rectangles. In other words, it displays each branch of the tree as a large rectangle which is then tiled with smaller rectangles representing sub-branches. This process continuously repeats itself till it reaches the leaves of the tree.

Note

For more information on treemaps, see this paper by Ben Shneiderman at http://www.cs.umd.edu/hcil/treemap-history/

Before we dive into the code example, let's first define what we mean by hierarchical data .

So far we have learned many types of visualizations capable of representing flat data structure usually stored in one or two dimensional arrays. In ...