31:T5be,md` This is inspired by Transitions from Maps to Diagrams by Florian Ledermann. ([Part 1](/@floledermann/transitions-from-maps-to-diagrams-part-1), [Part 2](/@floledermann/transitions-from-maps-to-diagrams-part-2)) that is a beautiful interaction between geospatial information and its quantitative data. I'm using this animation to visualize a transportation characteristic in Chicago attractively. I came up with this idea because the cities in the states are highly dependent on automotive particularly from me who have lived in Tokyo and Shingapore where public transportation is significantly developed. This year, the Biden administration announced [a new investment plan](https://www.whitehouse.gov/briefing-room/statements-releases/2021/03/31/fact-sheet-the-american-jobs-plan/) including renovating transportation infrastructure that tries to shift spending from new roads to public transportation. I thought this visualization could be one of the ways to intuitively recognize and understand an infrastructural caracteristic of each city as a first step to change the paradigm. Here is an animation map of a part of Chicago. Car roads (${helpers.colorBox( color('carway') )}), railway (${helpers.colorBox( color('railway') )}), and cycleway (${helpers.colorBox( color('cycleway') )}) on the map tranform into bar charts to show their lenghs relatively. (Please wait a few seconds until this page calls and gets API data. Thank you for your patience!)`32:T83a,preview = { // create SVG element let svg = d3.select(DOM.svg(width, height)); svg.style("display", "block"); const bg = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "white"); // construct the SVG path elements svg .selectAll("path") .data(sortedWay) .enter() .append("path") .attr("d", (d) => d.properties.mapPath) // geometry has been stored earlier by prepareStreets() .attr("fill", "none") .attr("stroke", (d) => color(d.properties.use)) .attr("stroke-width", 1); // keep track of current state let isMap = true; let timer = null; let running = true; function anim() { svg .selectAll("path") .interrupt() // cancel any ongoing transitions .transition() .duration(1500) .delay( (d) => (isMap ? d.properties.chartOrder : d.properties.mapOrder) + wayOrder[d.properties.use] * 1500 ) .ease(d3.easeLinear) // use linear motion .attr("d", (d) => isMap ? d.properties.diagramPath : d.properties.mapPath ) .on("end", function (d, i) { if (i == sortedWay.length - 1) { // last element has transitioned if (running) { timer = window.setTimeout(anim, 1000); } } }); isMap = !isMap; } timer = window.setTimeout(anim, 2000); // pausing and resuming animations in D3 is not trivial, so just reset to known state on resume svg.on("click", function () { if (running) { window.clearTimeout(timer); running = false; svg.selectAll("path").interrupt(); } else { svg .selectAll("path") .interrupt() .attr("d", (d) => isMap ? d.properties.mapPath : d.properties.diagramPath ); timer = window.setTimeout(anim, 10); running = true; } }); let div = DOM.element("div"); div.appendChild(svg.node()); div.appendChild( html`(Click on image to stop/resume animation)` ); return div; }33:T43d,button = { let button = html``; button.style.fontSize = "1.2em"; let isMap = true; button.addEventListener('click', function() { button.disabled = true; d3.select(streetSVG2) .selectAll('path') .interrupt() // cancel any ongoing transitions .transition() .duration(1500) // stagger the transitions and introduce a delay of 1.5 seconds between each group of streets .delay( d => (isMap ? d.properties.chartOrder : d.properties.mapOrder) + wayOrder[d.properties.use] * 1500 ) .ease(d3.easeLinear) // use linear motion .attr('d', d => (isMap ? d.properties.diagramPath : d.properties.mapPath)) .on('end', function(d, i) { if (i == sortedWay.length - 1) { // last element has transitioned button.value = isMap ? "Transition to Diagram" : "Transition to Map"; button.disabled = false; } }); isMap = !isMap; button.value = "... in transition ..."; }); return button; }34:T5e2,normalizePath = function(path, geometryFunction, closeGaps) { // geometryFunction will be passed a float index from 0..1 and should return a point // on the normalized geometry at that position if (closeGaps === undefined) closeGaps = true; // close gaps by default let command_letters = 'mlhvaqtcs', commands = [], newPath = ''; let i; // find all command letters in the path // preserve 'M' (moveto) commands, replace all other commends by 'L' (lineto) for (i = 0; i < path.length; i++) { let c = path[i].toLowerCase(); for (var j = 0; j < command_letters.length; j++) { if (c == command_letters[j]) { if (c == 'm') commands.push('M'); else commands.push('L'); break; } } } let num = commands.length, coords; // assemble new path string, using the replaced commands and // the normalized coordinates produced by geometryFunction if (num == 1) { // special case: single command (does not usually happen) coords = geometryFunction(0); newPath = commands[0] + coords[0] + ',' + coords[1]; } else { for (i = 0; i < num; i++) { newPath += commands[i]; if (closeGaps && commands[i] == 'M' && i > 0) { // bridge gaps caused by (moveto) commands by using previous coordinates coords = geometryFunction((i - 1) / (num - 1)); } else { coords = geometryFunction(i / (num - 1)); } newPath += coords[0] + ',' + coords[1]; } return newPath; } }35:T43b,function calculateLength(streetArray) { streetArray.forEach(d => { let totalLength = 0; for (let i = 0; i < d.geometry.coordinates.length - 1; i++) { const geo = d.geometry; // Get coordinates const lat1 = geo.coordinates[i][0]; const lat2 = geo.coordinates[i + 1][0]; const lon1 = geo.coordinates[i][1]; const lon2 = geo.coordinates[i + 1][1]; // Calculate length const R = 6371e3; // metres const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians const φ2 = (lat2 * Math.PI) / 180; const Δφ = (Math.abs(lat2 - lat1) * Math.PI) / 180; const Δλ = (Math.abs(lon2 - lon1) * Math.PI) / 180; const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const length = R * c; // in metres totalLength = totalLength + length; } // Insert length object d.properties["length"] = totalLength; }); return streetArray; }36:[] 2f:{"title":"Transition between Chicago Transportation Map and Diagrams","cells":[{"id":139,"value":"md`\n# Transition between Chicago Transportation Map and Diagrams\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"md`### Get data from Overpass api`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"md`The data is extracted from [OpenStreetMap](https://www.openstreetmap.org/) via [Overpass API](https://overpass-turbo.eu/). I set coordinates and request osm data by the following codes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"coords = [-87.5482, 41.9327]","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"getbb = (coords, dlat, dlon) => {\n return `${coords[1] - dlat},${coords[0] - dlon},${coords[1]},${coords[0]}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"bb = getbb(coords, 0.15, 0.18)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"function overpass(query) {\n let overpass_api_url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(\n query\n )}`;\n return d3.json(overpass_api_url);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"way_osm = {\n return overpass(`\n[out:json]\n[timeout:500];\n( \n way[\"railway\"](${bb});\n node(w);\n way[\"highway\"](${bb});\n node(w);\n);\nout;\n`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`\n### OSM data to GeoJSON\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"way_geojson = ({\n type: \"FeatureCollection\",\n features: turf\n .rewind(osmtogeojson(way_osm))\n .features.filter(d => d.geometry.type == \"LineString\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"md`### Organizing Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"md`Calculate a path for the map representation and the diagram representation. Then, add these new elements to Object.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"drawingPath = {\n way_geojson.features.forEach(d => {\n d.properties[\"mapPath\"] = pathGenerator(d);\n d.properties[\"diagramPath\"] = normalizePath(\n d.properties.mapPath,\n getLinearCoords\n );\n });\n return way_geojson;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"md`Refering to [OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Key:highway), I aggregated small categories related to car road or railway to make bigger categories and added them as a new element in each Object.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"way = {\n calculateLength(drawingPath.features);\n drawingPath.features.forEach(d => {\n if (d.properties.highway) {\n d.properties[\"use\"] = d.properties.highway;\n if (\n d.properties.use === \"motorway\" ||\n d.properties.use === \"trunk\" ||\n d.properties.use === \"primary\" ||\n d.properties.use === \"secondary\" ||\n d.properties.use === \"tertiary\" ||\n d.properties.use === \"unclassified\" ||\n d.properties.use === \"residential\" ||\n d.properties.use === \"motorway_link\" ||\n d.properties.use === \"trunk_link\" ||\n d.properties.use === \"primary_link\" ||\n d.properties.use === \"secondary_link\" ||\n d.properties.use === \"busway\"\n ) {\n d.properties.use = \"carway\";\n }\n } else if (d.properties.railway) {\n d.properties[\"use\"] = d.properties.railway;\n if (d.properties.use === \"rail\" || d.properties.use === \"subway\") {\n d.properties.use = \"railway\";\n }\n }\n });\n return drawingPath.features;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"md`Filter the array to hold only necessary data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"filteredWay = way.filter(\n d =>\n d.properties.use === \"carway\" ||\n d.properties.use === \"cycleway\" ||\n d.properties.use === \"railway\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"md`Decide the animation order.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"wayOrder = ({\n carway: 0,\n railway: 1,\n cycleway: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"md`Adding the map animation order and the diagram animation order as elements to each Object in the array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"sortedWay = {\n // make a copy of the original data, to avoid overwriting the properties set by part 2\n // https://stackoverflow.com/a/4591639\n let way2 = JSON.parse(JSON.stringify(filteredWay));\n\n // use sorted arrays to assign a chartOrder and mapOrder property to each street\n way2.sort(mapOrder);\n way2.forEach((d, i) => (d.properties.mapOrder = i));\n way2.sort(chartOrder);\n way2.forEach((d, i) => (d.properties.chartOrder = i));\n\n // prepare streets like in part 2\n prepareStreets(way2);\n\n return way2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"streetSVG2 = {\n // create SVG element\n let svg = d3.select(DOM.svg(width, height));\n\n const bg = svg\n .append('rect')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', width)\n .attr('height', height)\n .attr('fill', 'white');\n\n // construct the element\n svg\n .selectAll('path')\n .data(sortedWay)\n .enter()\n .append('path')\n .attr('d', d => d.properties.mapPath)\n .attr('fill', 'none')\n .attr('stroke', d => color(d.properties.use))\n .attr('stroke-width', 1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`----\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`\n#### Map assets\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"md`Width`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"md`Height`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"md`Margin`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"projection = d3\n .geoMercator()\n .fitExtent([[margin, margin], [width - margin, height - margin]], way_geojson)","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"pathGenerator = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"getLinearCoords = function(pos) {\n return [Math.round(margin + (width - 2 * margin) * pos), margin];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"md`#### Bar chart assets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"color = d3\n .scaleOrdinal()\n .domain([\"carway\", \"railway\", \"cycleway\"])\n .range([\"#878787\", \"#023e8a\", \"#ee0000\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"xCoord = d3\n .scaleLinear()\n .domain([0, stats.length.carway])\n .range([margin, width - margin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"function xCoordinateGenerator(xMin, xMax, y) {\n let delta = xMax - xMin;\n return function(pos) {\n return [xMin + delta * pos, y];\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"yCoord = d3\n .scaleOrdinal()\n .domain(['carway', 'railway', 'cycleway'])\n .range([margin, margin + 40, margin + 80])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md`#### Animation utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"stats = {\n let stats = {\n length: { carway: 0, railway: 0, cycleway: 0 }, // total length in meters\n count: { carway: 0, railway: 0, cycleway: 0 } // number of streets\n };\n\n filteredWay.forEach(way => {\n let use = way.properties.use;\n stats.length[use] += Math.floor(way.properties.length);\n stats.count[use] += 1;\n });\n\n return stats;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"function prepareStreets(streetsArray) {\n // keep track of the length of streets processed so far\n let lengthCounter = {\n carway: 0,\n cycleway: 0,\n railway: 0\n };\n\n // calculate the path geometries for each street\n streetsArray.forEach(d => {\n // the path for drawing the street on the map\n d.properties.mapPath = pathGenerator(d);\n\n let xGen = xCoordinateGenerator(\n xCoord(lengthCounter[d.properties.use]),\n xCoord(lengthCounter[d.properties.use] + d.properties.length),\n yCoord(d.properties.use)\n );\n\n // the path for drawing the street in the diagram\n d.properties.diagramPath = normalizePath(d.properties.mapPath, xGen);\n\n lengthCounter[d.properties.use] += d.properties.length;\n });\n\n return streetsArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"function getFirstPoint(geom) {\n if (geom.geometry) {\n // geom is a feature -> apply again on the geometry field\n return getFirstPoint(geom.geometry);\n }\n if (geom.geometries) {\n // geom is a GeometryCollection\n return getFirstPoint(geom.geometries[0]);\n }\n if (geom.type == 'LineString') {\n return geom.coordinates[0];\n }\n if (geom.type == 'MultiLineString' || geom.type == 'Polygon') {\n return geom.coordinates[0][0];\n }\n if (geom.type == 'MultiPolygon') {\n return geom.coordinates[0][0][0];\n }\n throw \"Invalid GeoJSON!\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"// Sorting function for going from diagram to map\nfunction mapOrder(a, b) {\n // first compare gender\n if (wayOrder[a.properties.use] > wayOrder[b.properties.use]) return 1;\n if (wayOrder[a.properties.use] < wayOrder[b.properties.use]) return -1;\n // then latitude\n if (getFirstPoint(a.geometry)[1] > getFirstPoint(b.geometry)[1]) return 1;\n if (getFirstPoint(a.geometry)[1] < getFirstPoint(b.geometry)[1]) return -1;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"// Sorting function for going from map to diagram\nfunction chartOrder(a, b) {\n // first compare gender\n if (wayOrder[a.properties.use] > wayOrder[b.properties.use]) return 1;\n if (wayOrder[a.properties.use] < wayOrder[b.properties.use]) return -1;\n // then latitude - note that this is the reverse order than above\n if (getFirstPoint(a.geometry)[1] > getFirstPoint(b.geometry)[1]) return -1;\n if (getFirstPoint(a.geometry)[1] < getFirstPoint(b.geometry)[1]) return 1;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"osmtogeojson = require(\"osmtogeojson@3.0.0-beta.4/osmtogeojson.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3 = require(\"https://d3js.org/d3.v5.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"import { helpers } from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"helpers.defaultCSS","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}