31:T64c,interpolateYourself = { const svg = d3 .create("svg") .attr("width", width) .attr("viewBox", [0, 0, 850, 700]) .style("font", "10px sans-serif"); svg.call(appendDefs); const sea = svg .append("path") .attr("fill", "lightskyblue") .attr("d", interpolatedNorthSea); const linesGroup = svg.append("g").attr("id", "lines"); linesGroup .selectAll("path") .data(interpolatedLines, (d) => d.lijn) .join((enter) => enter .append("path") .attr("fill", "none") .attr("stroke-linejoin", "round") .attr("stroke", (d) => d.stroke) .attr("stroke-width", 1.9) .attr("d", (d) => d.d) .attr("marker-end", (d) => `url(#marker-lijn-${d.lijn}-end`) .attr("marker-start", (d) => `url(#marker-lijn-${d.lijn}-start`) .append("title") .text((d) => d.lijn) ); const stopsGroup = svg.append("g").attr("id", "stops"); stopsGroup .selectAll("text") .data(interpolatedLabels) .join( (enter) => enter .append("text") .attr("fill", "black") .attr("font-size", 4.5) .attr("text-anchor", "middle") .attr("transform", (d) => d.transform) .attr("stroke", "white") .attr("paint-order", "stroke") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.5) .text((d) => d.halte), (update) => update, (exit) => exit .attr("fill", "brown") .call((exit) => exit.transition(t).attr("opacity", 1).remove()) ); return svg.node(); }32:T44c,Another transit map morph! (see [first one](/@julesblm/morphing-transit-map-amsterdam)). This time of The Hague's (Den Haag 🇳🇱) [extensive tram network](https://en.wikipedia.org/wiki/Trams_in_The_Hague) which I regularly use, it's good. Again the idea is to compare the simplified design of the transit map, that eschews geographic accuracy, to the geographic map. This time I wanted to provide more context and show more than just the transit lines. So I've included labels for stops and lines and the sea! The sea is especially important because transit maps of The Hague are often rotated with the coast up like this

A photo of transit map rotated with the coast up at a tramstrop in the Hague — A transit map in the wild in The Hague

