When Layout Becomes an Argument: Hierarchies, Forces, and Maps

Direct encodings map a field to a visual variable, but many datasets contain structure that cannot be shown by changing one coordinate or color. D3's hierarchy, force, and geographic modules compute intermediate arrangements before a renderer draws them. This chapter explains the difference between exposing an explicit relationship and calculating a spatial arrangement, then uses geographic projection as a boundary case. The practical judgment is to choose a representation for the relationship it makes visible, not to mistake every visible distance or enclosure for a fact in the data.

Layout is therefore not a neutral step after encoding. It can reorganize data so that a reader notices parent-child structure, proximity under constraints, or geographic position. That reorganization can be useful precisely because it creates a view that the raw records do not contain. It also means that the view needs interpretation: a layout foregrounds some relationships and makes others harder to see.

Hierarchy turns explicit relationships into spatial form

Hierarchical data already has a parent-child relationship. Geographic entities can be nested from broad regions to smaller units; organizations can contain teams and roles; file systems and software packages can contain subcomponents. D3's hierarchy module represents that structure as nodes with relationships that can be traversed, summarized, sorted, and linked. Tabular data can be organized into a hierarchy, while already nested data can be wrapped in a root node that gives layout algorithms a common interface.

Once the hierarchy exists, D3 offers several broad ways to make it visible. A node-link diagram represents nodes and connects parents to children. A tidy tree lays out those links compactly; a dendrogram places leaves at a common level. An adjacency diagram shows structure through the relative placement of nodes and can add a quantitative dimension through area. An icicle uses nested rectangles, while a sunburst uses nested annular segments. An enclosure diagram shows structure through containment: a treemap recursively subdivides area, and circle packing nests circles.

These forms are not interchangeable views of the same fact. A node-link diagram makes connections and paths easy to follow, but can spend space on links and leave quantitative comparison to other encodings. A treemap uses area efficiently for quantities, but containment and rectangle size may compete for attention. Circle packing makes nesting visually direct, though the documentation notes that it is less space-efficient than a treemap. The data structure remains hierarchical; the layout determines which aspect of that structure receives the clearest visual evidence.

The module's operations also separate data meaning from layout calculation. A hierarchy can be traversed, aggregated, sorted, copied, and converted into links before a particular layout is chosen. That separation matters when the same organization needs more than one view. The author can preserve the node relationships while changing whether the question concerns paths, group boundaries, quantitative area, or depth. D3 supplies the mechanisms for these arrangements, but the application must decide which relationship deserves space and visual emphasis.

Hierarchy layouts support a useful kind of multiscale inference. A reader can inspect an individual leaf, then move outward to its parent and larger groups. That movement is not just zooming through a picture; it is a change in the level at which the data is being considered.