// SLIDE 01 — HOOK

TREE DIAGRAM

46 capabilities across 4 domains —click any node to expand its branch

Tree Diagram — Figure 74.1 — 46 capabilities across 4 domains
NARRATION

46 capabilities across 4 domains , click any node to expand its branch Figure 74.1 , 46 capabilities across 4 domains

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A tree diagram visualises a strictly hierarchical structure — a root node, internal nodes (branches), and leaf nodes — c

What this chart is — Unlike a network diagram, a tree has exactly one parent per node and no cycles. Unlike a treemap, the tree diagram prese
NARRATION

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.

// SLIDE 03 — WHAT IT CANNOT SHOW

WHAT IT CANNOT SHOW.

A tree diagram fails the moment a node has more than one parent. In this taxonomy, "Machine Translation" could plausibly

What it cannot show — The tree also carries no quantitative information. Node size does not encode any data variable — nodes are sized by dept
NARRATION

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.

// SLIDE 04 — WHY COLLAPSIBILITY IS LOAD-BEA

WHY COLLAPSIBILITY IS LOAD-BEARING.

This taxonomy has 46 nodes. Fully expanded, a static tree at this scale becomes illegible — branches overlap, labels tru

Why collapsibility is load-bearing — Collapsibility also changes the reading mode from "overview" to "exploration" — the viewer constructs the mental model o
NARRATION

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.

// SLIDE 05 — WHEN TO USE ALTERNATIVES

WHEN TO USE ALTERNATIVES.

treemapcircle packingdendrogramnetwork diagram
NARRATION

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.

// SLIDE 06 — PROMPT

PROMPT

tree-diagram.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
tree-diagram/data.jsonthe data file the chart loads via d3.json("./tree-diagram/data.json"), with a fallback inline literal in the HTML if the
Hierarchical taxonomy for a collapsible tree diagram. Root node has 'children'; leaf nodes omit 'children'. Depth 2+ nodclick to expand. Maximum recommended depth is 4 for legibility.
namestring — label shown on the node
descstring — description shown in the tooltip
NARRATION

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:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Porphyry of TyreRun this:"Porphyry (philosopher)"Now make the prompt better.
NARRATION

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).

// SLIDE 08 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Porphyry of Tyre was a 3rd-century Phoenician philosopher whose Is

Porphyry of Tyre, 3rd century. AI-generated illustration based on a public domain painting (Wikimedia Commons).

NARRATION

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).

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//WHAT IT CANNOT SHOW//WHY COLLAPSIBILITY IS LOA

Brutalist D3 × Claude · Ch.74 · Tree Diagram

NARRATION

That is the framework. Brutalist D3 times Claude, chapter 74: Tree Diagram. The patterns are now in place. Apply them.

01 / 09
Brutalist D3 × Claude · Ch.74 · Nik Bear Brown