Sixty-one chart types, alphabetically. Each chapter is short , a placeholder image, the rich pedagogical text from the working pantry page, a single Claude Code prompt that generates a similar chart and its data file together, and a link to bearbrown.co where the original code and data live. Browse, take what you need, skip what you don't. The prompts are the value: paste one into Claude Code and you have a working chart of that type in seconds, with a data file you can replace with your own.

Co-occurrence reveals who shares the most scenes

An Arc Diagram places all nodes on a single horizontal axis and draws the connections between them as curved arcs above that line. Arc thickness encodes the strength or frequency of each relationship. Node size encodes a second quantitative variable , here, the total number of scenes each character appears in. The perceptual mechanisms at work are stroke weight and spatial proximity , two preattentive channels that let the eye detect dominant connections before conscious reasoning begins.

Characters are arranged along the horizontal axis. Each arc connects two characters who appear together in at least one scene. Thicker, darker arcs (blood-red) represent the most frequent co-occurrences. Thin, muted arcs (grey) represent rare shared appearances. Hover any node to highlight only the arcs connected to that character , all other arcs dim out. This isolates the character's relational network. Hover any arc to see the exact shared-scene count in the tooltip.

A 2D force-directed graph places nodes wherever spring physics settle , a result that varies by run and initial conditions, and implies that proximity means relatedness . For co-occurrence data, that implication is false: two characters may appear far apart in the layout simply because the physics converged that way, not because they are unrelated. The arc diagram is honest: it admits the data is a list , not a map . The axis is stable, reproducible, and sortable.

Strengths: Preserves exact values (arc thickness encodes the raw count, not a binned category). Sortable axis gives the analyst direct control over the visual hierarchy. Scales cleanly to 10, 25 nodes; beyond that, arc crossings become visually dense. Limitations: Does not reveal community structure as clearly as 2D network layouts. Arc crossings increase as O(n²) with node count , charts with more than ~30 nodes become difficult to read without filtering. Does not support directed edges (arrows) as cleanly as a Sankey or DAG layout.

FT Visual Vocabulary · Abela · Tufte FT Visual Vocabulary: Relationship , Connection. Abela quadrant: Relationship (show connections between entities, not comparison or composition). Tufte principle: every pixel of arc thickness encodes a real value , the axis line itself is the only non-data ink in the chart.

This diagram maps the shared-scene relationships among eight characters from a fictional novel. Each node represents one character; node size encodes their total scene count across the full narrative. Each arc represents at least one shared scene; arc thickness encodes the number of scenes shared. Elara is the clear hub , she appears in 42 scenes and shares the most scenes with Fenn (18 co-appearances), followed by Voss (12).

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 arc diagram in D3 v7. Two files:

The ideas in this chapter didn't appear from nowhere. Leonhard Euler solved the Königsberg-bridges puzzle in 1735 by abstracting a city into nodes and edges and asking which path crossed each bridge exactly once. That single diagram founded graph theory , the mathematics that arc diagrams, force-directed networks, and every modern network visualization are built on. The arcs in this chapter trace back to those bridges. Leonhard Euler, circa 1750. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. Leonhard Euler solved the Königsberg-bridges puzzle in 1735 by abstracting a city into nodes and edges and asking which path crossed each bridge exactly once. That single diagram founded graph theory , the mathematics that arc diagrams, force-directed networks, and every modern network visualization are built on. The arcs in this chapter trace back to those bridges. Leonhard Euler, circa 1750. AI-generated portrait based on a public domain engraving (Wikimedia Commons).