46 capabilities across 4 domains —click any node to expand its branch
46 capabilities across 4 domains , click any node to expand its branch Figure 74.1 , 46 capabilities across 4 domains
A tree diagram visualises a strictly hierarchical structure — a root node, internal nodes (branches), and leaf nodes — c
A tree diagram visualises a strictly hierarchical structure , a root node, internal nodes (branches), and leaf nodes , connected by edges that represent parent-child relationships. The perceptual mechanism is spatial containment implied by path-following: the viewer traces branches from the root outward to understand how a whole decomposes into its parts. Unlike a network diagram, a tree has exactly one parent per node and no cycles.
A tree diagram fails the moment a node has more than one parent. In this taxonomy, "Machine Translation" could plausibly
A tree diagram fails the moment a node has more than one parent. In this taxonomy, "Machine Translation" could plausibly belong to both NLP and Coordination Platforms , but placing it in two locations would create a DAG, not a tree, and would require a network diagram or a Venn diagram instead. The tree structure is always a simplification of a reality that is rarely so clean. The tree also carries no quantitative information.
This taxonomy has 46 nodes. Fully expanded, a static tree at this scale becomes illegible — branches overlap, labels tru
This taxonomy has 46 nodes. Fully expanded, a static tree at this scale becomes illegible , branches overlap, labels truncate, and the viewer cannot orient themselves in the structure. Collapsibility solves the scale problem by letting the viewer navigate the hierarchy incrementally, expanding only the branches they need to explore. Collapsibility also changes the reading mode from "overview" to "exploration" , the viewer constructs the mental model of the hierarchy through interaction, which produces deeper comprehension than a static overview.
Use a treemap when node size encodes a value (budget, headcount, coverage) and you need to fill a rectangular space efficiently. Use circle packing when hierarchical containment is more important than space efficiency. Use a dendrogram when the tree is produced by clustering algorithm output , the node positions carry statistical meaning (similarity distance), not just parent-child structure. Use a network diagram when relationships are non-hierarchical , when nodes can have multiple parents or when the graph has cycles.
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 tree diagram in D3 v7. Two files:
The ideas in this chapter didn't appear from nowhere. Porphyry of Tyre was a 3rd-century Phoenician philosopher whose Isagoge introduced the "Porphyrian tree" , a hierarchical branching diagram of categories , that became the standard tree visualization in medieval logic and the ancestor of every modern taxonomy diagram. Porphyry of Tyre, 3rd century. AI-generated illustration based on a public domain painting (Wikimedia Commons).
Porphyry of Tyre, 3rd century. AI-generated illustration based on a public domain painting (Wikimedia Commons).
The ideas in this chapter didn't appear from nowhere. Porphyry of Tyre was a 3rd-century Phoenician philosopher whose Isagoge introduced the "Porphyrian tree" , a hierarchical branching diagram of categories , that became the standard tree visualization in medieval logic and the ancestor of every modern taxonomy diagram. Porphyry of Tyre, 3rd century. AI-generated illustration based on a public domain painting (Wikimedia Commons).
Brutalist D3 × Claude · Ch.74 · Tree Diagram
That is the framework. Brutalist D3 times Claude, chapter 74: Tree Diagram. The patterns are now in place. Apply them.