29:null 2a:["$","title",null,{"children":"Transitions from Maps to Diagrams, Part 1 | Florian Ledermann | Observable"}] 2f:T57e,md`D3 comes with built-in [path string interpolation](https://github.com/d3/d3-interpolate#interpolateString) - this means we can simply supply an alternative value for the path's \`d\` attribute, and D3 will take care of smoothly interpolating all the vertices of the path from their old to their new position. There is only one caveat: to make the animation look smooth, both path expressions must have the same number of coordinates, so that points in the original expression can be matched up with their new coordinates in the new expression. For transitioning the street geometry to a horizontal line, this means we need to come up with the coordinates for that line, containing *as many subdivisions as the original path expression*, for the new value of the path's geometry. The *y* coordinate of all points is the same for a horizontal line - let's say we want to draw the line at the map's top margin. For the *x* coordinates, we want to start at the left margin position, and then equally divide the available space to the right margin in as many segments as we need. We can write a simple function that produces the coordinates of a point on the line, taking an *alpha* value in the range between 0 and 1 - passing in 0 will give the leftmost point, passing in 1 will give the rightmost point, and passing any value in between will give a point at the proportional distance between the two: `30:T5e0,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; } }31:[] 2d:{"id":"b6c566a3b3a914d8","slug":"transitions-from-maps-to-diagrams-part-1","title":"Transitions from Maps to Diagrams, Part 1","thumbnail":"3b9a10cb378721661afd6288eb1b2afc580dc11903cd919f481063a4bec5cc7c","access_level":"public","create_time":"$D2018-05-04T06:34:01.397Z","update_time":"$D2018-05-25T05:44:36.435Z","view_time":null,"first_public_time":"$D2018-05-08T18:20:06.356Z","has_unpublished_edits":null,"fork":false,"stars":40,"starred":false,"owner":{"type":"team","id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":"starter_2024"},"version":716,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null}],"members":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":{"id":"6a8c44e5a4065574","slug":"tutorials","title":"Tutorials","owner":{"id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann"}},"type":"notebook","body":{"title":"Transitions from Maps to Diagrams, Part 1","cells":[{"id":0,"value":"md`# Transitions from Maps to Diagrams, Part 1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`This is the first part of a [two-part tutorial](/@floledermann/transitions-from-maps-to-diagrams-part-2) on creating animated transitions between map objects and diagrams using D3. This technique will allow you to create maps simliar to the [map of street names and gender in Vienna](http://genderatlas.at/articles/strassennamen.html) that I created for the [genderATlas project](http://genderatlas.at/).\n\nIf you are new to creating maps with D3, you may want to have a look at my [tutorial on drawing maps from geodata in D3](https://beta.observablehq.com/@floledermann/drawing-maps-from-geodata-in-d3) first for an introduction of the basic techniques used to render geodata in D3.\n\nIn this part, we will start with transitioning a single entity on the map to a more abstract representation - like a straight line, for example. Here's what the result of this part of the tutorial will look like:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"preview = {\n \n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n svg.style('display', 'block')\n \n // construct the element\n svg.append('path')\n .datum(street)\n .attr('d', pathGenerator)\n .attr('fill', 'none')\n .attr('stroke', '#999999')\n .attr('stroke-width', '2')\n \n let button = html``\n button.style.marginBottom = \"0.5em\"\n \n let isMap = true\n \n function anim() {\n svg.select('path')\n .interrupt() // cancel any ongoing transitions\n .transition()\n .duration(1000) \n .ease(d3.easeLinear) // use linear motion\n .attr('d',isMap ? diagramPath : mapPath)\n .on('end', function() { d3.timeout(anim, 1000) })\n \n button.value = isMap ? \"Transition to Map\" : \"Transition to Diagram\"\n \n isMap = !isMap\n }\n \n d3.timeout(anim, 1500)\n\n // pass to Observable to represent this block\n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`----\n## Step 1: Loading the geometry, setting up the projection and path generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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/)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"streets = d3.json('https://gist.githubusercontent.com/floledermann/92a56b764a92b55a857f5115236146b2/raw/b80ac35cc40de5651c6715c6abc4f8dd23b78c5e/streetnames_gender.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`We can retrieve a single street object from our geodata, using [\\`Array.filter()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to extract the street of a given name from the array of streets:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"street = streets.features.filter(street => street.properties.name == \"Billrothstraße\")[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], street)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"pathGenerator = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`----\n## Step 2: Plotting the street to the map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`We can use the path generator to transform the GeoJSON object into an [SVG path expression](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths), and plot the \\`path\\` representing the street to the map - that's the basic pattern for mapping out geodata in D3:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"mapPath = pathGenerator(street)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"{\n \n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // construct the element\n svg.append('path')\n .datum(street)\n .attr('d', pathGenerator)\n .attr('fill', 'none')\n .attr('stroke', '#999999')\n .attr('stroke-width', '1.5')\n \n // pass to Observable to represent this block\n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"md`----\n## Step 3: Linearizing the path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"getLinearCoords = function(pos) {\n return [Math.round(margin+(width-2*margin)*pos), margin];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`To compose the new path expression from these coordinates, we need a function that processes the original expression, and replaces each drawing command with an 'L' (lineto) or 'M' (moveto) command, substituting the normalized coordinates for the original ones. The \\`normalizePath\\` function below does just that.\n\n'M' (moveto) commands within a path lead to gaps in the normalized path (because the line will skip from one coordinate to the next). So if we want to close those gaps, we can simply re-use the last coordinate pair for the destination of 'M', effectively reducing the gap to a length of zero. This is what the \\`closeGaps\\` parameter controls.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`----\n## Step 4: Putting it all together`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`We can now generate our normalized path, and put together the code for triggering the transition:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"diagramPath = normalizePath(mapPath, getLinearCoords)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"streetSVG = {\n \n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // construct the element\n svg.append('path')\n .datum(street)\n .attr('d', pathGenerator)\n .attr('fill', 'none')\n .attr('stroke', '#999999')\n .attr('stroke-width', '2')\n \n // pass to Observable to represent this block\n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"button = {\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n let isMap = true\n \n button.addEventListener('click', function() {\n d3.select(streetSVG).select('path')\n .interrupt() // cancel any ongoing transitions\n .transition()\n .duration(3000) // make it sloooooow\n .ease(d3.easeLinear) // use linear motion\n .attr('d',isMap ? diagramPath : 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"md`... of course we could transition to a different geometry, e.g. to a circle / pie chart, by simply supplying a different function for calculating the normalized geometry -- this time without closing the gaps, and also transitioning to a different line width...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"getCircleCoords = function(pos) {\n \n let center = [width/2, height/2],\n r = Math.min(width, height)/2 - margin\n \n // return coordinates on a half-circle\n return [center[0] + Math.sin((pos-0.5)*Math.PI) * r, center[1] + Math.cos((-pos-0.5)*Math.PI) * r];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"circlePath = normalizePath(mapPath, getCircleCoords, false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"streetSVG2 = {\n \n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // construct the element\n svg.append('path')\n .datum(street)\n .attr('d', circlePath)\n .attr('fill', 'none')\n .attr('stroke', '#999999')\n .attr('stroke-width', 4)\n \n // pass to Observable to represent this block\n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"{\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n let isMap = false\n \n button.addEventListener('click', function() {\n d3.select(streetSVG2).select('path')\n .interrupt() // cancel any ongoing transitions\n .transition()\n .duration(1000) // make it looooong\n .ease(d3.easeLinear) // use linear motion\n .attr('d',isMap ? circlePath : mapPath)\n .attr('stroke-width', isMap ? 4 : 2)\n \n button.value = isMap ? \"Transition to Map\" : \"Transition to Diagram\"\n \n isMap = !isMap\n })\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`In [part 2 of the tutorial](https://beta.observablehq.com/@floledermann/transitions-from-maps-to-diagrams-part-2), we will line up all the streets of Vienna to form a bar chart.\n\nFeedback? Comments? Questions? You can contact me on [Twitter](https://twitter.com/floledermann)!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"html`

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"// currently unused\nviewof streetName = html`