2b:null 2c:["$","title",null,{"children":"NS Line Diagrams | Jules Blom | Observable"}] 31:Taed,# NS Line Diagrams NS = Nationale Spoorwegen = Dutch National Railways

A photo of transit map rotated with the coast up at a tramstrop in the Hague — An NS line diagram in the wild

Often while waiting on the train, I pace around the platform and inevitably start staring at the diagrams in the Reisinformatieborden. Like almost any diagram I see, I start wondering *"Could I recreate it using D3?"*. I am deeply D3-brained and fiddling around with D3 and SVG syntax is strangely meditative for me. I could. ${rotterdamChart.cloneNode(true)} What I appreciate about this diagram, and the whole reisinformatiebord really, is that it is very information-dense without becoming too cluttered. I find this line diagram especially neat. It gives an overview at a glance where you can go in a certain direction from this point. This one shows the eastbound lines from Rotterdam centraal. I'm not sure if there's a name for this specific diagram. It looks a bit like a tidy tree but the horizontal placement of stations is unusual. They are never placed at the same position, the x position is always increasing. I'm guessing that this was just easier. Another oddity is that stations can appear multiple times, in different lines. That led to issues in my earlier attempts to [stratify](https://d3js.org/d3-hierarchy/stratify) the stations into a hierarchy. ## Retiring the Reisinformatiebord Obviously these aren't the main source of travel info in 2026. But I really like that they give an overview — a sense of the network's layout at a glance, which is something the planner apps don't offer. While looking for more info on this diagram, I ran into a news item from all the way back in 2013 announcing that NS would start retiring the reisinformatieborden. Most of the signs were to be removed, leaving just one per station. Then I found another news item, from 2015, saying NS would really retire them this time. From my own experience, the reisinformatieborden are still around in 2026. Not many — about one per platform I'd guess, but enough that I can keep staring at them. ## Links * [Historiek.net: Gele borden NS straks geschiedenis [Yellow NS boards soon to be history] (2013)](https://historiek.net/gele-borden-ns-straks-geschiedenis/39137/) * [Omroep Brabant: Bijna niemand kijkt meer op gele vertrekborden op treinstations: NS gaat aantal borden verminderen [Almost no one looks at the yellow departure boards at train stations anymore: NS plans to reduce the number of boards] (2015)](https://www.omroepbrabant.nl/nieuws/2221406/bijna-niemand-kijkt-meer-op-gele-vertrekborden-op-treinstations-ns-gaat-aantal-borden-verminderen)32:T561,networkRotterdamToAmsterdam = ({ stations: [ "Rotterdam Centraal", "Schiedam Centrum", "Delft Campus", "Delft", "Rijswijk", "Den Haag Moerwijk", "Den Haag HS" ], branches: [ { stations: ["Den Haag Centraal"] }, { stations: ["Den Haag Laan v NOI", "Leiden Centraal"], branches: [ { stations: [ "Schiphol Airport", "Amsterdam Zuid", "Amsterdam Bijlmer ArenA", "Utrecht Centraal" ], branches: [ { stations: [ "Veenendaal-De Klomp", "Ede-Wageningen", "Arnhem Centraal" ], // branches: [ // { stations: ["Jules Centraal", "Cool"] }, // { stations: ["Eva"] } // ] }, { stations: [ "'s-Hertogenbosch", "Eindhoven Centraal", "Helmond", "Deurne", "Horst-Sevenum", "Blerick", "Venlo" ] } ] }, { stations: [ "Heemstede-Aerdenhout", "Haarlem", "Amsterdam Sloterdijk", "Amsterdam Centraal" ] } ] } ] })33:T7fd,chart = (nsTree) => { const bgColor = "hsl(46, 100%, 55%)"; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("background", bgColor) .attr( "style", `background-color: ${bgColor}; max-width: 100%; height: auto; font: 14px sans-serif;` ); // svg.append("defs") const diagram = svg .append("g") .attr("transform", `translate(${margin.left}, ${height / 2 + margin.top})`); const link = diagram .append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .selectAll() .data(nsTree.links()) .join("path") .attr("d", drawLink); const node = diagram .append("g") .selectAll() .data(nsTree.descendants()) .join("g") .attr("transform", (d) => `translate(${d.x},${d.y})`); const icStations = node.filter((d) => isIcStation(d.data.name)); const circleStations = node.filter((d) => isCircleStation(d.data.name)); const sprinterStations = node.filter( (d) => !isIcStation(d.data.name) && !isCircleStation(d.data.name) ); icStations.append("circle").attr("fill", "black").attr("r", 8); icStations .append("text") .attr("fill", bgColor) .attr("dominant-baseline", "middle") .attr("dy", ".1em") .attr("dx", ".05em") .attr("font-size", 9) .attr("font-weight", "500") .attr("text-anchor", "middle") .text("IC"); circleStations .append("circle") .attr("r", 5) .attr("fill", bgColor) .attr("stroke", "black") .attr("stroke-width", 2.5); sprinterStations .append("line") .attr("stroke", "black") .attr("y1", 0) .attr("y2", -6) .attr("x1", 0) .attr("x2", 0) .attr("stroke-width", 2.5); node .append("text") .attr("font-weight", (d) => isIcStation(d.data.name) || isCircleStation(d.data.name) ? "600" : "400" ) .attr("transform", "translate(0 -15) rotate(-45)") .text((d, i) => d.data.name); return svg.node(); }34:[{"id":"69cf3ef2883d630812a89946c2e19d49a850fc92d1609eeb239313b32992878e57bc36b8b99a7bbe247901987dac9823e023fe4db0000a1b221356c97e3d4fbc","href":"https://static.observableusercontent.com/files/69cf3ef2883d630812a89946c2e19d49a850fc92d1609eeb239313b32992878e57bc36b8b99a7bbe247901987dac9823e023fe4db0000a1b221356c97e3d4fbc","name":"stations.geojson","type":"application/geo+json","lastModified":1781594471276.361,"size":5465},{"id":"e0c2839baa4ea8b665262bc9521e4725d9246d7e3f0ea19aa1fe923cfb44528220e382d844704a9ded850baed6f160cecd44eec029c1e080db85a52c78cfa4dd","href":"https://static.observableusercontent.com/files/e0c2839baa4ea8b665262bc9521e4725d9246d7e3f0ea19aa1fe923cfb44528220e382d844704a9ded850baed6f160cecd44eec029c1e080db85a52c78cfa4dd","name":"spoor-rotterdam-lines.geojson","type":"application/geo+json","lastModified":1781537056732.849,"size":24375},{"id":"d308b666af35cc77c9bcfc37d56602eaf75fae647aa1e9e957b452b5fa91c33383d043c891fc65a958af64fdc106e0b72de3e1a37caedbb25dcdf4bf91b6d316","href":"https://static.observableusercontent.com/files/d308b666af35cc77c9bcfc37d56602eaf75fae647aa1e9e957b452b5fa91c33383d043c891fc65a958af64fdc106e0b72de3e1a37caedbb25dcdf4bf91b6d316","name":"provincie_2026.geojson","type":"application/geo+json","lastModified":1781602512265.155,"size":26993},{"id":"2012c7b2d01e0b065a9d1f375cf1a3d168dc3c4b7686d7c45ad8c7e2eee737dcc60cd853d39a852cb0088345f8bec91462513cc1bdf33c085c6ed67a0adc1cac","href":"https://static.observableusercontent.com/files/2012c7b2d01e0b065a9d1f375cf1a3d168dc3c4b7686d7c45ad8c7e2eee737dcc60cd853d39a852cb0088345f8bec91462513cc1bdf33c085c6ed67a0adc1cac","name":"stations (2).geojson","type":"application/geo+json","lastModified":1782051167927.319,"size":14248},{"id":"8f55a517fc646fd6361eec565ba2ced8e84240f5114c1414ab7424cb6be41e99dbaa8b64bf55a11e13bd1e932199fdf3a6b600eff9eebbe7d1ae927908905dbd","href":"https://static.observableusercontent.com/files/8f55a517fc646fd6361eec565ba2ced8e84240f5114c1414ab7424cb6be41e99dbaa8b64bf55a11e13bd1e932199fdf3a6b600eff9eebbe7d1ae927908905dbd","name":"C92BB3A2-BBD9-46D3-83B7-108099F5FAE3_1_105_c.jpeg","type":"image/jpeg","lastModified":1778198569273.262,"size":270371}] 2f:{"id":"5cfb82a0b5ad670b","slug":"ns-line-diagrams","title":"NS Line Diagrams","thumbnail":"9a482599e7e05aa67a307ad7fe632baee3bb9231f8487b1a1b2dc0d1849f1f8d","access_level":"public","create_time":"$D2026-04-17T21:08:43.745Z","update_time":"$D2026-08-08T18:03:12.163Z","view_time":null,"first_public_time":"$D2026-06-11T15:55:58.433Z","fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":1988,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024","role":"editor"},{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"NS Line Diagrams","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1402,"value":"### Rotterdam Centraal / Eindhoven Centraal / Roosendaal / Vlissingen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"rotterdamChart = chart(rotterdamNsTree)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1943,"value":"And the geographic version.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1460,"value":"Plot.plot({\n projection: {\n type: \"azimuthal-equidistant\",\n domain: rotterdamLines,\n inset: 50\n },\n width,\n marks: [\n Plot.geo(nlProvincies, { stroke: \"slategray\" }),\n Plot.geo(rotterdamLines, { strokeWidth: 2 }),\n Plot.geo(\n rotterdamLineStations.features.filter(\n (d) => !icStations.has(d.properties.name)\n ),\n {\n fill: \"black\",\n r: 3,\n shapeRendering: \"line\"\n }\n ),\n Plot.geo(\n rotterdamLineStations.features.filter((d) =>\n icStations.has(d.properties.name)\n ),\n {\n fill: \"black\",\n r: 6\n }\n ),\n Plot.text(\n rotterdamLineStations.features,\n Plot.centroid({\n text: (d) => d.properties.name,\n fill: \"black\",\n stroke: \"white\",\n strokeWidth: 3,\n paintOrder: \"stroke\", // white halo so labels stay readable over the map\n dy: -8, // nudge above the dot\n fontSize: 10,\n textAnchor: \"middle\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1957,"value":"Thinking about this particular diagram for too long, I started seeing flaws in it.\nPrimarily, it fails to show what train line stops where.\n\n* Why is Breda-Prinsenbeek shown on the line to Eindhoven? The train doesn't stop there. It's the only sprinter station shown on it.\n* Why show all Rotterdam Sprinter stations on all lines?\n* The line to Breda/Tilburg/Eindhoven goes over HSL Zuid line and bypasses Dordrecht (since 2014), should that be shown?\n* There is no train line that goes from Rotterdam to Breda Prinsenbeek, Breda, Roosendaal. The train would have to switch direction. What does this branch intend to show? Is is just wrong?\n\n

