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
2
layout entry points
0
coordinates in the watershed
A short history of useful distortion

The diagram escaped the city

1909 → 1933
Linear 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 → 1979
New 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 → now
Researchers 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

Follow a route through the shared stations

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.

Skip to data table
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 · octilinear

Headwaters become origins, confluences become interchanges, and the reservoir carries the merged routes. Follow each color to see where the water came from. The diagram emphasizes connections; use a geographic map for distances and directions.

Skip to data table
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.
The contract

Start automatically, then refine the route

Automatic layout gives a new graph a consistent starting arrangement. Try it to see whether routes and junctions help explain the network, then add positions, waypoints or line ordering where they improve the reading.

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.