Before choosing a form, name what the hierarchy contains. Hierarchies have three distinguishable properties that different forms encode differently. Proportions. At each level, the children of a node divide the parent's value. A department's total budget equals the sum of its programs' budgets. Showing proportions means making the area of each node visually proportional to its value.

Treemap. Nested rectangles where each rectangle's area encodes its value. The squarified algorithm (Bruls, Huizing, van Wijk, 2000) keeps aspect ratios near square, which maximizes the accuracy with which the reader can compare areas. Treemaps answer the question "how are the proportions distributed?" with the highest accuracy available for area encoding. They do this well for two or three levels of nesting. Past three levels, the innermost rectangles compress into thin slivers where area is impossible to read and labels cannot fit. Sunburst.

Both treemaps and circle packing encode area. The treemap wins on area comparison accuracy, and the reason is the same mechanism that makes bar charts outperform pie charts. Rectangles have aligned edges. When two rectangles share a common baseline or a common axis, the reader can compare their heights or widths with near-position-accuracy , the eye anchors on the shared reference. This is the same mechanism that makes bar charts so readable: position along a common scale is the highest-accuracy channel Cleveland and McGill identified.

Treemaps fail past three levels. Sunbursts fail past five. These are not arbitrary rules , they follow from the geometry of the encoding. For a treemap at level n, the area allocated to a node is the area of its parent rectangle multiplied by the node's proportion of its parent's value. Each level of nesting multiplies by a fraction less than 1.

The squarified treemap algorithm deserves its own explanation because it is not obviously better than alternatives, and understanding why it is reveals something about the area-comparison mechanism. The first treemap algorithms (slice-and-dice, attributed to Shneiderman 1991) divided each rectangle by alternating horizontal and vertical cuts. A large parent rectangle gets sliced into vertical columns; each column gets diced into horizontal rows.

The sunburst diagram works because of a Gestalt perceptual mechanism that the treemap does not use: figure-ground. In a sunburst, the center is the figure. The outer rings recede into background. The reader's eye naturally treats the center as the root , the organizing structure from which everything else radiates. Moving outward means moving deeper into the hierarchy. This spatial metaphor is so natural that readers unfamiliar with sunburst charts tend to understand the center-to-outer structure without instruction.

The case for circle packing is most legible on an example. Imagine a dataset describing humanitarian aid organizations: some are large multinationals with programs, sub-programs, and project activities (three levels); some are regional NGOs with programs only (two levels); some are local grassroots organizations with no formal sub-structure (one level).

Sometimes neither proportions nor depth is the question. The question is: who reports to whom? A tree diagram is the right form when the structure itself is the answer. An organizational chart showing reporting relationships. A phylogenetic tree showing species divergence. A decision tree showing conditional branches. In all these cases, the quantitative value at each node matters less than the edges between nodes , the explicit parent-child relationships that define the hierarchy.

The channel decomposition for hierarchy charts differs from the charts in previous chapters because the primary channel , nested area , emerges from the layout algorithm, not from explicit x/y position assignments. For a treemap, the critical constraints are: the layout algorithm (d3.treemapSquarify), the depth limit (state it explicitly so Claude Code does not render all levels), the color encoding (top-level hue cascading to children, or a second quantitative variable as luminance), and the label rule (labels only on rectangles above a minimum size threshold, tooltip fallback for

Exercise 12.1 , Form selection. For each of the following, name the right hierarchy form (treemap, sunburst, circle packing, or tree diagram) and justify in one sentence using the chapter's three-property framework (proportions, depth, structure): A government budget broken down by department, sub-department, and line item (3 uniform levels, proportions are the question). A taxonomic classification with 6 levels of depth, from kingdom to species. A portfolio of humanitarian aid organizations, some with 3 levels of structure and some with 1.

Treemap. Nested rectangles where area encodes value. Best for proportion comparison. Squarified algorithm minimizes aspect-ratio variance. Depth limit: 3 levels for static display. Squarified algorithm. Bruls, Huizing, van Wijk (2000). Groups nodes to minimize worst aspect ratio. More accurate for area comparison than slice-and-dice. Implemented as d3.treemapSquarify.

Treemap. Nested rectangles where area encodes value. Best for proportion comparison. Squarified algorithm minimizes aspect-ratio variance. Depth limit: 3 levels for static display. Squarified algorithm. Bruls, Huizing, van Wijk (2000). Groups nodes to minimize worst aspect ratio. More accurate for area comparison than slice-and-dice. Implemented as d3.treemapSquarify.