31:T9f1,# Better Line Diagrams In [NS Line Diagrams](/@julesblm/ns-line-diagrams), I recreated the diagrams the Dutch National Railways (NS) show on the travel info signs at platforms. ${rotterdamChart} It's a neat diagram, but looking at it for a long time during my recreation, I noticed *just enough* arbitrary choices to convince me it's handmade rather than generated from data. I'll leave it to the reader to compare it against the geographic map and spot the 'flaws.' ## Towards a Better Diagram So I'll attempt to design a better diagram. I set myself three constraints: 1. **Network topology**: From my experience using public transit, it's very valuable to have a sense of the network topology, especially in case of disturbances. When a train is stranded, I want to see what the alternative routes are. I want my diagram to encode topology too. For example, there is a track between Roosendaal and Breda which the original diagram doesn't reveal. 2. **Left-to-right**: I still want the diagram to read left-to-right like the original. It shouldn't become a typical transit map, with pseudo-geographic with lines heading off in four or more directions. This does create some tension with constraint #1, that makes it an interesting challenge. Similar diagrams I really like are the [BSicons route diagrams on Wikipedia](https://en.wikipedia.org/wiki/Wikipedia:Route_diagram_template). These are compact and run vertically. The [transit system diagrams](https://nathandrezner.com/2023/04/24/wikipedia-transit) are most relevant but they also exist for [rail networks](https://en.wikipedia.org/wiki/Template:Railway_line_legend), and even [waterways](https://x.com/kristinatastic/status/1918656683762479613). 4. **Service lines**: [NS is introducing service line numbers](https://nieuws.ns.nl/ns-voert-lijnnummers-in-voor-treinen-en-zoekt-nieuw-ontwerp-voor-lijnenkaart/) this year. I want my improved diagram to display those. The rest of this notebook is the road to that diagram. I start from the data: the service lines and the geographic network they run on. Then come two detours that shaped the design but didn't survive it: a transit-map-style rendering of the geographic map with offset service lines, and an interactive force-directed graph layout that worked well for horsing around and trying out many layouts. Finally I build the 'final' diagram itself, by condensing the network to its junctions and laying it out on a grid, and close with some lessons learned. Here's the end result. Feedback and adaptations are welcome!32:T701,servicesOverview = { const xStep = 80; const yStep = 110; const maxWidth = d3.max(services, (s) => s.stations.length) * xStep + margin.left; const height = (services.length - 1) * yStep + 25; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, maxWidth, height + margin.top]) .attr("style", `max-width: 100%; height: auto; font-family: sans-serif;`); const diagram = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // const [intercity, sprinter] = services.reduce( // ([ic, sprinter], service) => { // (service.kind === "IC" ? ic : sprinter).push(service); // return [ic, sprinter]; // }, // [[], []] // ); const service = diagram .append("g") .selectAll() .data(services) .join("g") .attr("transform", (d, i) => `translate(0,${i * yStep})`); service .append("line") .attr("x1", 0) .attr("x2", (d) => (d.stations.length - 1) * xStep) .attr("y1", 0) .attr("y2", 0) .attr("stroke-width", 2.5) .attr("stroke", (d) => colorScale(d.id)); service .append("text") .attr("x", -40) .attr("dominant-baseline", "middle") .attr("font-weight", "600") .text((d) => d.kind + d.id); const stations = service .selectAll("g") .data((d) => d.stations.map((station) => ({ station, service: d }))) .join("g") .attr("font-size", 12) .attr("transform", (d, i) => `translate(${i * xStep},0)`); stations .append("circle") .attr("r", 4) .attr("fill", (d) => colorScale(d.service.id)); stations .append("text") .attr("x", 10) .attr("y", -5) .attr("transform", "rotate(-45)") .text((d) => d.station); return svg.node(); }33:T550,geoLinesMap = Plot.plot({ projection: nlStereoProjection, width, height: mapHeight, marks: [ Plot.geo(nlProvincies, { stroke: "lightgray" }), // ...selected.map((s) => // Plot.geo(turf.featureCollection(s.tracks), { // stroke: "lavender", // strokeWidth: 6 // }) // ), Plot.geo(rotterdamTracks, { strokeWidth: 2, strokeOpacity: 0.25 }), Plot.geo(stations.features, { fill: "black", fillOpacity: 0.3, r: (d) => (icStations.has(d.properties.name) ? 3 : 2) }), ...selected.map((s) => Plot.geo(s.segments, { strokeWidth: 2, stroke: colorScale(s.id), title: s.id }) ), ...selected.map((s) => Plot.geo(s.stationsGeo, { fill: colorScale(s.id), stroke: "ghostwhite", r: (d) => (icStations.has(d.properties.name) ? 3 : 2) }) ), Plot.text( selected.flatMap((s) => s.stationsGeo), Plot.centroid({ text: (d) => d.properties.name, fill: "black", stroke: "white", strokeWidth: 3, paintOrder: "stroke", rotate: -45, dy: -7, dx: -1, opacity: (d) => (selectedStations.has(d.properties.name) ? 1 : 0.3), fontSize: (d) => (icStations.has(d.properties.name) ? 8 : 6), textAnchor: "start" }) ) ] })34:T877,segmentsMap = Plot.plot({ width, height: mapHeight, projection: nlStereoProjection, color: { type: "categorical", scheme: "accent" }, marks: [ Plot.geo(nlProvincies, { stroke: "lightgray" }), Plot.geo(rotterdamTracks.features, { strokeWidth: 2, stroke: (d) => d.properties.track, // usign a render transform for the textPaths https://observablehq.com/@tophtucker/plot-simple-render-transform render(index, scales, values, dimensions, context, next) { // mutable debug = { index, scales, values, dimensions, context }; const g = next(index, scales, values, dimensions, context); const paths = d3 .select(g) .selectAll("path") .data(index) .attr("id", (i) => `lijn-${i}`); d3.select(g) .append("g") .attr("font-size", 8) .attr("stroke", "white") .attr("stroke-width", 3) .attr("paint-order", "stroke") .selectAll("text") .data(index) .join("text") .attr("letter-spacing", 0.1) .attr("fill", (i) => values.stroke[i]) // .attr("dy", -4) .append("textPath") .attr("href", function (i) { const path = g.querySelector(`#lijn-${i}`); const pathLength = path.getTotalLength(); const startPoint = path.getPointAtLength(0); const endPoint = path.getPointAtLength(pathLength); // already left-to-right if (startPoint.x <= endPoint.x) { return `#lijn-${i}`; } const linePath = path.getAttribute("d"); // build a reversed copy for the label d3.select(g) .append("path") .attr("id", `lijn-${i}-rev`) .attr("d", reverseD(linePath)) .attr("fill", "none") .attr("stroke", "none"); return `#lijn-${i}-rev`; }) .attr("startOffset", "45%") .attr("text-anchor", "middle") .text((i) => rotterdamTracks.features[i].properties.track); return g; } }) ] })35:T655,transitMapLike = { const terminusDx = 12; return Plot.plot({ projection: nlStereoProjection, width, height: mapHeight, marks: [ Plot.geo(nlProvincies, { stroke: "lightgray" }), ...offsetServices.map((s) => Plot.geo(s.offsetSegments, { strokeWidth: 4, stroke: colorScale(s.id), title: (d) => `${s.kind}${s.id}` // markerStart: (color) => badgeMarker(s.id, color), // markerEnd: (color) => badgeMarker(s.id, color) }) ), ...offsetServices.map((s) => Plot.geo(s.offsetStationsGeo, { fill: colorScale(s.id), stroke: "ghostwhite", r: (d) => (isIcStation(d.properties.name) ? 2 : 1) }) ), Plot.text( stationLabels, Plot.centroid({ text: (d) => d.properties.name, fill: "black", stroke: "white", strokeWidth: 1.5, paintOrder: "stroke", rotate: -45, dy: -8, dx: -1, fontSize: (d) => (isIcStation(d.properties.name) ? 8 : 6), textAnchor: "start" }) ), Plot.dot( terminii.ends, Plot.centroid({ symbol: "square", dx: terminusDx, r: 7, fill: "white", stroke: (d) => colorScale(d.properties.serviceId), strokeWidth: 1.5 }) ), Plot.text( terminii.ends, Plot.centroid({ text: (d) => d.properties.label, fontSize: 7, dx: terminusDx, fill: "black" }) ) ] }); }36:T4ab,## Track Order One thing I define by hand is the order of the lanes where services share a track. It's kind of an ugly fix. Doing this automatically *optimally* turns out to be a named research problem, **metro-line crossing minimization**, and the papers that tackle it reach for things like [(Mixed)](https://research.tue.nl/en/publications/a-mixed-integer-program-for-drawing-high-quality-metro-maps/) [Integer Linear Programming](https://dl.acm.org/doi/abs/10.5555/1379361.1379370). The people at [Transit app](https://transitapp.com/) wrote two great posts on [how the big map providers (Google, Apple) draw transit lines](https://blog.transitapp.com/transit-maps-apple-vs-google-vs-us-cb3d7cd2c362/) and [how they auto-generate theirs](https://blog.transitapp.com/how-we-built-the-worlds-prettiest-auto-generated-transit-maps-12d0c6fa502f/), which give a sense of how deep this rabbit hole goes. I am a dilettante. This is something I work on out of my own interest, whenever can find some time. I can't go into depth on every subproblem this diagram touches. I don't have the time for that, and honestly not the motivation either. An eyeballed, hand-written definition will have to do.37:T6b5,offsetServices = services.map((service) => { const offsetFeatures = service.segments.features.map((segment) => { const order = trackServiceOrder.get(segment.properties.track) ?? [ service.id ]; const slot = order.indexOf(service.id); const distance = (slot - (order.length - 1) / 2) * offsetDistance; const f = distance === 0 ? turf.clone(segment) : turf.lineOffset(segment, distance, { units: "meters" }); f.properties = { ...segment.properties, serviceId: service.id, slot, distance }; return f; }); const offsetStationsGeo = service.stations .map((stationName, i) => { const point = service.stationsGeo[i]; // segments touching this station on either end const candidates = offsetFeatures.filter( (f) => f.properties.from === stationName || f.properties.to === stationName ); // the 50km snap tolerance in segmentsBetweenStations creates sliver // segments at track endpoints labeled with far-away stations // the nearest snap is the station's real lane, slivers are km away let best = null; for (const seg of candidates) { const snapped = turf.nearestPointOnLine(seg, point); if (!best || snapped.properties.dist < best.properties.dist) { best = snapped; } } if (!best || best.properties.dist > 5) { return null; } best.properties = { ...point.properties, serviceId: service.id }; return best; }) .filter(Boolean); return { ...service, offsetSegments: turf.featureCollection(offsetFeatures), offsetStationsGeo }; })38:T424,## Force Graph The geographic map with offset lines is nice, but if it's a graph deep down, let's try reduce the representation and display it as a... force graph! ### Geographic Seed The force graph works well for the topology. We can also use the projection to ‘seed’ the graph layout with geographic coordinates. ### Grid I was a bit surprised to find many research papers on drawing transit maps. One common technique in research papers on automated drawing of transit maps is to define an ["Octilinear grid"](https://octi.cs.uni-freiburg.de/) ([Metro Maps on Octilinear Grid Graphs](https://diglib.eg.org/items/d9d40b2d-715f-4537-99d4-c55a3a642ef6)). If I had more time, I would diligently read these papers and implement parts of ‘m in this notebook. But I don't really have time for that. So I did it the quick 'n dirty way using [d3-force-grid](https://github.com/vasturiano/d3-force-grid) by [Vasco Asturiano](/@vasturiano). This enables snapping nodes to a regular grid. Not as cool as an octilinear grid, but a lot more orderly already. 39:T1728,// adapted from https://observablehq.com/@d3/force-directed-graph/2 graphChart = { const height = mapHeight; const forceLink = d3.forceLink(links).id((d) => d.id); const simulation = d3 .forceSimulation(nodes) .force("link", forceLink) .force("charge", d3.forceManyBody()) .alphaDecay(0.001) .on("tick", ticked); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); const gridId = DOM.uid("grid"); svg .append("defs") .append("pattern") .attr("id", gridId.id) .attr("width", graphSettings.gridStep) .attr("height", graphSettings.gridStep) .attr("patternUnits", "userSpaceOnUse") .append("path") .attr( "d", `M ${graphSettings.gridStep} 0 L 0 0 0 ${graphSettings.gridStep}` ) .attr("fill", "none") .attr("stroke", "#ddd") .attr("shape-rendering", "crispEdges") .attr("stroke-width", 1); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", mapHeight) .attr("fill", gridId); const thickness = 4; svg .append("rect") .attr("x", 5) .attr("y", 5) .attr("width", width - thickness * 2) .attr("height", mapHeight - thickness * 2) .attr("fill", "none") .attr("stroke", containInBounds ? "black" : "none") .attr("stroke-width", thickness) .attr("pointer-events", "none"); const laneLine = d3.line(); const lanes = svg .append("g") .attr("fill", "none") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("path") .data(forceGraphLanes) .join("path") .attr("stroke", (d) => colorScale(d.id)) .attr("stroke-width", 3); // one dot per (service, station it stops at), sitting on that service's lane const stopDot = svg .append("g") .selectAll("circle") .data(forceGraphStopDots) .join("circle") .attr("r", 2) .attr("fill", "white") .attr("stroke", (d) => colorScale(d.lane.id)) .attr("stroke-width", 1.5) .attr("pointer-events", "none"); const node = svg .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("r", 3) .attr("fill", (d) => (icStations.has(d.id) ? "white" : "transparent")) .attr("stroke", (d) => (icStations.has(d.id) ? "#333" : "none")) .attr("stroke-width", 1.5) .classed("node", true) .classed("fixed", (d) => d.fx !== undefined); const label = svg .append("g") .selectAll("text") .data(nodes) .join("text") .text((d) => d.id) .attr("font-size", (d) => (icStations.has(d.id) ? 9 : 7)) .attr("text-anchor", "middle") .attr("dy", -8) .attr("fill", ({ id }) => (stopsAnywhere.has(id) ? "black" : "#aaa")) .attr("stroke", "white") .attr("stroke-width", 2.5) // .attr("transform-origin", "center") // .attr("transform", "rotate(45)") .attr("paint-order", "stroke"); node.append("title").text((d) => d.id); const drag = d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); node.call(drag).on("click", click); function ticked() { for (const lane of forceGraphLanes) { lane.positions = offsetPolyline(lane.points, lane.offsets); } lanes.attr("d", (d) => laneLine(d.positions)); stopDot .attr("cx", (d) => d.lane.positions[d.i][0]) .attr("cy", (d) => d.lane.positions[d.i][1]); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); label.attr("x", (d) => d.x).attr("y", (d) => d.y); } function click(event, d) { delete d.fx; delete d.fy; d3.select(this).classed("fixed", false); simulation.alpha(1).restart(); } function dragstarted(event) { if (!event.active) { simulation.alphaTarget(0.3).restart(); } d3.select(this).classed("fixed", true); svg.style("user-select: none;"); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function clamp(x, lo, hi) { return x < lo ? lo : x > hi ? hi : x; } function dragged(event, d) { // reading gridEnabled here would rerender the cell so we'll derive that info in a roundabout manner to avoid that reactive dependency const gridEnabled = Boolean(simulation.force("grid")); const roundToStep = (value, step, offset = 0) => gridEnabled ? Math.round((value - offset) / step) * step + offset : value; event.subject.fx = roundToStep( clamp(event.x, -width / 4, width * 1.25), graphSettings.gridStep ); event.subject.fy = roundToStep( clamp(event.y, -height / 4, height * 1.25), graphSettings.gridStep ); simulation.alpha(1).restart(); } function dragended(event) { if (!event.active) { simulation.alphaTarget(0); } svg.style("user-select: auto;"); } let mode = "force-only"; let flight = null; function setLayout(next) { if (next === mode) { return; } mode = next; flight?.stop(); // in case user flips back mid-tween if (mode === "geographic") { simulation.stop(); for (const d of nodes) { delete d.fx; delete d.fy; } const starts = new Map(nodes.map((d) => [d, [d.x, d.y]])); const duration = 800; flight = d3.timer((elapsed) => { const t = d3.easeCubicInOut(Math.min(1, elapsed / duration)); for (const d of nodes) { const [sx, sy] = starts.get(d); d.x = sx + (d.gx - sx) * t; d.y = sy + (d.gy - sy) * t; } ticked(); if (t === 1) { flight.stop(); } }); } else { simulation.alpha(1).restart(); } } invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { simulation, setLayout }); }3a:T514,In my ~8 years of using D3, I never looked into [d3-force](https://d3js.org/d3-force) much until this notebook. I like d3-force because the logic is 'squishy'. We do not define a strict layout, instead it emerges which makes it look 'alive'. After I made this, I read up on d3-force and watched some talks on it. Most notably, this talk by Jim Vallandingham on [Using and Abusing the Force: Interesting applications for D3's force layout](https://vallandingham.me/abusing_the_force.html) from way back in 2013. He mentions that he played around with applying a [grid force to transit maps](https://github.com/vlandham/force_talk/tree/gh-pages/subway_grid). Nothing is ever truly new. Regardless, I like what he had to say about force layouts for transit maps. > *“So we'll start each node, which is a subway station, at their [geographic] location. And then we'll let the simulation run and see what happens. And it's... interesting, I think it's kind of artistic and fun. I don't know about the practical [use]. I am not from Boston so it doesn't matter to me. **[But] it is at least a starting point, something to conjure up more ideas.**”* And I think that's the main power of this force + grid layout, with some interaction, we can use to play around and find what works and what doesn't.3b:T41d,gridUpdaterCell = { graphSettings.gridStep = gridStep; graphSettings.snap = snapToGrid; const simulation = configuredSim; if (snapToGrid) { const forceGrid = (simulation.force("grid") ?? d3.forceGrid()).step( gridStep ); simulation.force("grid", forceGrid); simulation.force("collide", d3.forceCollide(gridStep * 0.55)); } else { simulation.force("grid", null); simulation.force("collide", null); } if (containInBounds) { // https://observablehq.com/@john-guerra/d3-force-boundary const padding = 10; simulation.force( "boundary", forceBoundary(padding, padding, width - padding, mapHeight - padding) ); } else { simulation.force("boundary", null); } simulation.alpha(0.3).restart(); d3.select(graphChart) .select("pattern") .attr("width", gridStep) .attr("height", gridStep) .select("path") .attr("d", `M ${gridStep} 0 L 0 0 0 ${gridStep}`); d3.select(graphChart) .select("rect") .attr("display", snapToGrid ? "inherit" : "none"); }3c:T99d,railGraph = { const nodes = new Map(); const links = []; // make graph of physical rail network for (const line of rotterdamTracks.features) { const { track } = line.properties; const ordered = stations.features // project station point onto track linestring .map((st) => { const snapped = turf.nearestPointOnLine(line, st); return { name: st.properties.name, dist: snapped.properties.dist, location: snapped.properties.location }; }) .filter((d) => d.dist <= 1) // km .sort((a, b) => a.location - b.location); // put them in track order, end to end for (const { name } of ordered) { nodes.set(name, { id: name }); } for (let i = 0; i < ordered.length - 1; i++) { links.push({ source: ordered[i].name, target: ordered[i + 1].name, track, services: [] }); } } const servicePaths = []; const debug = new Map(); // make a graph of the services using the physical graph for (const service of services) { const adjacency = new Map(); for (const link of links) { // between some stop pairs there's more than one physical route // ignore the tracks that are not whitelisted in a service if (!service.tracks.includes(link.track)) { continue; } for (const [a, b] of [ [link.source, link.target], [link.target, link.source] ]) { if (!adjacency.has(a)) { adjacency.set(a, []); } adjacency.get(a).push({ next: b, link }); } } debug.set(service.id, adjacency); const path = { id: service.id, nodes: [service.stations[0]], segments: [] }; for (let i = 0; i < service.stations.length - 1; i++) { for (const step of shortestPath( adjacency, service.stations[i], service.stations[i + 1] )) { // links are tagged only when actually traversed if (!step.link.services.includes(service.id)) { step.link.services.push(service.id); } // flip: this hop runs against the link's own source→target direction path.segments.push({ track: step.link.track, flip: step.link.target === path.nodes.at(-1) }); path.nodes.push(step.node); } } servicePaths.push(path); } return { nodes: [...nodes.values()], links, servicePaths, debug }; }3d:Td1d,// thanks Claude offsetPolyline = { /** * Offset each segment of a polyline perpendicular to itself by a per-segment * amount, reconnecting adjacent segments with miter joins (clamped by a miter * limit so hairpin bends don't produce runaway spikes). * * @param {{x: number, y: number}[]} points Polyline vertices (length ≥ 2). * @param {number[]} offsets Signed offset per segment (length = points.length − 1). * Positive is the counterclockwise normal — visually the *right* side of the * travel direction in SVG's y-down coordinate system. * @param {number} miterBase Minimum length used in the miter-limit computation * (previously the free variable `laneGap`). Keeps the limit sensible when * offsets are 0. * @returns {[number, number][]} The offset polyline as [x, y] pairs. */ function offsetPolyline(points, offsets, miterBase = 0) { const segments = points .slice(0, -1) .map((start, i) => offsetSegment(start, points[i + 1], offsets[i])); const first = segments[0]; const last = segments.at(-1); const result = [[first.a.x, first.a.y]]; for (let i = 0; i < segments.length - 1; i++) { const miterTip = intersectLines(segments[i], segments[i + 1]); const limit = 3 * Math.max(Math.abs(offsets[i]), Math.abs(offsets[i + 1]), miterBase); const joined = clampToRadius(miterTip, points[i + 1], limit); result.push([joined.x, joined.y]); } result.push([last.b.x, last.b.y]); return result; } /** * Translate segment a→b sideways along its unit normal, scaled by `offset`. * Keeps the (unnormalized) direction vector for later intersection tests. */ function offsetSegment(a, b, offset) { const dx = b.x - a.x; const dy = b.y - a.y; const len = Math.hypot(dx, dy) || 1; // guard zero-length segments const nx = (-dy / len) * offset; const ny = (dx / len) * offset; return { a: { x: a.x + nx, y: a.y + ny }, b: { x: b.x + nx, y: b.y + ny }, dx, dy }; } /** * Intersect the infinite lines through two offset segments — the miter tip. * Solves s1.a + t·d1 = s2.a + u·d2 by crossing both sides with d2. * Near-parallel lines have no stable intersection, so fall back to the * midpoint of the gap between the two loose endpoints. */ function intersectLines(s1, s2) { const cross = s1.dx * s2.dy - s1.dy * s2.dx; const EPSILON = 1e-6; if (Math.abs(cross) < EPSILON) { return { x: (s1.b.x + s2.a.x) / 2, y: (s1.b.y + s2.a.y) / 2 }; } const t = ((s2.a.x - s1.a.x) * s2.dy - (s2.a.y - s1.a.y) * s2.dx) / cross; return { x: s1.a.x + t * s1.dx, y: s1.a.y + t * s1.dy }; } /** * If `point` lies farther than `limit` from `center`, pull it back onto the * circle of radius `limit` along the same direction. This is the miter limit: * sharp bends push the tip out proportional to 1/sin(θ/2), so we cap it. */ function clampToRadius(point, center, limit) { const dx = point.x - center.x; const dy = point.y - center.y; const dist = Math.hypot(dx, dy); if (dist <= limit) return point; return { x: center.x + (dx / dist) * limit, y: center.y + (dy / dist) * limit }; } return offsetPolyline; }3e:T7fd,servicesRaw = [ { id: "35", kind: "IC", stations: ["Rotterdam Centraal", "Breda", "Tilburg", "Eindhoven Centraal"], tracks: [ "rotterdam-barendrecht", "barendrecht-lagezwaluwe-hsl", "lagezwaluwe-breda", "breda-eindhoven" ] }, { id: "66", kind: "S", stations: [ "Tilburg", "Tilburg Universiteit", "Tilburg Reeshof", "Gilze-Rijen", "Breda", "Breda-Prinsenbeek", "Lage Zwaluwe", "Dordrecht Zuid", "Dordrecht" ].toReversed(), tracks: ["breda-eindhoven", "lagezwaluwe-breda", "lagezwaluwe-barendrecht"] }, { id: "21", kind: "IC", stations: [ "Rotterdam Centraal", "Rotterdam Blaak", "Dordrecht", "Roosendaal", "Bergen op Zoom", "Goes", "Middelburg", "Vlissingen" ], tracks: [ "rotterdam-barendrecht", "lagezwaluwe-barendrecht", "roosendaal-lagezwaluwe", "vlissingen-roosendaal" ] }, { id: "50", kind: "S", stations: [ "Dordrecht", "Zwijndrecht", "Barendrecht", "Rotterdam Lombardijen", "Rotterdam Zuid", "Rotterdam Blaak", "Rotterdam Centraal" ].toReversed(), tracks: ["rotterdam-barendrecht", "lagezwaluwe-barendrecht"] }, { id: "59", kind: "S", stations: [ "Dordrecht", "Dordrecht Zuid", "Lage Zwaluwe", "Zevenbergen", "Oudenbosch", "Roosendaal" ], tracks: ["lagezwaluwe-barendrecht", "roosendaal-lagezwaluwe"] }, { id: "36", kind: "IC", stations: [ "Tilburg", "Breda", "Etten-Leur", "Roosendaal", "Bergen op Zoom", "Rilland-Bath", "Krabbendijke", "Kruiningen-Yerseke", "Kapelle-Biezelinge", "Goes", "Arnemuiden", "Middelburg", "Vlissingen Souburg", "Vlissingen" ], tracks: ["breda-eindhoven", "vlissingen-roosendaal", "roosendaal-breda"], note: "1×/hour Roosendaal–Vlissingen" } ]3f:T624,// `line`: a single LineString Feature; `stations`: Point Features of stations for THAT line function segmentsBetweenStations(line, stations, maxOffsetKm = 50) { const snapped = stations .map((st) => { const nearestPoint = turf.nearestPointOnLine(line, st); return { props: st.properties, dist: nearestPoint.properties.location, // distance along the line offset: nearestPoint.properties.dist // how far the station was from the line }; }) .filter((s) => s.offset <= maxOffsetKm) // drop stations on other lines .sort((a, b) => a.dist - b.dist); // stations beyond the track's end all snap to the same endpoint; keep // only the closest one there so segments get the right from/to labels // and are never zero-length (lineOffset gives NaN coords on those) const deduped = []; for (const s of snapped) { const last = deduped[deduped.length - 1]; const EPSILON = 1e-6; if (last && s.dist - last.dist < EPSILON) { if (s.offset < last.offset) deduped[deduped.length - 1] = s; } else { deduped.push(s); } } const segments = []; for (let i = 0; i < deduped.length - 1; i++) { let segment = {}; try { segment = turf.lineSliceAlong( line, deduped[i].dist, deduped[i + 1].dist, { units: "kilometers" } ); segment.properties = { from: deduped[i].props.name, to: deduped[i + 1].props.name }; segments.push(segment); } catch (error) {} } return segments; }40:Tac1,julesTrackDiagram = { const bgColor = "hsl(46, 100%, 55%)"; const svg = d3 .create("svg") .attr("width", width) .attr("height", diagramHeight) .attr("viewBox", [0, 0, width, diagramHeight + 5]) .attr( "style", `background-color: ${bgColor}; max-width: 100%; height: auto; font: 14px sans-serif;` ); const margin = { top: 0, right: 50, bottom: 50, left: 20 }; const icStationWidth = 7; const icStationSymbol = svg .append("defs") .append("symbol") .attr("id", "ic-station-circle") .attr("height", 14) .attr("width", 14) .attr( "viewBox", `-${icStationWidth} -${icStationWidth} ${icStationWidth * 2} ${ icStationWidth * 2 }` ); icStationSymbol.append("circle").attr("fill", "black").attr("r", 7); icStationSymbol .append("text") .attr("fill", bgColor) .attr("dominant-baseline", "middle") .attr("dy", ".1em") .attr("dx", ".05em") .attr("font-size", 7) .attr("font-weight", "500") .attr("text-anchor", "middle") .text("IC"); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${diagramHeight / 2})`); if (showLayoutGrid) { g.call(layoutGrid, diagramStepsize); } g.append("g") .attr("class", "tracks") .selectAll("path.track") .data(condensed.chains) .join("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("d", (c) => { const points = [c.near, ...c.interior, c.far].map((d) => diagramProject(d, diagramStepsize) ); return linkPath(points); }); const node = g .append("g") .attr("class", "stations") .selectAll("g") .data(diagramLayout) .join("g") .attr("class", "station") .attr( "transform", ([name]) => `translate(${diagramProject(name, diagramStepsize)})` ); node .append("text") .attr("font-size", 10) .attr("stroke", bgColor) .attr("stroke-width", 1) .attr("paint-order", "stroke") .attr("font-weight", ([name]) => (isIcStation(name) ? 800 : 400)) .text(([name]) => name) .attr("transform", "translate(0 -10) rotate(-45)"); // node.append("circle").attr("r", 4); const icStations = node.filter(([name]) => isIcStation(name)); const sprinterStations = node.filter(([name]) => !isIcStation(name)); icStations .append("use") .attr("href", "#ic-station-circle") .attr("x", -icStationWidth) .attr("y", -icStationWidth); sprinterStations .append("line") .attr("stroke", "black") .attr("y1", 0) .attr("y2", -6) .attr("x1", 0) .attr("x2", 0) .attr("stroke-width", 2.5); return svg.node(); }41:T4fe,### Service Network Now for the services. Note that IC36 runs in "reverse" for a stretch, this is inevitable if we choose to show the graph cycle. I've included this line even though it doesn't pass through Rotterdam Centraal, because it's the one serving the smaller stations in Zeeland—stations that appear in the original diagram, so leaving it out would orphan them. This is one those puzzling choices in the original diagram. By this logic, the stations between Breda-Tilburg-Eindhoven should also be shown but they are not. I chose to be consistent with this and also display stations that are passed but not serviced by any of the service lines. Unlike the original, I don't mark Intercity stations or Sprinter hubs. The Intercity label feels a bit arbitrary to me. IC36 is nominally an intercity service, yet from Rilland-Bath onward it stops at every station in Zeeland, places that are decidedly not cities. Meanwhile, the bigger stations in Zeeland where IC21 line stops (Goes, Middelburg) are not marked as Intercity stations in the original. Also some stations like Rotterdam Blaak don't have the Intercity label but some intercity trains do stop there. I rather not get into this fray. I think the service lines with their stop circles do a good enough job. 42:T72e,julesServicesDiagram = { const height = diagramHeight + 30; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: sans-serif;"); const g = svg.append("g").attr("transform", `translate(10, ${height / 2})`); if (showLayoutGrid) { g.call(layoutGrid, diagramStepsize); } const lanes = g .append("g") .attr("class", "lanes") .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .selectAll("path") .data(diagramLanes) .join("path") .attr("stroke", (d) => colorScale(d.id)) .attr("d", (d) => linkPath(d.points)); const stops = g .append("g") .attr("class", "stops") .attr("stroke", "ghostwhite") .attr("stroke-width", 1) .selectAll("g") .data(diagramLanes) .join("g") .attr("fill", (d) => colorScale(d.id)) .selectAll("circle") .data((lane) => lane.stops.map((i) => lane.points[i])) // .data((lane) => lane.stops) .join("circle") .attr("cx", ([x]) => x) .attr("cy", ([, y]) => y) .attr("r", 2.2); const stations = g .append("g") .attr("class", "stations") .attr("font-size", 9) .attr("stroke", "white") .attr("stroke-width", 2) .attr("paint-order", "stroke") .selectAll("text") .data(diagramLayout) .join("text") .attr("fill", ([name]) => (stopsAnywhere.has(name) ? "black" : "#aaa")) .text(([name]) => name) .attr("transform", ([name]) => { const [x, y] = diagramProject(name, diagramStepsize); const bandTop = stationBandTop.get(name) ?? y; const clearance = Math.min(bandTop - y, 0) - 6; return `translate(${x} ${y + clearance}) rotate(-45)`; }); return svg.node(); }43:T5c5,layoutGrid = (g, diagramStepsize) => { const gridId = DOM.uid("grid"); const layoutValues = [...diagramLayout.values()]; const ys = layoutValues.map((p) => p.y); const [yMin, yMax] = d3.extent(ys); const levels = [...new Set(ys)].sort(d3.ascending); const xs = layoutValues.map((p) => p.x); const [xMin, xMax] = d3.extent(xs); const columnTop = yMin * diagramStepsize.y; const columnBottom = yMax * diagramStepsize.y; const column = g .append("g") .attr("class", "columns") .selectAll("g") .data(d3.range(0, xMax + 1)) .join("g") .attr("transform", (i) => `translate(${i * diagramStepsize.x}, 0)`); column .append("line") .attr("y1", columnTop) .attr("y2", columnBottom) .attr("stroke", "#8c8c8c"); column .append("text") .attr("y", columnBottom + 12) .attr("text-anchor", "middle") .attr("font-size", 8) .attr("fill", "#5c5c5c") .text((i) => i); const level = g .append("g") .attr("class", "levels") .selectAll("g") .data(levels) .join("g") .attr("transform", (l) => `translate(0, ${l * diagramStepsize.y})`); level .append("line") .attr("x1", -10) .attr("x2", innerWidth + 10) .attr("stroke", "#8c8c8c") .attr("stroke-dasharray", "4 4"); level .append("text") .attr("x", -14) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", 9) .attr("fill", "#5c5c5c") .text((l) => `y ${l}`); }44:T547,condense = (neighbors, root) => { const isSkeleton = (name) => name === root || neighbors.get(name).size !== 2; const edgeKey = (a, b) => [a, b].sort().join("|"); const used = new Set(); const chains = []; const rank = new Map([[root, 0]]); // nr of hops to root node + seen-set + dequeue priority const queue = [root]; while (queue.length) { queue.sort((a, b) => rank.get(a) - rank.get(b)); const near = queue.pop(); for (const first of neighbors.get(near)) { if (used.has(edgeKey(near, first))) { continue; } used.add(edgeKey(near, first)); const interior = []; let prev = near; let current = first; while (!isSkeleton(current)) { interior.push(current); const [a, b] = neighbors.get(current); const next = a === prev ? b : a; used.add(edgeKey(current, next)); prev = current; current = next; } chains.push({ near, far: current, interior }); if (!rank.has(current)) { queue.push(current); } const candidate = rank.get(near) + interior.length + 1; const currentRank = rank.get(current) ?? -Infinity; rank.set(current, Math.max(currentRank, candidate)); // for junctions Math.max keeps the longer of the two path lengths } } return { root, chains, rank }; }45:T127a,layoutChains = ({ root, chains, rank }, opinions, diagonalPad = 1) => { const sideOf = (chain) => { const opinion = opinions.find((o) => chain.interior.includes(o.via)); return opinion?.side ?? 1; }; // Shortest route out of a junction goes first, so it stays flat and the // long way around gets bumped. Sorting by the near junction's rank keeps // every chain's near placed before the chain itself is processed. const ordered = d3.sort( chains, (chain) => rank.get(chain.near), (chain) => chain.interior.length ); // pass A — levels. A chain tentatively runs at its junction's level; if // that spot is occupied over its span, it gets bumped to a free level. // Every chain claims a rectangle of levels over its horizontal span. const level = new Map([[root, 0]]); const chainLevel = new Map(); // only bumped chains get an entry const claims = []; // { lo, hi, start, end } for (const chain of ordered) { const start = rank.get(chain.near); const end = rank.get(chain.far); const isTaken = (candidate) => claims.some( (claim) => claim.lo <= candidate && candidate <= claim.hi && start < claim.end && claim.start < end ); const inherited = level.get(chain.near); let assigned = inherited; if (isTaken(inherited)) { // A loop must be lifted high enough that the chain closing it has a // whole level for each station on the way back down. const closing = chains.filter( (other) => other.near === chain.far && level.has(other.far) ); const lift = 1 + Math.max(0, ...closing.map((c) => c.interior.length)); const side = sideOf(chain); let distance = lift; while (isTaken(inherited + side * distance)) distance++; assigned = inherited + side * distance; chainLevel.set(chain, assigned); } // A flat chain claims its own level. An unbumped chain heading to an // already-placed junction on a different level slopes: it claims the // levels strictly between its two ends instead. const farLevel = level.get(chain.far); const slopes = !chainLevel.has(chain) && farLevel !== undefined && farLevel !== assigned; if (slopes) { claims.push({ lo: Math.min(assigned, farLevel) + 1, hi: Math.max(assigned, farLevel) - 1, start, end }); } else { claims.push({ lo: assigned, hi: assigned, start, end }); } // the junction at the far end takes the suggestion closest to the middle const existing = level.get(chain.far); if (existing === undefined || Math.abs(assigned) < Math.abs(existing)) { level.set(chain.far, assigned); } } const levelOf = (chain) => chainLevel.get(chain); // A bumped chain runs flat at its own level. Where that level differs // from the junction it meets, it needs a diagonal ramp to get there. const rampsAt = (chain, junction) => { const own = levelOf(chain); return own !== undefined && own !== level.get(junction); }; const rampNear = (chain) => rampsAt(chain, chain.near); const rampFar = (chain) => rampsAt(chain, chain.far); const width = (chain) => { const segments = chain.interior.length + 1; let diagonals; if (levelOf(chain) !== undefined) { // flat at its own level; only the ramps at the ends are diagonal diagonals = (rampNear(chain) ? 1 : 0) + (rampFar(chain) ? 1 : 0); } else if (level.get(chain.near) === level.get(chain.far)) { diagonals = 0; // flat all the way } else { diagonals = segments; // diagonal all the way } return segments + diagonals * diagonalPad; }; const x = new Map([[root, 0]]); for (const chain of ordered) { x.set( chain.far, Math.max(x.get(chain.far) ?? -Infinity, x.get(chain.near) + width(chain)) ); } const pos = new Map(); for (const [name, junctionLevel] of level) { pos.set(name, { x: x.get(name), y: junctionLevel }); } for (const chain of ordered) { const startX = x.get(chain.near) + (rampNear(chain) ? diagonalPad : 0); const endX = x.get(chain.far) - (rampFar(chain) ? diagonalPad : 0); const own = levelOf(chain); const startLevel = level.get(chain.near); const endLevel = level.get(chain.far); chain.interior.forEach((name, i) => { const t = (i + 1) / (chain.interior.length + 1); let y; if (own !== undefined) { y = own; // bumped chains run flat at their own level } else { y = startLevel + t * (endLevel - startLevel); } pos.set(name, { x: startX + t * (endX - startX), y }); }); } return pos; }46:T4fc,diagramLanes = { const laneGap = 8; const slot = (id) => laneOrder.findIndex((row) => row.includes(id)) - (laneOrder.length - 1) / 2; return railGraph.servicePaths.map((path) => { const dy = slot(path.id) * laneGap; const points = path.nodes.map((name) => { const [x, y] = diagramProject(name, diagramStepsize); return [x, y + dy]; }); const stopSet = new Set(services.find((s) => s.id === path.id).stations); const stops = path.nodes.flatMap((n, i) => (stopSet.has(n) ? [i] : [])); return { id: path.id, points, stops, stations: path.nodes }; }); } // diagramLanes = { // const laneGap = 8; // const slot = (id) => // laneOrder.findIndex((row) => row.includes(id)) - (laneOrder.length - 1) / 2; // return railGraph.servicePaths.map((path) => { // const dy = slot(path.id) * laneGap; // const base = path.nodes.map(diagramProject).map(([x, y]) => ({ x, y })); // const points = offsetPolyline( // base, // base.slice(1).map(() => dy) // ); // const stopSet = new Set(services.find((s) => s.id === path.id).stations); // const stops = path.nodes.flatMap((n, i) => (stopSet.has(n) ? [i] : [])); // return { id: path.id, points, stops, stations: path.nodes }; // }); // }47:T99c,## Lessons learned > *Too bad! Same old story! Once you've finished building your ~~house~~ notebook you notice you've accidentally learned something that you really should have known — **before** you started.* > > — ~~Friedrich Nietzsche, *Beyond Good and Evil*~~ Jules Blom, *this notebook* **Spend more time getting the data into the right shape.** Mike Bostock writes in [10 Years of Open-Source Visualization](https://observablehq.com/@mbostock/10-years-of-open-source-visualization#5-in-most-cases-working-with-data-should-be-80-of-the-work-of-visualization-) that *"in most cases, working with data should be 80% of the work of visualization"*, and I found that to be almost painfully true for everything in this notebook (and every other data visualization problem I work on). Most of my time went into hammering the data into a shape fit for drawing. Once it's in the right shape, the visualization almost rolls out by itself. **Sketch on paper first and expect the sketches to be ugly.** Whenever I went straight to code, I'd painstakingly mold the data into a nice shape only to realize it wasn't the visualization I needed. The layout that ended up in this notebook I discoverd on paper. But not right away: I drew a lot of sketches and most of them were ugly. It was only after the ugly ones that I started seeing what could be improved. I've come to think of this as *the ugly work in the middle*. **I leaned on Claude Code.** I exported the notebook code and pointed Claude Code at it and transfered the good parts back to the notebook. I want to be upfront about that: I don't think I could have built these layout algorithms without it, at least not in the amount of time it took for this. It's not like I chuck in the problem in and it gave back the right layout algorithm in the first shot, far from it (See also [How effective are AI tools for writing D3 code?](https://observablehq.com/blog/ai-tools-llms-d3-code)). I am not very well versed in graph traversal algorithms, this helped me get unstuck. LLM's are great to get over the bumps where my side projects die. Finally, it's neat to think this whole notebook exists because I stared at a diagram at the train station too long and too often. It's fun and rewarding how this created a side project that led me to to learn more about d3-force, graph traversal and condensation, layered graph drawing, and the whole field of research into automated drawing of transit diagrams.48:[{"id":"051a21f8e041d444ce96952a72f3a1246b04f688d50d87e49a1c4151e713814ea232fbf9c8a1310ef7eb1d6dbc236b25b42ca8c472d3befb70e9af83261adb18","href":"https://static.observableusercontent.com/files/051a21f8e041d444ce96952a72f3a1246b04f688d50d87e49a1c4151e713814ea232fbf9c8a1310ef7eb1d6dbc236b25b42ca8c472d3befb70e9af83261adb18","name":"merged@6.geojson","type":"application/geo+json","lastModified":1785500325051.909,"size":26369},{"id":"68433b93f8c3316094f40ca754100f6b84e9a27797729472c08aa9d511d1f3299cf540cb1db7f35ee7ee5e9993cd2fcdf4b786e8c5a92425a32c5ad47ad4c991","href":"https://static.observableusercontent.com/files/68433b93f8c3316094f40ca754100f6b84e9a27797729472c08aa9d511d1f3299cf540cb1db7f35ee7ee5e9993cd2fcdf4b786e8c5a92425a32c5ad47ad4c991","name":"stations-1.geojson","type":"application/geo+json","lastModified":1785145492694.908,"size":15136},{"id":"d308b666af35cc77c9bcfc37d56602eaf75fae647aa1e9e957b452b5fa91c33383d043c891fc65a958af64fdc106e0b72de3e1a37caedbb25dcdf4bf91b6d316","href":"https://static.observableusercontent.com/files/d308b666af35cc77c9bcfc37d56602eaf75fae647aa1e9e957b452b5fa91c33383d043c891fc65a958af64fdc106e0b72de3e1a37caedbb25dcdf4bf91b6d316","name":"provincie_2026.geojson","type":"application/geo+json","lastModified":1782326622691.217,"size":26993}] 2f:{"title":"Better Line Diagrams","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":4205,"value":"Inputs.bind(Inputs.toggle({ label: \"Layout grid\" }), viewof showLayoutGrid)\n\n// viewof showLayoutGrid = Inputs.toggle({ label: \"Layout grid\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4119,"value":"julesTrackDiagram.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3869,"value":"servicesLegend.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3397,"value":"julesServicesDiagram.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3864,"value":"It was a nice lil' geographic/topological/graphical/graph traversal puzzle for me to spend too much time on and occasionally get frustrated by.","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"## Service Lines\n\nHere are all the relevant [service lines](https://nieuws.ns.nl/download/ab6e69e6-c2a2-4b3b-b1bb-5f4c96709b39/ontwerpwedstrijdlijnenkaartns-lijnen.pdf) separately. I include a couple (S59, S66, IC36) that don't pass Rotterdam Centraal but whose stations are shown in the diagram.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({ top: 90, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"## Geographic Map\n\nLet's look at the geographic service lines.","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"viewof checkboxes = Inputs.checkbox(services, {\n label: \"Service\",\n value: [services[0]],\n format: (d) => `${d.kind}${d.id}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2483,"value":"servicesLegend = Plot.legend({\n color: {\n type: \"categorical\",\n domain: services.map((d) => `${d.kind}${d.id}`)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2432,"value":"mapHeight = 440","pinned":false,"hidden":false,"mode":"ojs"},{"id":4252,"value":"diagramHeight = 280","pinned":true,"hidden":false,"mode":"ojs"},{"id":2469,"value":"inset = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":2236,"value":"nlStereoProjection = ({ width, height }) =>\n d3\n .geoStereographic()\n .rotate([-5.387639, -52.156161]) // Amersfoort RD origin\n .fitExtent(\n [\n [inset, inset],\n [width - inset, height - inset]\n ],\n rotterdamTracks\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"selected = {\n const checkboxesSet = new Set(checkboxes.map((d) => d.id));\n return services.filter((s) => checkboxesSet.has(s.id));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"selectedStations = new Set(selected.flatMap((d) => d.stations))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1623,"value":"And I have cleaned up the GeoJSON and labeled the different segments LineStrings to encode the network topology. I used a mishmash of tools in a not very reproducible manner, QGIS - mostly the vertex tool, some [Mapshaper](https://mapshaper.org/), some [geojson.io](https://geojson.io/), and some hand editing in a code editor. Anyway, let's look at segments.","pinned":false,"hidden":false,"mode":"md"},{"id":1625,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2169,"value":"Plot.legend({\n color: {\n type: \"categorical\",\n scheme: \"accent\",\n domain: rotterdamTracks.features.map((d) => d.properties.track)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2492,"value":"It's a [graph](https://en.wikipedia.org/wiki/Graph_(abstract_data_type) of course. It seems like 80% of all data visualization is displaying a graph or a tree.","pinned":false,"hidden":false,"mode":"md"},{"id":2061,"value":"reverseD = {\n const { reversePath, pathToString } = svgPathCommander.default;\n return (d) => pathToString(reversePath(d));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"## Transitmap-like Geographic Services Map\n\nWith some data wrangling and some help from Turf.js's [lineOffset](https://turfjs.org/docs/api/lineOffset), we can offset the service lines per track segment for a transit diagram type look, so we can see all the services in one glance. I [define the line order manually](#trackOrderOverrides). Not perfect, but not bad either. One could use this a starting point for making a polished static version in some vector editing software.","pinned":false,"hidden":false,"mode":"md"},{"id":1572,"value":"transitMapLikeView = transitMapLike","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"offsetDistance = 1350 // m","pinned":false,"hidden":false,"mode":"ojs"},{"id":4075,"value":"stationLabels = [...new Set(offsetServices.flatMap((s) => s.stations))].map(\n (name) => stationsMap.get(name)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"$35","pinned":true,"hidden":true,"mode":"ojs"},{"id":3953,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":1202,"value":"trackOrderOverrides = ({\n \"rotterdam-barendrecht\": [\"50\", \"21\", \"35\"],\n \"lagezwaluwe-barendrecht\": [\"50\", \"21\", \"66\", \"59\"],\n \"lagezwaluwe-breda\": [\"35\", \"66\"],\n \"breda-eindhoven\": [\"35\", \"36\", \"66\"],\n \"roosendaal-lagezwaluwe\": [\"21\", \"59\"],\n \"vlissingen-roosendaal\": [\"21\", \"36\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1563,"value":"terminii = {\n const terminii = offsetServices.map((s) => {\n const pts = s.offsetStationsGeo;\n\n return [pts[0], pts[pts.length - 1]].map((p) => ({\n type: \"Feature\",\n geometry: p.geometry,\n properties: { ...p.properties, label: s.id, serviceId: s.id }\n }));\n });\n\n return {\n ends: terminii.map((d) => d[1]),\n starts: terminii.map((d) => d[0])\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1200,"value":"trackServiceOrder = {\n const byId = new Map(servicesRaw.map((d) => [d.id, d]));\n\n const trackServiceOrder = new Map();\n\n for (const id of servicesRaw.map((d) => d.id)) {\n const service = byId.get(id);\n \n if (!service) {\n continue;\n }\n\n for (const track of service.tracks) {\n if (!trackServiceOrder.has(track)) {\n trackServiceOrder.set(track, []);\n }\n trackServiceOrder.get(track).push(id);\n }\n }\n\n for (const [track, order] of Object.entries(trackOrderOverrides)) {\n trackServiceOrder.set(track, order);\n }\n\n return trackServiceOrder;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1933,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":2558,"value":"// viewof resetSim = Inputs.button(\"Reset force simulation\", {\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"viewof layoutMode = Inputs.radio([\"force-only\", \"geographic\"], {\n value: \"force-only\",\n label: \"Layout\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"viewof linkDistance = Inputs.range([0, 100], {\n value: 15,\n step: 1,\n label: \"Link distance\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"viewof charge = Inputs.range([-500, 0], {\n value: -20,\n step: 5,\n label: \"Charge\"\n // disabled: !seedGeographic\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1909,"value":"viewof geoStrength = Inputs.range([0, 1], {\n value: 0.1,\n step: 0.005,\n label: \"Geo pull\",\n disabled: layoutMode !== \"geographic\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2916,"value":"viewof containInBounds = Inputs.toggle({\n label: \"Contain in bounds\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"viewof snapToGrid = Inputs.toggle({ label: \"Snap to grid\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2298,"value":"viewof gridStep = Inputs.range([5, 100], {\n label: \"Grid step\",\n step: 5,\n value: 20,\n disabled: !snapToGrid\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2637,"value":"servicesLegend.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3754,"value":"$3a","pinned":false,"hidden":false,"mode":"md"},{"id":2526,"value":"graphSettings = ({ gridStep: 20, snapToGrid: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2862,"value":"layoutUpdater = {\n graphChart.setLayout(layoutMode);\n return layoutMode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2535,"value":"configuredSim = {\n const { simulation } = graphChart;\n\n if (layoutMode === \"geographic\") {\n simulation\n .force(\"center\", null)\n .force(\"x\", d3.forceX((d) => d.gx).strength(geoStrength))\n .force(\"y\", d3.forceY((d) => d.gy).strength(geoStrength));\n } else {\n simulation\n .force(\"center\", d3.forceCenter(width / 2, mapHeight / 2).strength(1.5))\n .force(\"x\", null)\n .force(\"y\", null);\n }\n return simulation.alpha(1).restart();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2528,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":2228,"value":"// extracted to avoid resetting force sim in graph cell\nsimUpdater = {\n const simulation = configuredSim;\n\n simulation.force(\"charge\").strength(charge);\n\n simulation\n .force(\"link\")\n .distance((d) =>\n layoutMode === \"geographic\" &&\n d.target.id === \"Barendrecht\" &&\n d.source.id === \"Lage Zwaluwe\"\n ? linkDistance * 5\n : linkDistance\n );\n\n simulation.force(\"x\")?.strength(geoStrength);\n simulation.force(\"y\")?.strength(geoStrength);\n\n simulation.alpha(0.5).restart();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2253,"value":"links = railGraph.links.map((d) => ({ ...d }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2711,"value":"laneGap = 4;","pinned":true,"hidden":false,"mode":"ojs"},{"id":3917,"value":"nodeById = new Map(nodes.map((d) => [d.id, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2839,"value":"forceGraphLanes = {\n const nodeById = new Map(nodes.map((d) => [d.id, d]));\n\n return railGraph.servicePaths.map((path) => {\n const service = services.find((s) => s.id === path.id);\n\n return {\n id: path.id,\n points: path.nodes.map((name) => nodeById.get(name)),\n offsets: path.segments.map(({ track, flip }) => {\n const order = trackServiceOrder.get(track) ?? [path.id];\n\n return (\n (order.indexOf(path.id) - (order.length - 1) / 2) *\n laneGap *\n (flip ? -1 : 1)\n );\n }),\n // vertex indices where the service actually stops\n stops: path.nodes.flatMap((name, i) =>\n service.stations.includes(name) ? [i] : []\n )\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2877,"value":"forceGraphStopDots = forceGraphLanes.flatMap((lane) =>\n lane.stops.map((i) => ({ lane, i }))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2220,"value":"nodes = {\n const nodes = railGraph.nodes.map((d) => ({ ...d }));\n\n // seed projected geographic positions\n const projection = nlStereoProjection({ width, height: mapHeight });\n\n for (const n of nodes) {\n [n.gx, n.gy] = projection(stationsMap.get(n.id).geometry.coordinates);\n }\n\n return nodes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1836,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":2797,"value":"// breadth-first traversal\nfunction shortestPath(adjacency, from, to) {\n const cameFrom = new Map([[from, null]]);\n const queue = [from];\n\n while (queue.length) {\n const current = queue.shift();\n\n if (current === to) {\n break;\n }\n\n for (const { next, link } of adjacency.get(current) ?? []) {\n if (!cameFrom.has(next)) {\n cameFrom.set(next, { prev: current, link });\n queue.push(next);\n }\n }\n }\n\n if (!cameFrom.has(to)) {\n return [];\n }\n\n const steps = [];\n\n for (\n let n = to, step = cameFrom.get(n);\n step;\n n = step.prev, step = cameFrom.get(n)\n ) {\n steps.push({ node: n, link: step.link });\n }\n\n return steps.reverse();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2831,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1119,"value":"trackOccurence = {\n const trackOccurence = new Map();\n\n for (const service of servicesRaw) {\n for (const track of service.tracks) {\n const occ = trackOccurence.get(track) ?? 0;\n\n trackOccurence.set(track, occ + 1);\n }\n }\n\n return trackOccurence;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1158,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"trackToIndexMap = new Map(\n rotterdamTracks.features.map((d, i) => [d.properties.track, i])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"services = servicesRaw\n // add geoJSON station points\n .map((d) => {\n const tracksGeo = d.tracks.map((name) => {\n return rotterdamTracks.features[trackToIndexMap.get(name)];\n });\n\n return {\n ...d,\n tracksGeo,\n stationsGeo: d.stations.map((d) => stationsMap.get(d))\n };\n })\n // add geoJSON lines between stations\n .map((service) => {\n const segmentsFeatures = service.tracksGeo.flatMap((f) => {\n return segmentsBetweenStations(f, service.stationsGeo).map((segment) => {\n segment.properties.track = f.properties.track;\n return segment;\n });\n });\n\n const segments = turf.featureCollection(segmentsFeatures);\n\n return { ...service, segments };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs"},{"id":3110,"value":"## My Diagram Design\n\nThe idea is to have one vertical slot per track branch. Every branch runs flat in its own row, so no two lines ever share one.\n\nI define a main branch, IC35 to Eindhoven Centraal and set it as baseline at `y = 0`. Everything else splits off above or below into the\nnearest free slot, and rejoins the line it came from if it loops back. ","pinned":false,"hidden":false,"mode":"md"},{"id":3682,"value":"viewof showLayoutGrid = Inputs.toggle({ label: \"Layout grid\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3435,"value":"### Rail Network","pinned":false,"hidden":false,"mode":"md"},{"id":3726,"value":"opinions = [{ via: \"Dordrecht\", side: -1 }]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4283,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3402,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":4196,"value":"One thing I am still not so sure is how to distribute stations of the shorter branch in a cycle. Now I put space it evenly, so here the Breda-Prinsenbeek station lands in the middle. I considered placing it the x hop back too, so Breda Prinsenbeek would land at the same x positon as Krabbendijke.","pinned":false,"hidden":false,"mode":"md"},{"id":3433,"value":"$41","pinned":false,"hidden":false,"mode":"md"},{"id":3330,"value":"servicesLegend.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3160,"value":"$42","pinned":true,"hidden":false,"mode":"ojs"},{"id":4013,"value":"$43","pinned":true,"hidden":false,"mode":"ojs"},{"id":3319,"value":"laneOrder = [[\"50\", \"59\", \"36\"], [\"66\"], [\"35\"]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4057,"value":"stopsAnywhere = new Set(services.flatMap((s) => s.stations))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3660,"value":"The layout decisions happen at the *junctions*: stations where the track branches, plus the dead ends. Only those need actual placing. The interior stations are spaced between them.\n\nThe other stations with two neighbors just sit on the line between them, track in on one side, out on the other. \n\nTo get to my layout, the graph has to be 'condensed' to just those junctions.\nEverything between two junctions becomes a `chain` containing `{ near, far, interior }`.\n`near` is the station name where it entered, `far` is the station name where it comes out, and `interior` are the two-neighbor stations in between.\n\nThe walk is: from each junction, follow every edge through the two-neighbor stations until you hit the next junction, marking edges as used so nothing gets walked twice.","pinned":false,"hidden":false,"mode":"md"},{"id":3584,"value":"condensed = condense(neighbors, \"Rotterdam Centraal\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3579,"value":"$44","pinned":true,"hidden":false,"mode":"ojs"},{"id":3678,"value":"diagramStepsize = ({\n x: 39,\n y: 65\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3705,"value":"Note that junctions are processed farthest-from-the-root first (the `sort` + `pop`).\n\nThis is to discover cycles. In our case, the branch to Zevenbergen/Oudenbosch/Roosendaal branches to Etten-Leur which rejoins the main branch at Breda.","pinned":false,"hidden":false,"mode":"md"},{"id":3673,"value":"The second step is deriving the layout of the condensed graph.","pinned":false,"hidden":false,"mode":"md"},{"id":3582,"value":"$45","pinned":true,"hidden":false,"mode":"ojs"},{"id":3991,"value":"`layoutChains` lays out the condensed graph in three passes: one to decide levels (y), one to decide columns (x), one to place the interior stations. Cycles in the network are the whole difficulty.\n\nLevels are decided greedily in rank space. Each chain inherits its junction's level where possible; when it would overlap a region already claimed, it gets bumped. Chains are processed shortest-route-first, so at every junction the short chain stays flat and the long chain around does the dodging. The only remaining 'design input' is which direction a chain dodges, to resemble north or south somewhat.\n\nOnce levels are fixed, each chain's width is computed (diagonal sections cost extra horizontal space) and x coordinates propagate through a longest-path pass, so parallel routes rejoin at the same column. Finally, junctions are placed directly and interior stations are interpolated along their chains.","pinned":false,"hidden":false,"mode":"md"},{"id":3586,"value":"diagramLayout = layoutChains(condensed, opinions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3379,"value":"// [name, px]\nstationBandTop = d3.rollup(\n diagramLanes.flatMap((lane) =>\n lane.stations.map((name, i) => ({ name, y: lane.points[i][1] }))\n ),\n (entries) => d3.min(entries, (d) => d.y),\n (d) => d.name\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3237,"value":"diagramProject = (name, stepSize) => {\n const p = diagramLayout.get(name);\n\n return [p.x * stepSize.x, p.y * stepSize.y];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3234,"value":"$46","pinned":true,"hidden":false,"mode":"ojs"},{"id":3289,"value":"function linkPath(points, { inset = 10, r = 4 } = {}) {\n const firstPoint = points[0];\n let d = `M ${firstPoint[0]} ${firstPoint[1]}`;\n\n for (let i = 1; i < points.length; i++) {\n const [x0, y0] = points[i - 1];\n const [x1, y1] = points[i];\n\n if (Math.abs(y1 - y0) < 0.5) {\n d += ` H ${x1}`;\n continue;\n }\n\n const sx = Math.sign(x1 - x0); // horizontal travel direction\n const sy = Math.sign(y1 - y0); // climb or descend\n const k = r / 2;\n const ax = x0 + sx * inset;\n const bx = x1 - sx * inset;\n\n d += [\n ` L ${ax - sx * r} ${y0}`,\n ` Q ${ax} ${y0} ${ax + sx * k} ${y0 + sy * k}`,\n ` L ${bx - sx * k} ${y1 - sy * k}`,\n ` Q ${bx} ${y1} ${bx + sx * r} ${y1}`,\n ` H ${x1}`\n ].join(\"\");\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3133,"value":"neighbors = {\n const neighbors = new Map();\n \n for (const { source, target } of railGraph.links) {\n if (!neighbors.has(source)) {\n neighbors.set(source, new Set());\n }\n\n if (!neighbors.has(target)) {\n neighbors.set(target, new Set());\n }\n\n neighbors.get(source).add(target);\n neighbors.get(target).add(source);\n }\n\n return neighbors;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3112,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4293,"value":"width = 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"colorScale = d3\n .scaleOrdinal(d3.schemeObservable10)\n .domain(services.map((d) => d.id))","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"icStations = new Set([\n \"Rotterdam Centraal\",\n \"Breda\",\n \"Tilburg\",\n \"Dordrecht\",\n \"Eindhoven Centraal\",\n \"Den Haag Centraal\",\n \"Roosendaal\",\n \"Vlissingen\",\n \"Middelburg\",\n \"Bergen op Zoom\",\n \"Goes\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4230,"value":"isIcStation = (name) => icStations.has(name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"stations = FileAttachment(\"stations-1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"stationsMap = new Map(stations.features.map((d) => [d.properties.name, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"rotterdamTracks = FileAttachment(\"merged@6.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"nlProvincies = FileAttachment(\"provincie_2026.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"turf = require(\"@turf/turf@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2013,"value":"d3 = require(\"d3@7\", \"d3-force-grid\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2784,"value":"forceBoundary = require(\"d3-force-boundary\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2057,"value":"svgPathCommander = import(\"https://esm.sh/svg-path-commander\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2407,"value":"import { rotterdamChart } from \"@julesblm/ns-line-diagrams\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":694,"value":"$47","pinned":false,"hidden":false,"mode":"md"},{"id":2198,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W48","stdlib":"1","titling":"auto"}