31:Td9d,transitMorph = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-50, 0, 1300, 900]) .style("font", "10px sans-serif"); svg.call(appendDefs); const linesGroup = svg.append("g").attr("id", "lines"); const stopsGroup = svg.append("g").attr("id", "stops"); // const stopLinesGroup = svg.append("g").attr("id", "stopLines"); var nextLines = geographicLines; var currentLines = schematicLines; var nextLabels = geographicLabels; var currentLabels = schematicLabels; // var nextStopLines = geographicStopLines2; // var currentStopLines = schematicStopLines; while (true) { const t = svg.transition().duration(duration); stopsGroup .selectAll("text") .data(currentLabels, (d) => d.halte) .join( (enter) => enter .append("text") .attr("transform", (d) => d.transform) .attr("fill", "black") .attr("font-size", 8.5) .text((d) => d.halte) .attr("stroke", "white") .attr("paint-order", "stroke") .attr("stroke-linejoin", "round") .attr("stroke-width", 2), (update) => update.call((update) => update.transition(t).attrTween("transform", function (d) { var previous = d3.select(this).attr("transform"); var current = d.transform; return d3.interpolateTransformSvg(previous, current); }) ) ); linesGroup .selectAll("path") .data(currentLines, (d) => d.lijn) .join( (enter) => enter .append("path") .attr("fill", "none") .attr("stroke-linejoin", "round") .attr("stroke", (d) => d.stroke) .attr("stroke-width", 5) .attr("d", (d) => d.d) // .attr("marker-mid", "url(#dot)") // for debugging path interpolation .attr("marker-end", (d) => `url(#marker-${d.lijn})`) .attr("marker-start", (d) => `url(#marker-${d.lijn})`) .append("title") .text((d) => d.lijn), (update) => update.call((update) => update.transition(t).attrTween("d", function (d) { var previous = d3.select(this).attr("d"); var current = d.d; return d3.interpolatePath(previous, current); }) ) ); // markersGroup // .selectAll("path") // .data(currentMarkers, (d) => d.id) // .join( // (enter) => // enter // .append("path") // .attr("fill", "none") // .attr("d", (d) => d.d) // .attr("id", (d) => d.id) // .attr("stroke-width", 6) // .attr("stroke", (d) => d.stroke), // (update) => // update.call((update) => // update // .transition(t) // .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]; [nextLines, currentLines] = [currentLines, nextLines]; // [nextStopLines, currentStopLines] = [currentStopLines, nextStopLines]; } }32:T722,appendDefs = (svg) => svg .append("defs") .selectAll("marker") .data(schematicLines) .join((enter) => { const marker = enter .append("marker") .attr("overflow", "visible") .attr("markerWidth", markerWidth) .attr("markerHeight", markerWidth) .attr("orient", 0) .attr("id", (d) => `marker-${d.lijn}`) .attr("viewBox", `0 0 ${markerWidth * 2} ${markerWidth * 2}`) .attr("refY", markerWidth / 2); // marker // .append("line") // .attr("stroke", (d) => d.stroke) // .attr("x", 0) // .attr("y1", 0) // .attr("x2", markerWidth) // .attr("y2", 0) // .attr("stroke-width", 4) // .attr("fill-rule", "evenodd"); // For debugging path interpolation // const marker2 = enter // .append("marker") // .attr("overflow", "visible") // .attr("markerWidth", 8) // .attr("markerHeight", 8) // .attr("orient", 0) // .attr("id", "dot") // // .attr("viewBox", `0 0 ${markerWidth * 2} ${markerWidth * 2}`) // .attr("refY", 4) // .attr("refX", 4); // marker2 // .append("circle") // .attr("cx", 4) // .attr("cy", 4) // .attr("r", 0.2) // .attr("fill", "black"); marker .append("rect") .attr("fill", "white") .attr("stroke", (d) => d.stroke) .attr("width", markerWidth) .attr("height", markerWidth) .attr("rx", 2); marker .append("text") .attr("x", markerWidth / 2) .attr("y", markerWidth / 2) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-size", 6) .attr("fill", "black") .text((d) => d.lijn); })33:T492b,schematicSvg = svg``34:[{"id":"afdc3aec1057fdc00621842dc074586ce279c1d61a1297d376e2ab6bcbc73ae4be08c1e110887a603f27daa8cfe440c59aa12001021af90f390151910a9d85e9","href":"https://static.observableusercontent.com/files/afdc3aec1057fdc00621842dc074586ce279c1d61a1297d376e2ab6bcbc73ae4be08c1e110887a603f27daa8cfe440c59aa12001021af90f390151910a9d85e9","name":"haltes-5@3.csv","type":"text/csv","lastModified":1626296063109.317,"size":127903},{"id":"9aae46ae46688740a4e866d107c5d87c9f71b1bab85059efe102219f0504f9e7bfb83c2d5b9cc501f26dcb3e5a53d7bea7bbf645b42e938ffc64ddae6e504514","href":"https://static.observableusercontent.com/files/9aae46ae46688740a4e866d107c5d87c9f71b1bab85059efe102219f0504f9e7bfb83c2d5b9cc501f26dcb3e5a53d7bea7bbf645b42e938ffc64ddae6e504514","name":"rotterdam-metro-simplified.json","type":"application/json","lastModified":1630927865317.402,"size":60367}] 2f:{"title":"Rotterdam Morphing Transit Map","cells":[{"id":0,"value":"# Rotterdam Morphing Transit Map\n\nA transit map morph of Rotterdam's subway network. \n","pinned":false,"hidden":false,"mode":"md"},{"id":68,"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":249,"value":"viewof pause = Inputs.range([0, 10000], {\n value: 1000,\n label: \"Pause (s)\",\n format: (x) => x / 1000,\n step: 500,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"## How It Was Made\n\n1. Geographic transit lines were extracted from OpenStreetMap as geoJSON using [Overpass Turbo](https://overpass-turbo.eu/)\n2. These lines were cleaned in QGIS, [the unorganized segments were rearranged](https://observablehq.com/@julesblm/join-unordered-geojson-linestrings) and duplicated for each transit line in JS.\n3. The SVG of the schematic lines was 'cleaned'; all relative line path commands were converted to absolute path command, and added id's for the lines. \n\n## Credits\n\n* Geographic data from OpenStreetMap ODbL 1.0 licence\n* Schematic map SVG from [Wikipedia user MischeBen](https://nl.wikipedia.org/wiki/Rotterdamse_metro#/media/Bestand:Metro_Rotterdam_future.svg) public domain","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"md`## See Also\n\n${previews([\n {\n path: \"@julesblm/the-hague-morphing-transit-diagram\",\n thumbnail:\n \"e0ea4bc21f697ba791e0d9969d81dab3399ffd24417770fbb61391a2d71d3933\",\n title: \"The Hague Morphing Transit Map\",\n author: \"Jules Blom\"\n }\n])}\n\n${previews([\n {\n path: \"@julesblm/morphing-transit-map-amsterdam\",\n thumbnail:\n \"d8c8b1a786a14ba8daec971d53ec7d013cc821851608bb98014ff14453929be3\",\n title: \"Morphing Transit Map Amsterdam \",\n author: \"Jules Blom\"\n }\n])}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"## Code & Data","pinned":false,"hidden":false,"mode":"md"},{"id":1144,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"markerWidth = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"schematicLabelElements = [...schematicSvg.querySelector(\"#labels\").children]","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"schematicLabels = schematicLabelElements.map((child) => {\n const transform = child.getAttribute(\"transform\");\n\n const parsedTransform = parseSvg(transform);\n\n const x = +child.getAttribute(\"x\");\n const y = +child.getAttribute(\"y\");\n\n const { translateX, translateY, rotate } = parsedTransform;\n\n const addedX = parsedTransform.translateX + x;\n const addedY = parsedTransform.translateY + y;\n\n const newTransform =\n rotate > 0\n ? `rotate(${rotate})translate(${x.toFixed(2)},${y.toFixed(2)})`\n : `translate(${addedX.toFixed(2)},${addedY.toFixed(2)})`;\n\n return {\n transform: newTransform,\n halte: child.textContent\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"geographicLabels = uniqueStops.map((d) => ({\n transform: `translate(${projection([+d.longitude, +d.latitude]).map((d) =>\n d.toFixed(4)\n )})`,\n halte: d.name\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"// schematicMarkerNames = schematicMarkers\n// .filter((d) => Boolean(d.id))\n// .map((d) => d.id.replaceAll(\"-\", \" \"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":996,"value":"// geographicMarkers2 = schematicMarkerNames\n// .map((d) => geographicLabels.find((e) => d.slice(0, -2) === e.halte))\n// .filter(Boolean)\n// .map((d) => {\n// const { halte, transform, stroke } = d;\n// const { translateX, translateY } = parseSvg(transform);\n\n// return {\n// stroke,\n// id: halte.replaceAll(\" \", \"-\"),\n// d: `M${translateX.toFixed(2)} ${translateY.toFixed(2)}v20`\n// };\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"// geographicMarkers = uniqueStops.map((d) => ({\n// d: `M${projection([+d.longitude, +d.latitude]).map((d) => d.toFixed(2))}v10`,\n// id: `${d.name.replaceAll(\" \", \"-\")}-${d.desc.replace(\"Metrolijn \", \"\")}`\n// }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"// uniqueStops\n// .map((d) =>\n// d.desc\n// .replaceAll(\"Metrolijn \", \"\")\n// .split(\"/\")\n// .map((e) => `${d.name.replaceAll(\" \", \"-\")}-${e}`)\n// )\n// .flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"// schematicMarkerElements = Array.from(\n// schematicSvg.querySelector(\"#markers\").querySelectorAll(\"path\")\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"// schematicMarkers = schematicMarkerElements\n// .map((d) => ({\n// d: d.getAttribute(\"d\"),\n// id: d.getAttribute(\"id\"),\n// stroke: d.getAttribute(\"stroke\")\n// }))\n// .filter((d) => Boolean(d.id))\n// .map((d) => ({ ...d, id: d.id.slice(0, -2) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"schematicLines = Array.from(schematicSvg.querySelector(\"#lines\").children).map(\n (child) => ({\n lijn: child.getAttribute(\"id\"),\n d: child.getAttribute(\"d\"),\n stroke: child.getAttribute(\"stroke\")\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"geographicLines = rotterdamMetroGeo.features.map((d) => ({\n lijn: d.properties.description,\n // d: path(d),\n d: d.properties.description === \"A\" ? path(d) : path(offsetLine(d)),\n coordinates: d.geometry.coordinates\n // start: d.properties.start,\n // end: d.properties.end\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"offsetLine = (lineString) =>\n turf.lineOffset(lineString.geometry, offsetDistance, { units: \"meters\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"offsetDistance = -300","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"// pathStrings = Array.from(schematicSvg.querySelector(\"#lines\").children)\n// .map((child) => child.getAttribute(\"d\"))\n// .map(snap.path.toAbsolute)\n// .map((d) =>\n// d.map(([command, ...coords]) => `${command}${coords.join(\",\")}`).join(\" \")\n// )[3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"projection = d3\n .geoIdentity(true)\n .reflectY(true)\n .fitExtent(\n [\n [projectionPadding, projectionPadding],\n [width - projectionPadding, height - projectionPadding]\n ],\n rotterdamMetroGeo\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"projectionPadding = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"height = (4 / 5) * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"metrostops = d3\n .dsvFormat(\";\")\n .parse(stops)\n .filter((d) => d.desc.includes(\"Metro\"))\n .map((d) => {\n const latitude = +d.latitude.replace(\",\", \".\");\n const longitude = +d.longitude.replace(\",\", \".\");\n\n return { ...d, latitude, longitude };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"uniqueStops = [...new Map(metrostops.map((d) => [d.name, d])).values()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"rotterdamMetroGeo = FileAttachment(\"rotterdam-metro-simplified.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"stops = FileAttachment(\"haltes-5@3.csv\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"identity = ({\n translateX: 0,\n translateY: 0,\n rotate: 0,\n skewX: 0,\n scaleX: 1,\n scaleY: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"// https://github.com/d3/d3-interpolate/blob/main/src/transform/parse.js\nfunction parseSvg(value) {\n if (value == null) return identity;\n if (!svgNode)\n mutable svgNode = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"g\"\n );\n\n svgNode.setAttribute(\"transform\", value);\n\n if (!(value = svgNode.transform.baseVal.consolidate())) return identity;\n value = value.matrix;\n\n return decompose(value.a, value.b, value.c, value.d, value.e, value.f);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"// https://github.com/d3/d3-interpolate/blob/main/src/transform/decompose.js\nfunction decompose(a, b, c, d, e, f) {\n var scaleX, scaleY, skewX;\n if ((scaleX = Math.sqrt(a * a + b * b))) (a /= scaleX), (b /= scaleX);\n if ((skewX = a * c + b * d)) (c -= a * skewX), (d -= b * skewX);\n if ((scaleY = Math.sqrt(c * c + d * d)))\n (c /= scaleY), (d /= scaleY), (skewX /= scaleY);\n if (a * d < b * c) (a = -a), (b = -b), (skewX = -skewX), (scaleX = -scaleX);\n return {\n translateX: e,\n translateY: f,\n rotate: Math.atan2(b, a) * degrees,\n skewX: Math.atan(skewX) * degrees,\n scaleX: scaleX,\n scaleY: scaleY\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"degrees = 180 / Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"mutable svgNode = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"d3 = require(\"d3@v7\", \"d3-interpolate-path@v2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"import { previews } from \"@twitter/density-plot-introduction\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"snap = require(\"snapsvg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"## Possible Additions\n* Show full geographic map with geographic lines\n* Improve interpolation of line B & A\n* Show and transition line markers for the stops\n * Schematic done, not sure how to get tangent for stops of geographic linepaths? Only manually? ","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}