Also known as: Arc Graph · Linear Network Diagram · One-Dimensional Network
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. The arc's height is determined by the horizontal distance between its two endpoints: nodes that are far apart on the axis produce tall arcs; adjacent nodes produce shallow, tight curves.
Arc diagrams are best suited for co-occurrence and co-authorship data — situations where relationship strength matters more than cluster membership, and where an honest one-dimensional layout is preferable to a force-directed 2D layout that implies spatial meaning the data does not have.
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. Use the sort button to reorder nodes by total connections (descending) or alphabetically — sorting by connections places the most-connected characters near the centre, reducing arc crossing and exposing the hub structure.
Node order is the single most consequential design decision in an arc diagram: alphabetical order maximises arc crossings; connection-sorted order minimises them. Try both with the toggle above.
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. The trade-off is that cluster visibility is reduced — communities that would form visually distinct blobs in a 2D network layout appear as overlapping arc bundles in an arc diagram. When cluster detection is the primary goal, a force-directed or community-layout graph is the better choice.
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. Values at the extremes of the weight scale (very thick vs very thin) are distinguishable; values in the middle range can be hard to compare precisely.
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). The Lena–Dax connection is the thinnest arc in the chart (2 shared scenes), suggesting they appear together only briefly. Fenn–Voss (14 shared scenes) is the strongest secondary relationship, hinting at a subplot that runs parallel to Elara's main arc. The sort-by-connections order places Elara and Fenn adjacent at the left, compressing the heaviest arcs into a tight, readable cluster on the left side of the axis.
To substitute real data, replace the nodes and links arrays in arc-diagram/data.json. Each node needs an id, label, and totalScenes (or equivalent total-activity metric). Each link needs source, target (matching node ids), and weight (the co-occurrence count).