31:T767,preview = { // create SVG element let svg = d3.select(DOM.svg(width, height)); svg.style('display','block'); // construct the SVG path elements svg.selectAll('path') .data(sortedStreets) .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.gender)) .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) + genderOrder[d.properties.gender] * 1500) .ease(d3.easeLinear) // use linear motion .attr('d',d => isMap ? d.properties.diagramPath : d.properties.mapPath) .on('end', function(d,i){ if (i == sortedStreets.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 }32:T67b,// This is taken from Transitions from Maps to Diagrams, Part 1 // (https://beta.observablehq.com/@floledermann/transitions-from-maps-to-diagrams-part-1) 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; i0) { // 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; } }33:T454,md`The above is already quite nice, but not yet fully resembling the desired “spill-out” effect. Particularly on the transition back from diagram to map, the bars were processed from beginning to end, which looks somewhat counter-intuitive. For improving the animation, we need to control the *order* in which the elements on the map are animated. You can think of your own idea how to sequence the transitions of the individual streets, and experiment with how the look of the animation is affected by changing the parameters. The idea I had in mind was that *a)* I wanted the map to be “sucked up” one category after the other, from top to bottom, and the streets should line up in the diagram from left to right. *b)* For the reverse transition, I wanted the three categories to be “spilled out” over the map, filling it bottom to top, again one category after the other, but this time starting at the end of the bar. *c)* Also there should be a short delay between each group of streets, to more clearly distinguish them. So first let's define an order for the three classes of streets:`34:T43c,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) + genderOrder[d.properties.gender] * 1500) .ease(d3.easeLinear) // use linear motion .attr('d',d => isMap ? d.properties.diagramPath : d.properties.mapPath) .on('end', function(d,i){ if (i == sortedStreets.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 }35:[] 2f:{"title":"Transitions from Maps to Diagrams, Part 2","cells":[{"id":0,"value":"md`# Transitions from Maps to Diagrams, Part 2\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`This is the second part of a two-part tutorial on creating animated transitions between map objects and diagrams using D3. [Catch up with the first part here](/@floledermann/transitions-from-maps-to-diagrams-part-1). If you are new to visualizing geodata with D3, you may want to check out my [basic tutorial](/@floledermann/drawing-maps-from-geodata-in-d3) first as well.\n\nIn this part, we will coordinate the animation of multiple entities on the map for a \"spill-out\" effect, for a recreation of the [“Street names by gender in Vienna” map](http://genderatlas.at/articles/strassennamen.html) I made for the [genderATlas project](http://genderatlas.at/). It features an animation that lines up all the streets of Vienna in a bar chart, representing the total length of streets named by female persons (${helpers.colorBox(color('female'))}), male persons (${helpers.colorBox(color('male'))}) and other entities (${helpers.colorBox(color('neutral'))}).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`----\n## Step 1: Loading the geometry, setting up the projection and path generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"md`These steps are covered in my [basic tutorial](https://beta.observablehq.com/@floledermann/drawing-maps-from-geodata-in-d3), so I will not explain the details here.\n\nHere's our GeoJSON data, containing all the streets of Vienna (extracted from [OpenStreetMap](https://www.openstreetmap.org/) using the [Overpass API](https://overpass-turbo.eu/)). Each street will have a property \\`gender\\` (one of \\`female\\`,\\`male\\` or \\`neutral\\`), and a property \\`length\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`Set up the projection and a path generator (the parameters [\\`width\\`](#width), [\\`height\\`](#height) and [\\`margin\\`](#margin) are defined in the [appendix](#width) of this notebook - you can adjust them there, if you want, to interactively change the size of all the maps in this notebook):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"streets = {\n let geojson = await d3.json('https://gist.githubusercontent.com/floledermann/92a56b764a92b55a857f5115236146b2/raw/b80ac35cc40de5651c6715c6abc4f8dd23b78c5e/streetnames_gender.geojson') \n \n // For saving bandwidth, I used single-letter property names in the data file,\n // which I am expanding here for readablity\n const gender = {\n n: 'neutral',\n m: 'male',\n w: 'female'\n }\n geojson.features.forEach(d => {\n d.properties.gender = gender[d.properties.g || 'n']; // property 'g' not set -> 'neutral'\n d.properties.length = d.properties.l;\n })\n \n return geojson\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], streets)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"pathGenerator = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`----\n## Step 2: Linearizing the paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"md`As explained in the [first part of the tutorial](/@floledermann/transitions-from-maps-to-diagrams-part-1), the idea is that for each geometry on the map, we create a normalized variant of the geometry for its representation in the diagram, so I copied the \\`normalizePath()\\` function from there.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"md`For determining the color of the street and its *y*-position in the diagram, we use simple ordinal scales.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"color = d3.scaleOrdinal().domain(['neutral','male','female']).range(['#bbbbbb','#4444ff','#ee0000'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"yCoord = d3.scaleOrdinal().domain(['neutral','male','female']).range([margin, margin + 40, margin + 80])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1071,"value":"md`To position the lines correctly along the *x*-axis, we need to calculate the total length of all streets in each category (we want the “longest” category to use the entire available width). While we're at it, we may as well count them in the same loop, to get some statistics about the street names of Vienna. ` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"stats = {\n \n let stats = {\n length: { neutral: 0, male: 0, female: 0 }, // total length in meters\n count: { neutral: 0, male: 0, female: 0 } // number of streets\n }\n \n streets.features.forEach(street => {\n let gender = street.properties.gender;\n\n stats.length[gender] += street.properties.length;\n stats.count[gender] += 1;\n })\n\n return stats\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"helpers.JSONView(stats)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"md`We can now set up a linear scale, converting any value along the total length to an *x*-coordinate in the diagram.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"xCoord = d3.scaleLinear().domain([0,stats.length.neutral]).range([margin, width - margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"md`For each street, the *x*-position of its vertices in the diagram should lie between two points \\`xMin\\` and \\`xMax\\` (corresponding to its position in the lined-up streets). Here's a factory that creates an interpolator function that we can pass to \\`normalizePath()\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"function xCoordinateGenerator(xMin, xMax, y) {\n let delta = xMax-xMin;\n return function(pos) {\n return [xMin + delta*pos, y];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"md`With these components in place, we can process our streets data so that for each street, we calculate its path for the map representation and its path for the diagram representation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"function prepareStreets(streetsArray) {\n \n // keep track of the length of streets processed so far\n let lengthCounter = {\n male: 0,\n female: 0,\n neutral: 0\n }\n \n // calculate the path geometries for each street\n streetsArray.forEach(d => {\n \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.gender]),\n xCoord(lengthCounter[d.properties.gender] + d.properties.length),\n yCoord(d.properties.gender)\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.gender] += d.properties.length\n \n })\n \n return streetsArray\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":987,"value":"preparedStreets = prepareStreets(streets.features)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1146,"value":"md`These streets can now be drawn to the map in a straightforward fashion. The code for the button is also relatively simple, swapping out one geometry for the other and triggering D3's path interpolation:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"streetSVG1 = {\n \n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // construct the path elements, using the pre-calculated map geometry\n svg.selectAll('path')\n .data(preparedStreets)\n .enter()\n .append('path')\n .attr('d', d => d.properties.mapPath)\n .attr('fill', 'none')\n .attr('stroke', d => color(d.properties.gender))\n .attr('stroke-width', 0.8)\n \n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"{\n let button = html``\n button.style.fontSize = \"1.2em\";\n \n // keep track of map state\n let isMap = true\n \n button.addEventListener('click', function() {\n d3.select(streetSVG1).selectAll('path')\n .interrupt() // cancel any ongoing transitions\n .transition()\n .duration(1500) \n .delay((d,i)=>i*2) // use a staggered delay, depending on the street's position in the data\n .ease(d3.easeLinear) // use linear motion\n // use the appropriate path for the current state\n .attr('d',d => isMap ? d.properties.diagramPath : d.properties.mapPath)\n \n button.value = isMap ? \"Transition to Map\" : \"Transition to Diagram\"\n \n isMap = !isMap\n })\n return button\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`----\n## Step 3: Sorting the paths for a controlled animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"genderOrder = ({\n neutral: 0,\n male: 1,\n female: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"md`To sort the streets from top to bottom (or reverse) on the map, I want to simply use the *latitude* (corresponding to *y*-coordinate) of the first point of the street. This is not an exact method (streets may have complex geometries), but for the purpose of a decorative animation, it's good enough. So here's a helper function to extract the first point of a geoJSON geometry.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"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":1159,"value":"md`We need to define two orders for our streets – one for transitioning to the diagram, the other to transition back to the map. Let's say we always want to process streets odered by category as defined above, but for transitioning to the diagram, we want to start at the top of the map, while for going back, we want to fill the map from bottom to top.\n\n[Sorting an array in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) takes a comparison function, indicating to the algorithm which of two objects should come first. So here are the comparison functions for the two sorted arrays:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"// Sorting function for going from diagram to map\nfunction mapOrder(a,b) {\n // first compare gender\n if ((genderOrder[a.properties.gender]) > (genderOrder[b.properties.gender])) return 1;\n if ((genderOrder[a.properties.gender]) < (genderOrder[b.properties.gender])) 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":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"// Sorting function for going from map to diagram\nfunction chartOrder(a,b) {\n // first compare gender\n if ((genderOrder[a.properties.gender]) > (genderOrder[b.properties.gender])) return 1;\n if ((genderOrder[a.properties.gender]) < (genderOrder[b.properties.gender])) 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":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`We can now augment the data with the information about the order of each street in the two sorted arrays.\n\n(Note that I am making a deep copy of the original data in the first line, to not interfer with the results of part 2 above - this is not needed if you create a standalone map)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"sortedStreets = {\n \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 streets2 = JSON.parse(JSON.stringify(streets.features))\n \n // use sorted arrays to assign a chartOrder and mapOrder property to each street\n streets2.sort(mapOrder)\n streets2.forEach((d,i) => d.properties.mapOrder = i)\n streets2.sort(chartOrder)\n streets2.forEach((d,i) => d.properties.chartOrder = i)\n \n // prepare streets like in part 2\n prepareStreets(streets2)\n \n return streets2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1260,"value":"md`Now everything can be put together in a straightforward fashion:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"streetSVG2 = {\n \n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // construct the element\n svg.selectAll('path')\n .data(sortedStreets)\n .enter()\n .append('path')\n .attr('d', d => d.properties.mapPath)\n .attr('fill', 'none')\n .attr('stroke', d => color(d.properties.gender)) \n .attr('stroke-width', 1)\n \n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"helpers.signature","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"md`Share this tutorial: ${tweet(\"999677202944987136\", {\n cards: 'hidden',\n width: 350\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`----\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`#### Map parameters\n\n(Change these to modify the size & layout of the maps in this notebook)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"d3 = require(\"https://d3js.org/d3.v5.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"import {tweet} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"import {helpers} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"helpers.defaultCSS","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}