Hover cells for details · Click a sector to zoom into subcategories · Click zoom out or breadcrumb to return
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. Viewers can rapidly identify which cells are largest and which are smallest, even when the hierarchy has dozens of nodes. Unlike a bar chart (which encodes value as length) or a pie chart (which encodes value as angle), the treemap encodes value as the most holistic visual channel available: two-dimensional area. A cell that is twice as large occupies visually twice as much space — the comparison is immediate and preattentive.
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 200×4 pixel rectangle and a 40×20 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 squarified algorithm (Bruls, Huizing, van Wijk, 1999) specifically minimises the aspect ratio of each cell, keeping them as close to square as possible. This maximises the accuracy of area comparisons — squares and near-squares are the shapes for which human area perception is most reliable. D3's d3.treemap().tile(d3.treemapSquarify) implements this directly.
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.
The treemap encodes both levels simultaneously in a single view, with area as the encoding channel at both levels. The dominant sector claims the most screen space — the viewer sees this immediately, before reading any label. The dominant subcategory within each sector similarly claims proportional space within its parent rectangle.
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% of the total may be too small to label or even see. The interactive zoom-into-branch approach used here addresses this: clicking a parent expands it to fill the full chart area, giving its smaller subcategories enough space to be individually readable.
FT Visual Vocabulary — Part-to-Whole / Hierarchy category. "Use a treemap when you want to show both proportions and hierarchy simultaneously — especially when the dataset has many nodes that would produce an illegible pie chart." Abela quadrant: Composition (multiple levels, many items). Tufte principle applied: the squarified algorithm minimises chartjunk by maximising the accuracy of the primary encoding channel (area) — rounder cells waste less perceptual effort on aspect-ratio correction. The one design decision worth knowing: cell colour in this implementation encodes the parent sector (all subcategories within a sector share a tint of their parent's hue), not a second data dimension. Using colour to encode a second variable (e.g. growth rate) is valid but requires a legend and careful contrast checking — in this build, colour reinforces hierarchy, which is always informative, rather than adding a third encoding that may confuse.