\n See my follow-up notebook [NS Line Diagrams Revisited](/@julesblm/ns-line-diagrams-revisited) in which I make an improved diagram that fixes all of these issues.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1422,"value":"### Rotterdam Centraal / Den Haag Centraal / Arnhem Centraal / Venlo / Amsterdam Centraal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"chart(rdamAdamNsTree)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1404,"value":"### Amersfoort / Schiphol / Enkhuizen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1081,"value":"chart(amsersfoortNsTree)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1406,"value":"### Utrecht Centraal / Schiphol / Den Helder / Schiphol","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"chart(utrechtDenHelderNsTree)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1961,"value":"This one is funny because Schiphol (airport) is a long branch for a lone station.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1312,"value":"## Process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1318,"value":"### 1. Data Model\n\nI defined a data model to define the lines `network` and branches based off the last station. Took me a couple of attempts to find something that fit well.\n\nIt can be expressed as a recursive TypeScript type:\n\n```typescript\ntype Segment = {\n station: Array;\n branches: Array // recursive you see!\n}\n```\n\nHeres the data for the diagram in the photo above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":331,"value":"networkRotterdam = ({\n stations: [\n \"Rotterdam Centraal\",\n \"Rotterdam Blaak\",\n \"Rotterdam Zuid\",\n \"Rotterdam Lombardijen\"\n ],\n branches: [\n {\n stations: [\"Breda-Prinsenbeek\", \"Breda\", \"Tilburg\", \"Eindhoven Centraal\"]\n },\n {\n stations: [\n \"Barendrecht\",\n \"Zwijndrecht\",\n \"Dordrecht\",\n \"Dordrecht Zuid\",\n \"Lage Zwaluwe\"\n ],\n branches: [\n { stations: [\"Breda-Prinsenbeek\", \"Breda\", \"Roosendaal\"] },\n {\n stations: [\n \"Zevenbergen\",\n \"Oudenbosch\",\n \"Roosendaal\",\n \"Bergen op Zoom\",\n \"Rilland-Bath\",\n \"Krabbendijke\",\n \"Kruiningen-Yerseke\",\n \"Kappele-Biezelinge\",\n \"Goes\",\n \"Arnemuiden\",\n \"Middelburg\",\n \"Vlissingen Souburg\",\n \"Vlissingen\"\n ]\n }\n ]\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1333,"value":"Here are a couple more","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"networkAmersfoort = ({\n stations: [\n \"Amersfoort\",\n \"Baarn\",\n \"Hilversum\",\n \"Hilversum Noor\",\n \"Bussum Zuid\",\n \"Naarden-Bussum\",\n \"Weesp\"\n ],\n branches: [\n { stations: [\"Duivendrecht\", \"Amsterdam Zuid\", \"Schiphol\"] },\n {\n stations: [\n \"Diemen\",\n \"Amsterdam Muiderpoort\",\n \"Amsterdam Centraal\",\n \"Amsterdam Sloterdijk\",\n \"Hoorn\",\n \"Hoorn Kersenboogerd\",\n \"Hoogkarspel\",\n \"Bovenkarspel-Grootebroek\",\n \"Bovenkarspel Flora\",\n \"Enkhuizen\"\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1256,"value":"networkUtrechtDenHelder = ({\n stations: [\n \"Utrecht Centraal\",\n \"Utrecht Zuilen\",\n \"Maarssen\",\n \"Breukelen\",\n \"Abcoude\",\n \"Amsterdam Holendrecht\",\n \"A'dam Bijlmer ArenA\"\n ],\n branches: [\n { stations: [\"Amsterdam Zuid\", \"Schiphol\"] },\n {\n stations: [\n \"Duivendrecht\",\n \"Amsterdam Amstel\",\n \"Amsterdam Muiderpoort\",\n \"Amsterdam Centraal\",\n \"Amsterdam Sloterdijk\"\n ],\n branches: [\n {\n stations: [\n \"Zaandam\",\n \"Koog Bloemwijk\",\n \"Koog-Zaandijk\",\n \"Wormerveer\",\n \"Krommenie-Assendelft\",\n \"Uitgeest\",\n \"Castricum\",\n \"Heiloo\",\n \"Alkmaar\",\n \"Alkmaar Noord\",\n \"Heerhugowaard\",\n \"Schagen\",\n \"Anna Paulowna\",\n \"Den Helder Zuid\",\n \"Den Helder\"\n ]\n },\n { stations: [\"Schiphol\"] }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"utrechtDenHelderNsTree = nsTree().nodeSize([dx, dy])(\n d3.hierarchy(networkToHierarchy(networkUtrechtDenHelder))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"### 2. Convert to Hierarchy\n\nNext we convert our data model to a hierarchy.\n\n```js\nconst data = {\n name: \"Rotterdam Centraal\",\n children: [\n {\n name: \"Rotterdam Blaak\",\n children: [\n {\n name:\"Rotterdam Zuid\",\n children: [\n // ...and so on\n ]\n }\n ]\n },\n ]\n};\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1370,"value":"`listToHierarchy` converts an array like\n\n```js\n[\"A\",\"B\",\"C\"]\n```\n\nto a nested object like\n\n```js\n{ name: \"A\", children: [{ name: \"B\", children: [{ name: \"C\" }] }] }\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":390,"value":"function listToHierarchy(names, nr) {\n const root = { name: names[0], lineNr: nr };\n let lastNode = root;\n\n for (let i = 1; i < names.length; ++i) {\n const newNode = { name: names[i], lineNr: nr };\n lastNode.children = [newNode];\n lastNode = newNode;\n }\n\n return { root, lastNode };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1379,"value":"`listToHierarchy` only handles a single `Segment`, `networkToHierarchy` handles the branching. It chains the segment's own stations, and because each branch is itself a `Segment` of the same shape, it calls itself recursively on every branch and attaches the results as children of the run's last station.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":342,"value":"function networkToHierarchy(network, nr = 0) {\n const { root, lastNode } = listToHierarchy(network.stations, nr);\n\n if (network.branches) {\n lastNode.children = network.branches.map((branch, i) =>\n networkToHierarchy(branch, nr + 1 + i)\n );\n }\n\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"rdamAdamNsTree = nsTree().nodeSize([dx, dy])(\n d3.hierarchy(networkToHierarchy(networkRotterdamToAmsterdam))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"amsersfoortNsTree = nsTree().nodeSize([dx, dy])(\n d3.hierarchy(networkToHierarchy(networkAmersfoort))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1354,"value":"### 3. Hierarchy Layout\n\nThis is a custom hierarchy layout function, it traverses the hierarchy in [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order) with [`eachBefore`](https://d3js.org/d3-hierarchy/hierarchy#node_eachBefore) and defines `x` and `y` for each node. We keep track of where the lines split.\n\nIt's fairly simple, especially compared to the [code for the tidy tree layout](https://github.com/d3/d3-hierarchy/blob/main/src/tree.js). The tidy tree looks so intuitive, but the interaction of placement rules makes it surprisingly complex. A lot of iterative calculation has to be done to get to that pleasing layout.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":415,"value":"rotterdamNsTree = nsTree().nodeSize([dx, dy])(\n d3.hierarchy(networkToHierarchy(networkRotterdam))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":772,"value":"function nsTree() {\n let dx = 30;\n let dy = 20;\n let y0 = 0;\n let x0 = 0;\n\n function layout(root) {\n let latestX = x0;\n\n root.x = x0;\n root.y = y0;\n\n root.eachBefore((node) => {\n if (!node.parent) {\n return;\n }\n\n const isFork = node.parent && node.parent.children.length > 1;\n const isTop = isFork && node === node.parent.children[0];\n\n if (isFork && isTop) {\n latestX += dx * 2.5; // Forks are wider\n } else {\n latestX += dx;\n }\n\n node.y = isFork ? node.parent.y + (isTop ? -dy : dy) : node.parent.y;\n node.x = latestX;\n });\n return root;\n }\n\n layout.nodeSize = function (_) {\n return arguments.length ? ((dx = +_[0]), (dy = +_[1]), layout) : [dx, dy];\n };\n\n return layout;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"### Draw the Chart\n\nThe chart function takes the laid-out `nsTree` and renders it. It sets up an SVG with the NS-yellow background and a `g` translated so the trunk sits on the vertical centre. Then it renders the links and stations. Each station is styled by type — intercity stops get a filled black circle labelled \"IC\", 'circle stations' (~~unknown to me what this signifies~~ these mark a knooppunt stoptreinstation) and 'regular' sprinter train stations which get a short tick. Every station gets its name as a label rotated −45° above the point, bold for IC and circle stops.\n\nNS has [their own font, NS Sans, for print](https://www.stoerebinken.nl/werk/ns-fonts-management/), which they don't publicize, so I just use `sans-serif`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":483,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1359,"value":"I couldn't get the fork bends looking right with a single cubic Bézier (`C`) curve so I combined two quadratic Bézier curves (`Q`) with a line (`L`) in the middle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":612,"value":"function drawLink({ source, target }) {\n const isFork = source.children && source.children.length === 2;\n\n if (!isFork) {\n return `M${source.x}, ${source.y} H${target.x}`; // straight line\n }\n\n const bendOffset = dx;\n const bendWidth = 14;\n const r = 4;\n\n const dy = target.y - source.y;\n const direction = Math.sign(dy);\n const k = 2;\n\n const ax = source.x + bendOffset;\n const bx = ax + bendWidth;\n\n return [\n `M ${source.x} ${source.y}`,\n `L ${ax - r} ${source.y}`, // straight, stop r short of cornerA\n `Q ${ax} ${source.y} ${ax + k} ${source.y + direction * k}`, // round cornerA onto the diagonal\n `L ${bx - k} ${target.y - direction * k}`, // the straight diagonal, stop r short of cornerB\n `Q ${bx} ${target.y} ${bx + r} ${target.y}`, // round cornerB onto the target track\n `L ${target.x} ${target.y}` // straight to the child station\n ].join(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"isIcStation = (name) =>icStations.has(name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1274,"value":"circleStations = new Set([\n \"Breukelen\",\n \"A'dam Bijlmer ArenA\",\n \"Amsterdam Bijlmer ArenA\",\n // \"Duivendrecht\",\n \"Uitgeest\",\n \"Heerhugowaard\",\n \"Schagen\",\n \"Lage Zwaluwe\",\n \"Den Haag Laan v NOI\",\n \"Utrecht Vaartsche Rijn\",\n \"Woerden\",\n \"Driebergen-Zeist\",\n \"Elst\",\n \"Weesp\",\n \"Baarn\",\n \"Naarden-Bussum\",\n \"Enkhuizen\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1271,"value":"isCircleStation = (name) => circleStations.has(name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":752,"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 \"Amersfoort\",\n \"Hilversum\",\n \"Naarden-Bussum\",\n \"Weesp\",\n \"Duivendrecht\",\n \"Amsterdam Zuid\",\n \"Schiphol\",\n \"Schiphol Airport\",\n \"Amsterdam Centraal\",\n \"Amsterdam Sloterdijk\",\n \"Hoorn\",\n \"Delft\",\n \"Den Haag HS\",\n \"Leiden Centraal\",\n \"Utrecht Centraal\",\n \"Ede-Wageningen\",\n \"Arnhem Centraal\",\n \"'s-Hertogenbosch'\",\n \"Helmond\",\n \"Venlo\",\n \"Heemstede-Aerdenhout\",\n \"Haarlem\",\n \"Amsterdam Sloterdijk\",\n \"Zaandam\",\n \"Castricum\",\n \"Alkmaar\",\n \"Den Helder\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"dx = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":788,"value":"dy = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"height = 280","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"margin = ({ top: 40, right: 40, bottom: 40, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"diagramPhoto = FileAttachment(\n \"C92BB3A2-BBD9-46D3-83B7-108099F5FAE3_1_105_c.jpeg\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1457,"value":"rotterdamLines = FileAttachment(\"spoor-rotterdam-lines.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1512,"value":"rotterdamLineStations = FileAttachment(\"stations.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1537,"value":"nlProvincies = FileAttachment(\"provincie_2026.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1431,"value":"

\n \nFurther Ideas\n

\n\n\n* Offset lines using turf js? Animate that?\n* Morph from diagram to geographic\n* Do morph manually for rotterdam diagram, not all line info can be extracted from diagram structure anyway. For example train to Eindhoven skips all other rotterdam stations.\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"