Machine-readable page content
Canonical: https://semiotic.nteract.io/examples/lines-of-thought
Lines of Thought
A subway diagram makes a bargain: sacrifice literal distance so connections become easy to follow. That bargain works for trains, but also for any network whose paths, junctions, and shared passages matter more than its native coordinates.
8
permitted segment directions
0
coordinates in the watershed
The diagram escaped the city
1909 → 1933Linear carriage diagrams had already regularized stops. Harry Beck's London Underground design made the larger conceptual leap: preserve the system and simplify its geometry into horizontal, vertical, and 45-degree paths.
1958 → 1979New York repeatedly negotiated the same tension. Its Beckian and Vignelli-era maps privileged service structure; the 1979 map restored more geography. Neither answer is universal—the task decides which distortion is honest.
2000s → nowResearchers and designers carried the grammar into course maps, news summaries, set systems, waterways, and other abstract information spaces. “Station” became a node; “line” became a continuing idea, source, category, or path.
Read the design history in the New York Transit Museum'sVignelli at 50 exhibit; see the formal design rules in thesurvey of automated metro-map layouts, and the metaphor's expansion inMetroSets.
Approach one · art-directed
The diagram you can defend station by station
This fictional system has normalized station positions. Semiotic fits them to the plot, keeps the shared trunks parallel, and uses the supplied line order. Toggle the fallback to see the same data treated as an undecorated graph.
The Ember, Blue, and Garden lines share track through Union, Market, and Foundry. Toggle the geometry control to compare authored and automatic topology layouts.
Ember LineBlue LineGarden Line
Trace:Hover a station or line segment.
JSX
import { NetworkCustomChart } from "semiotic/network" import { transitDiagramLayout } from "semiotic/recipes" // Complete x/y positions are fitted to the available plot. // Optional edge points and lineOrder values provide art direction. <NetworkCustomChart nodes={stations} edges={connections} layout={transitDiagramLayout} layoutConfig={{ lineAccessor: "line", cornerRadius: 10, lineOrder: ["ember", "blue", "green"] }} accessibleTable />
Approach two · topology first
A watershed arrives with no station positions
automatic · deterministic · octilinearHeadwaters behave like origins, confluences like interchanges, and the reservoir like a shared trunk. Each colored line follows water from one source after streams merge. The metaphor reveals provenance and convergence; it intentionally does not claim geographic distance, direction, or stream volume.
Semiotic places the outlet at the right, layers upstream junctions by graph distance, reduces crossings, and routes connections with horizontal, vertical, and diagonal segments.
Snowfield waterPine Creek waterCanyon Spring waterDesert Wash water
nodes
id · label · kind
edges
source · target · lines
no x
no y
no rank
no waypoints
The only layout hint is rootId: "Delta", supplied as chart configuration rather than written into every row. Remove it and the layout selects a deterministic peripheral endpoint itself.
JSX
// These nodes have ids and labels, but no x/y coordinates. const watershedNodes = [ { id: "Snowfield", label: "Snowfield headwater" }, { id: "North Fork", label: "North Fork" }, { id: "Delta", label: "Delta / ocean" } ] <NetworkCustomChart nodes={watershedNodes} edges={watershedEdges} layout={transitDiagramLayout} layoutConfig={{ rootId: "Delta", direction: "right-to-left" }} accessibleTable /> // Missing positions trigger a deterministic topology layout, // crossing-reduction sweeps, and octilinear connection routing.
Experiment freely; art-direct deliberately
Automatic layout is an invitation, not a certification. It gives an unfamiliar graph a stable first diagram so you can decide whether the metaphor has explanatory power. If it does, add coordinates, waypoints, and line ordering where editorial judgment matters.
Geometry
layoutMode detects complete x/y automatically. Use automaticto ignore them, or authored to request them and fall back safely when they are incomplete.
Network meaning
lineAccessor accepts one line or several line descriptors per edge. lineOrder stabilizes parallel trunks; rootId anddirection orient fallback layouts.
Drawing
Tune lineWidth, lineGap, cornerRadius, station radii, labels, padding, colors, and authored intermediate points without replacing the layout.