Technology and life sciences dominate global R and D , but the subcategory breakdown reveals where the real concentration lies Figure 75.1 , Technology and life sciences dominate

A Treemap encodes a hierarchical dataset as nested rectangles. At the top level, each parent category receives a rectangle whose area is proportional to its total value. Within each parent rectangle, child categories are drawn as smaller nested rectangles, again with area proportional to value. The entire chart area is divided exactly , there is no wasted space, and every pixel of area represents real data. The perceptual mechanism is area comparison .

Early treemap algorithms used simple recursive slicing: divide the remaining area horizontally, then vertically, alternating on each level. This produces cells with extreme aspect ratios , thin slivers many times longer than they are wide. Perceptually, a 200times4 pixel rectangle and a 40times20 pixel rectangle of equal area are extremely difficult to compare because the viewer's eye reads length, not area, when shapes are highly elongated.

The message is about relative proportions within a two-level hierarchy: how much does each sector spend, and within each sector, how is that spend distributed across subcategories? A bar chart could show one level at a time but would require two separate charts and lose the nested relationship. A Sunburst Diagram encodes the same hierarchy as concentric arcs but suffers the angle-comparison problem , arcs in different radial rings have different physical lengths for the same proportional value, introducing a systematic perceptual distortion.

Treemaps do not convey hierarchical depth clearly. In a two-level treemap the nesting is obvious; in a three-or-more-level treemap, the visual boundaries between parent and grandparent become ambiguous. A Tree Diagram or Sunburst Diagram shows the hierarchical structure more explicitly, at the cost of space efficiency and area-comparison accuracy. Treemaps also struggle with values of very different magnitudes: a cell representing 0.1 percent of the total may be too small to label or even see.

Paste this into Claude Code to generate a working version of this chart, plus its data file. The result will not be a perfect replica , the goal is that the reader can run the prompt, get a chart of this type, and read its source. Generate a complete, self-contained treemap in D3 v7. Two files:

The ideas in this chapter didn't appear from nowhere. Brian Johnson co-invented the rectangular treemap with Ben Shneiderman at the University of Maryland in 1991 , collaborating on the recursive slice-and-dice algorithm that turns a hierarchical tree into a space-filling rectangle. The chart became one of the most-cited tools in information visualization. Brian Johnson, circa 1991. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. Brian Johnson co-invented the rectangular treemap with Ben Shneiderman at the University of Maryland in 1991 , collaborating on the recursive slice-and-dice algorithm that turns a hierarchical tree into a space-filling rectangle. The chart became one of the most-cited tools in information visualization. Brian Johnson, circa 1991. AI-generated portrait based on a public domain photograph (Wikimedia Commons).