But then sometimes, I look at a real map of the Hague and I get disoriented because I have mentally rotated the map likewise, with the coast up. But I suppose the coast is a useful reference line, most major roads run more-or-less parallel to it.33:T93c,ageoutoInterpolate = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 600, 800]) .style("font", "10px sans-serif"); // const t = d3.transition().duration(duration); const stopsGroup = svg.append("g").attr("id", "stops"); svg.call(appendDefs); var nextData = geographicLines; var currentData = schematicLines; var nextLabels = geographicTramStopsMap; var currentLabels = schematicTramStopsMap; while (true) { stopsGroup .selectAll("text") .data(currentLabels, (d) => d[0]) .join( (enter) => enter .append("text") .attr("fill", "black") .attr("text-anchor", "middle") .attr("font-size", 4) .attr("transform", (d) => d[1]) .text((d) => d[0]), (update) => update.call((update) => update .transition() .duration(duration) .attrTween("transform", function (d) { var previous = d3.select(this).attr("transform"); var current = d[1]; return d3.interpolateTransformSvg(previous, current); }) ) ); svg .selectAll("path") .data(currentData, (d) => d.lijn) .join( (enter) => enter .append("path") .attr("fill", "none") .attr("stroke-linejoin", "round") .attr("stroke", (d) => d.stroke) .attr("stroke-width", 1.75) .attr("d", (d) => d.d) .attr("marker-end", (d) => `url(#marker-lijn-${d.lijn}-end`) .attr("marker-start", (d) => `url(#marker-lijn-${d.lijn}-start`) .append("title") .text((d) => d.lijn), (update) => update.call((update) => update .transition() .duration(duration) .attrTween("d", function (d) { var previous = d3.select(this).attr("d"); var current = d.d; return d3.interpolatePath(previous, current); }) ) ); yield Promises.delay(duration + pause, svg.node()); [nextLabels, currentLabels] = [currentLabels, nextLabels]; [nextData, currentData] = [currentData, nextData]; } }34:Tacd,appendDefs = (svg) => { svg .append("defs") .selectAll("marker") .data(geographicLines) .join((enter) => { const markerStart = enter .append("marker") .attr("overflow", "visible") .attr("id", (d) => `marker-lijn-${d.lijn}-start`) .attr("markerHeight", 20) .attr("markerWidth", 20) .attr("viewBox", "0 0 20 20") .attr("refX", 0) .attr("refY", 0); markerStart .append("rect") .attr("fill", (d) => d.stroke) .attr("width", 11) .attr("height", 11) .attr("rx", 2); markerStart .append("text") .attr("x", 5) // d => getTextWidth(d.lijn, "8px sans-serif") .attr("y", 6) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-size", 8) .attr("fill", "white") .text((d) => d.lijn); markerStart .append("rect") .attr("fill", "white") .attr("fill-opacity", 0.9) .attr("stroke", (d) => d.stroke) .attr("x", 11) .attr("width", (d) => getTextWidth(d.start, "3.5pt sans-serif")) // use px? .attr("height", 11) .attr("rx", 3); markerStart .append("text") .attr("x", 13) .attr("y", 6) .attr("dominant-baseline", "middle") .attr("font-size", 4) .attr("fill", "black") .text((d) => d.start); const markerEnd = enter .append("marker") .attr("overflow", "visible") .attr("id", (d) => `marker-lijn-${d.lijn}-end`) .attr("markerHeight", 20) .attr("markerWidth", 20) .attr("viewBox", "0 0 20 20") .attr("refX", 0) .attr("refY", 0); markerEnd .append("rect") .attr("fill", (d) => d.stroke) .attr("width", 11) .attr("height", 11) .attr("rx", 3); markerEnd .append("text") .attr("x", 5) // d => (11 getTextWidth(d.lijn, '8px sans-serif') .attr("y", 6) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-size", 8) .attr("fill", "white") .text((d) => d.lijn); markerEnd .append("rect") .attr("fill", "white") .attr("fill-opacity", 0.9) .attr("stroke", (d) => d.stroke) .attr("x", 11) .attr("width", (d) => getTextWidth(d.end, "3.5pt sans-serif")) .attr("height", 11) .attr("rx", 3); markerEnd .append("text") .attr("x", 13) .attr("y", 6) .attr("dominant-baseline", "middle") .attr("font-size", 4) .attr("fill", "black") .text((d) => d.end); return markerStart; }); }35:Td8d,## Credits Geographic transit map from the online [HTM Lijnennetkaart](https://www.htm.nl/reizen/lijnennetkaart). The schemat transit map was extracted from the official [HTM 2021 transitmap PDF](https://assets.htm.production.redkiwi.io/PDF/Reizigerscommunicatie/21005HTM_A4haltekrt_TRAM_BUS_mrt2021_web_def.pdf) ## Process 1. Geographic GeoJSON's were extracted from the online [HTM Lijnennetkaart](https://www.htm.nl/lijnennetkaart?layer=stops). I opened the network tab in the browser dev tools and copied the responses and cleaned that mostly using [Mapshaper](https://mapshaper.org/) (such a great tool), QGIS and some manual edits in VS Code. 1. The transit diagram was extracted from the [Transit Map PDF](https://assets.htm.production.redkiwi.io/PDF/Reizigerscommunicatie/21005HTM_A4haltekrt_TRAM_BUS_mrt2021_web_def.pdf) and then extracted the lines in Sketch which was painful, can't recommend it for such tasks. I cleaned and minified the SVG using [SVGO](https://github.com/svg/svgo) and some again some manual edits in VS Code. 1. Instead of the very arduous task of converting an SVG to geoJSON, like I did for the [previous morph](https://observablehq.com/@julesblm/morphing-transit-map-amsterdam), I skipped that step altogether and just used the path strings, because that's what all this is in the end anyway. 1. Then with all the data in neatly in SVG path commands, no lines morphed correctly! This threw me for a loop, it took me while to find out that the path commands for the schematic map were relative while the geographic ones generatated by \`d3.geoPath()\` were absolute Line to commands. [d3-interpolate-path](https://github.com/pbeshai/d3-interpolate-path) needs commands between lines to be similar. I figured this by looking at paths in the awesome [SVG Path Editor](https://yqnn.github.io/svg-path-editor/) web app. Path commands should sorta match between lines, it works best if everything is a Line to, so no Vertical or Horizontal lines and certainly no Curves. This blogpost by Lea Verou [Utility: Convert SVG path to all-relative or all-absolute commands](https://lea.verou.me/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/) pointed me to Snap.svg [\`path.toAbsolute()\`](http://snapsvg.io/docs/#Snap.path.toAbsolute) there's a messy notebook here: [Convert All SVG Path Commands to Line to's ](https://observablehq.com/@julesblm/convert-all-svg-path-commands-to-line-tos) to convert all path commands to absolute Line to's. 1. So from this point I stopped keeping track of all the steps. I caved a bought a license for Adobe Illustrator and did a lot of 'manual' refining and cleaning there. Suffice to say it was **a lot** of tedious manual editing work. So in the end it still was really a lot of work to clean all data. ## Tools used ### Libraries * D3.js and Observable of course * [Flubber](https://github.com/veltman/flubber) * [d3-interpolate-path](https://github.com/pbeshai/d3-interpolate-path) by Peter Beshai * [Snap.svg](http://snapsvg.io/docs/#Snap.path) ### Web Apps * [Mapshaper](https://mapshaper.org/) * [SVG Path editor web app](https://yqnn.github.io/svg-path-editor/) this is a fantastic little web app * [CodePen: SVG Polygon/Polyline to Path Converter by Jake Albaugh](https://codepen.io/jakealbaugh/pen/GZwgzV) 36:T29c3,transitMap = svg``37:T6022,schematicLabelsSvg = svg``38:[{"id":"0aedd5fb0d28ef64a7ff352bf39eb98975e9e4da8d1bc17232cc9106fb7cc4c3fb082f32ed26f882347364ec1d7f8c0bf715c7549d40e5ca518621d10ed0a10e","href":"https://static.observableusercontent.com/files/0aedd5fb0d28ef64a7ff352bf39eb98975e9e4da8d1bc17232cc9106fb7cc4c3fb082f32ed26f882347364ec1d7f8c0bf715c7549d40e5ca518621d10ed0a10e","name":"den-haag-tram-geographic@21.json","type":"application/json","lastModified":1623359495907.544,"size":119521},{"id":"497e23402ff403907140cae4a48db20fff5eeaf564fba9d6e15cc67f09e5db3e31972f94ad145775e1f9f39a18bba6c3d1905e9059f244e482851fef7a5f2db9","href":"https://static.observableusercontent.com/files/497e23402ff403907140cae4a48db20fff5eeaf564fba9d6e15cc67f09e5db3e31972f94ad145775e1f9f39a18bba6c3d1905e9059f244e482851fef7a5f2db9","name":"noordzee-2.geojson","type":"application/geo+json","lastModified":1623359635001.27,"size":7489},{"id":"dd8ae3df7cb13ab64399f160314816cc3d499d56942bc6b82064d893c9f962a00798e78e8a1284f21db2423623e2bbd2b5167e9d6ad207ab7b5c31108a023ee8","href":"https://static.observableusercontent.com/files/dd8ae3df7cb13ab64399f160314816cc3d499d56942bc6b82064d893c9f962a00798e78e8a1284f21db2423623e2bbd2b5167e9d6ad207ab7b5c31108a023ee8","name":"transitMapPhoto.png","type":"image/png","lastModified":1623790428240.426,"size":8794780},{"id":"6cc3a6d7224e86a97234066e3ebac154e326f373b2407eab30fb159a2e5c28ea9afd0e1a3cb4c75ac0f6e7aac67a3713a0d125094e3266e6550e6a3ff1c981a0","href":"https://static.observableusercontent.com/files/6cc3a6d7224e86a97234066e3ebac154e326f373b2407eab30fb159a2e5c28ea9afd0e1a3cb4c75ac0f6e7aac67a3713a0d125094e3266e6550e6a3ff1c981a0","name":"haltes-3@1.json","type":"application/json","lastModified":1625496638828.999,"size":96632}] 2f:{"title":"The Hague Morphing Transit Map","cells":[{"id":0,"value":"# The Hague Morphing Transit Map\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2386,"value":"freelanceBanner","pinned":false,"hidden":false,"mode":"ojs"},{"id":2384,"value":"**Drag the slider!**","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"viewof t = Inputs.range([0, 1], {\n value: 0,\n label: \"Interpolate\",\n format: x => x.toFixed(2),\n step: 0.005,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2113,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":2107,"value":"## Automorph","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"viewof duration = Inputs.range([0, 10000], {\n value: 3400,\n label: \"Transition (s)\",\n format: (x) => x / 1000,\n step: 200,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2360,"value":"viewof pause = Inputs.range([0, 10000], {\n value: 5000,\n label: \"Pause (s)\",\n format: (x) => x / 1000,\n step: 500,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"colors = new Map([\n [\"1\", \"#DA291C\"],\n [\"2\", \"#FFC72C\"],\n [\"3\", \"#BB16A3\"],\n [\"4\", \"#E57200\"],\n [\"6\", \"#19a2df\"],\n [\"9\", \"#84BD00\"],\n [\"11\", \"#AA8066\"],\n [\"12\", \"#DFA0C9\"],\n [\"15\", \"#9678D3\"],\n [\"16\", \"#703F2A\"],\n [\"17\", \"#003087\"],\n [\"19\", \"#1a9883\"],\n [\"34\", \"#777776\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"geoMap = FileAttachment(\"den-haag-tram-geographic@21.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"interpolatedNorthSea = flubber.interpolate(\n northSeaGeographicPath,\n northSeaSchematicPath\n)(t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"geographicLines = geoMap.features\n .map((d) => ({\n lijn: d.properties.lijn,\n d: path(d),\n start: d.properties.start,\n end: d.properties.end,\n stroke: colors.get(d.properties.lijn) ?? \"\"\n }))\n .sort(sortAscending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"schematicLines = [...transitMap.children]\n .map((child) => ({\n lijn: child.getAttribute(\"id\"),\n d: child.getAttribute(\"d\"),\n stroke: child.getAttribute(\"stroke\")\n }))\n .sort(sortAscending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"interpolatedLines = geographicLines.map((d, i) => ({\n stroke: \"black\",\n ...d,\n d: d3.interpolatePath(d.d, schematicLines[i].d)(t)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"northSea = FileAttachment(\"noordzee-2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"northSeaGeographicPath = path(northSea)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"northSeaSchematicPath = \"M -5 -256 L -5 74.95 L 38 75 L 99 75 L 170 75 L 240.29 74.41 L 290.03 65.11 L 290.7 49.61 L 299.39 35.5 L 300.82 35.5 L 292.7 49.55 L 290.92 69.97 L 296.04 74.78 L 294.53 78.96 L 288.68 76.28 L 285.91 80.47 L 291.27 83.9 L 291.27 86.41 L 296.04 92.85 L 301.06 93.1 L 301.31 87.33 L 304.99 87.33 L 305.49 99.37 L 291.69 99.71 L 291.27 97.7 L 288.34 97.53 L 284.58 99.71 L 284.66 104.14 L 326.82 104.14 L 326.65 99.54 L 307.5 99.54 L 307.41 90.01 L 326.65 90.17 L 326.49 82.64 L 304.49 82.31 L 300.55 77.12 L 300.81 73.19 L 306.9 73.59 L 305.56 64.31 L 304.05 62.55 L 302.38 61.97 L 302.06 61.42 L 303.3 61.21 L 304.34 61.68 L 305.72 62.05 L 310.49 54.31 L 310.92 53.01 L 310.33 50.67 L 309.16 48.67 L 308.74 47.08 L 309.16 45.95 L 309.98 46.11 L 311.24 47.75 L 312.47 49.72 L 312.96 51.46 L 311.51 55.87 L 306.81 63.56 L 318.61 69.5 L 393.4 71.09 L 444.34 72.73 L 487.92 73.56 L 627 73 L 734 75 L 860 77 L 982 79 L 1137 73 L 1141 -272 L -5 -256\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"stops = FileAttachment(\"haltes-3@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"geographicTramStops = d3.group(stops, d => d.transport_type).get(\"tram\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"schematicTramStops = Array.from(schematicLabelsSvg.querySelector(\".halte-labels\").children).map(\n (child) => ({\n transform: child.getAttribute(\"transform\"),\n halte: child.textContent\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"interpolatedLabels = [...geographicTramStopsMap.entries()].map(\n ([halte, transform]) => ({\n halte,\n transform: d3.interpolateTransformSvg(\n transform,\n schematicTramStopsMap.get(halte)\n )(t)\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"schematicTramStopsMap = new Map(\n schematicTramStops.map((d) => [d.halte, d.transform])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"geographicTramStopsProjected = geographicTramStops.map((d) => ({\n transform: `translate(${projection([+d.longitude, +d.latitude])})`,\n halte: d.stop_cluster_name\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"geographicTramStopsMap = new Map(\n geographicTramStopsProjected.map((d) => [d.halte, d.transform])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"nsIcon = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"metroLineEPath = md`*⚠️ Metroline E to Rotterdam is not included, I might add it later*\n~~~svg\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2138,"value":"transitMapPhoto = FileAttachment(\"transitMapPhoto.png\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"md`## Utils & Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"sortAscending = (d, e) => d3.ascending(+d.lijn, +e.lijn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"// https://stackoverflow.com/questions/1636842/svg-get-text-element-width\nfunction getTextWidth(text, font) {\n // re-use canvas object for better performance\n var canvas =\n getTextWidth.canvas ||\n (getTextWidth.canvas = document.createElement(\"canvas\"));\n var context = canvas.getContext(\"2d\");\n context.font = font;\n var metrics = context.measureText(text);\n return metrics.width;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":973,"value":"formatter = new Intl.ListFormat('nl', { style: 'long', type: 'conjunction' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"height = (4 / 5) * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"projectionPadding = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"projection = d3\n .geoIdentity(true)\n .reflectY(true)\n .fitExtent(\n [\n [projectionPadding, projectionPadding],\n [width - projectionPadding, height - projectionPadding]\n ],\n geoMap\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"import { freelanceBanner } from \"@julesblm/freelance-banner\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1189,"value":"flubber = require(\"flubber@0.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"d3 = require(\"d3@v6\", \"d3-interpolate-path@v2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1803,"value":"md`## Future Ideas\n\n* Is there a way to use d3 joins with a slider-controlled transition?🤔\n* Sea shape morph a little weirdly\n* Rotate transit map before morphing fully\n* Morph lines around stops, custom interpolator for .attrTween?\n1. Add markers for train stations with NS logo schematic and geographic and morph too\n2. Add labels for Den Haag, Zoetermeer, Delft, Scheveningen, Kijkduin both schematic and geographic and morph too\n2. Add a Voronoi diagram around stops\n4. Autoslide button`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}