31:[{"id":"a89d2fadb80300ac3939f84f70f7b721aca5b1f8f4e25f5f636712f9a5e22a5f9fc57db086db51db860757e3d2994a9db747f89277a8b3fd604f106b21b34c53","href":"https://static.observableusercontent.com/files/a89d2fadb80300ac3939f84f70f7b721aca5b1f8f4e25f5f636712f9a5e22a5f9fc57db086db51db860757e3d2994a9db747f89277a8b3fd604f106b21b34c53","name":"image@5.png","type":"image/png","lastModified":1692593954385.931,"size":105594},{"id":"04bcc5b02d78d4eeaa5f29e2732ce1f83a14c90ce9cfa83c89afd14c95214214740aab7eb4e703d07c61285643706b0b6d68ec99c7751bd0b8e7cd5796092c0c","href":"https://static.observableusercontent.com/files/04bcc5b02d78d4eeaa5f29e2732ce1f83a14c90ce9cfa83c89afd14c95214214740aab7eb4e703d07c61285643706b0b6d68ec99c7751bd0b8e7cd5796092c0c","name":"didoesdigital-WIP-circle-to-snake-morph-animation-one-direction.gif","type":"image/gif","lastModified":1692611086916.904,"size":454841},{"id":"6fa11411bcca67df021b32c7304ef4f8be3b065d5aa12ac215a6a8eb2a187aabbc7455a75c265948d235ad219f9c67123b45c8e2ea2b11565511fc9440777c4b","href":"https://static.observableusercontent.com/files/6fa11411bcca67df021b32c7304ef4f8be3b065d5aa12ac215a6a8eb2a187aabbc7455a75c265948d235ad219f9c67123b45c8e2ea2b11565511fc9440777c4b","name":"image.png","type":"image/png","lastModified":1692592376040.802,"size":24635},{"id":"3e331c4a80ef30fb5004e28c3184ed86df0d8b659c402f40c069046351f6b6886356008395a93f082944d49e67e2d75b5e96de967017a143d81d0e9ed8a81c6c","href":"https://static.observableusercontent.com/files/3e331c4a80ef30fb5004e28c3184ed86df0d8b659c402f40c069046351f6b6886356008395a93f082944d49e67e2d75b5e96de967017a143d81d0e9ed8a81c6c","name":"image@1.png","type":"image/png","lastModified":1692592461040.231,"size":135352},{"id":"22470d39a081bad5871d22142633fa881a75a736b185d3169f8f72d9c828af3d7619f772b1c3b9515addd275f9c55b3490d79a38cbe18c1c4c9707da4f1b108a","href":"https://static.observableusercontent.com/files/22470d39a081bad5871d22142633fa881a75a736b185d3169f8f72d9c828af3d7619f772b1c3b9515addd275f9c55b3490d79a38cbe18c1c4c9707da4f1b108a","name":"image@2.png","type":"image/png","lastModified":1692592536878.271,"size":114641},{"id":"c5271498c053c323a801113701d178c3312f13af5de873b04cbed21a08027c3a55ab822d799efbc10f46c4984ac1876b347d022b0a67fed68431982b362204f6","href":"https://static.observableusercontent.com/files/c5271498c053c323a801113701d178c3312f13af5de873b04cbed21a08027c3a55ab822d799efbc10f46c4984ac1876b347d022b0a67fed68431982b362204f6","name":"image@3.png","type":"image/png","lastModified":1692592695136.435,"size":107166},{"id":"d0fbcc743717f5dc5915c80491e8451b2b2e306f2db9f315267264cfd5271683439bc013941ad32bffe6ff690ed33c388e3e7c6b9fe8cd9733522194882cff4d","href":"https://static.observableusercontent.com/files/d0fbcc743717f5dc5915c80491e8451b2b2e306f2db9f315267264cfd5271683439bc013941ad32bffe6ff690ed33c388e3e7c6b9fe8cd9733522194882cff4d","name":"didoesdigital-circle-with-4-points.png","type":"image/png","lastModified":1692593060403.25,"size":223148},{"id":"4f10e06e33b6436eea1deb744aaabc63bbb7da6a1a0dbd37799d3ba6f14ffd379927eb8150250a59eb872130035daaa65d831147cc0c0429621aa49b6bfbaaec","href":"https://static.observableusercontent.com/files/4f10e06e33b6436eea1deb744aaabc63bbb7da6a1a0dbd37799d3ba6f14ffd379927eb8150250a59eb872130035daaa65d831147cc0c0429621aa49b6bfbaaec","name":"didoesdigital-morphing-insufficient-points.gif","type":"image/gif","lastModified":1692593113051.953,"size":570610},{"id":"b80fea9944401cfddd11d5d882c9b48620e082579b2bbf355523bd05b08a4a3f03b079cf68e01c74501df230efe00776e23a223d81e6a62223cf2f409cdb9a27","href":"https://static.observableusercontent.com/files/b80fea9944401cfddd11d5d882c9b48620e082579b2bbf355523bd05b08a4a3f03b079cf68e01c74501df230efe00776e23a223d81e6a62223cf2f409cdb9a27","name":"didoesdigital-morphing-insufficient-points-back.gif","type":"image/gif","lastModified":1692593189380.621,"size":326709},{"id":"53599f5dec2a346a80cd56fdd5e7af5eee0f689453c33552d15afeabb420b1a4fab4f4be6b808549dcb97e8807155012e1a7fb400b6f42728d12e8b9f17291c3","href":"https://static.observableusercontent.com/files/53599f5dec2a346a80cd56fdd5e7af5eee0f689453c33552d15afeabb420b1a4fab4f4be6b808549dcb97e8807155012e1a7fb400b6f42728d12e8b9f17291c3","name":"didoesdigital-circle-with-many-points.png","type":"image/png","lastModified":1692593243393.587,"size":129871},{"id":"95909f9f48980815501f139ac3e5132585f087ab7ecbd37d54d4d955b4588948a003c236fb2aa44ab29eef2ad10ac449caf354c7e5103920a68f7c94b6fca94c","href":"https://static.observableusercontent.com/files/95909f9f48980815501f139ac3e5132585f087ab7ecbd37d54d4d955b4588948a003c236fb2aa44ab29eef2ad10ac449caf354c7e5103920a68f7c94b6fca94c","name":"image@4.png","type":"image/png","lastModified":1692593317382.063,"size":145164},{"id":"9649249cfcba4144bc9955c8a2dc233ecbf134fe3e6d1dbb30c2eeb3d3acf1d5092dc9e0fe9911115f288b3ced77423393c2f45ba7a06e77d08da8166fa3cfe1","href":"https://static.observableusercontent.com/files/9649249cfcba4144bc9955c8a2dc233ecbf134fe3e6d1dbb30c2eeb3d3acf1d5092dc9e0fe9911115f288b3ced77423393c2f45ba7a06e77d08da8166fa3cfe1","name":"didoesdigital-morphing-tangle.gif","type":"image/gif","lastModified":1692593363811.648,"size":347938},{"id":"79b09ff1435494ade0d8b6a71f5f40390ccc2716ffdeaf318a57b37a4d13f479f83eb37ef10d8c4caab5e8f3a97b5d6b08f36eb70ed40098d421b48c4c1fcf03","href":"https://static.observableusercontent.com/files/79b09ff1435494ade0d8b6a71f5f40390ccc2716ffdeaf318a57b37a4d13f479f83eb37ef10d8c4caab5e8f3a97b5d6b08f36eb70ed40098d421b48c4c1fcf03","name":"svg-reverse-path-codepen-by-gabi.png","type":"image/png","lastModified":1692593405969.67,"size":172005},{"id":"5768794bbcb68d5f5aa91932c80a028a02b9c491face3bb76dd345a10a66afdf8c584ff42b0c9c9ddea2728a75a516421a456280a9c3e30b1bfefb7529c382c9","href":"https://static.observableusercontent.com/files/5768794bbcb68d5f5aa91932c80a028a02b9c491face3bb76dd345a10a66afdf8c584ff42b0c9c9ddea2728a75a516421a456280a9c3e30b1bfefb7529c382c9","name":"image@6.png","type":"image/png","lastModified":1692594565161.039,"size":102707},{"id":"5768794bbcb68d5f5aa91932c80a028a02b9c491face3bb76dd345a10a66afdf8c584ff42b0c9c9ddea2728a75a516421a456280a9c3e30b1bfefb7529c382c9","href":"https://static.observableusercontent.com/files/5768794bbcb68d5f5aa91932c80a028a02b9c491face3bb76dd345a10a66afdf8c584ff42b0c9c9ddea2728a75a516421a456280a9c3e30b1bfefb7529c382c9","name":"image@7.png","type":"image/png","lastModified":1692594595111.492,"size":102707},{"id":"9031317d7c1d74d3239077b8725b1e5620f7f3a45c69d9e89498d17afccebbb026f27575fe2c31d6d9b4581fc1cddde61c15629d6be23fd50b0209c7608dd46d","href":"https://static.observableusercontent.com/files/9031317d7c1d74d3239077b8725b1e5620f7f3a45c69d9e89498d17afccebbb026f27575fe2c31d6d9b4581fc1cddde61c15629d6be23fd50b0209c7608dd46d","name":"didoesdigital-morphing-snakes-to-circles.gif","type":"image/gif","lastModified":1692611232854.548,"size":177234}] 2f:{"title":"Morphing shapes into circles using D3","cells":[{"id":0,"value":"# Morphing shapes into circles using D3","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"In my data story, [Living among snakes in Queensland, Australia](https://didoesdigital.com/snakes/), I needed to morph a snake shape into a circle. This is the snake shape:","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"![Screenshot of 1 snake icon with a dark stroke and pink fill](${await FileAttachment(\"image.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"For the first part of the story, I used a force simulation to arrange snake icons where each snake icon represented an individual snake I saw in the wild:","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"{\n const image = await FileAttachment(\"image@2.png\").image();\n image.alt = \"Screenshot of 43 snake icons representing snakes caught on camera\"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"For the later part of the story, I used a force simulation to arrange circles where each circle represented a species, which could include thousands of individual snakes in the wild.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"{\n const image = await FileAttachment(\"image@3.png\").image();\n image.alt = \"Screenshot of 40 circles representing species, highlighting the land snakes\"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"To show the relationship between the species circles and the individual snakes, I temporarily morphed the circles of species I'd seen into snake shapes and back to circles before continuing with the story.","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"{\n const image = await FileAttachment(\"didoesdigital-morphing-snakes-to-circles.gif\").image();\n image.alt = \"Animation of circles to snakes and back\"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"## How to morph between shapes\n\nWhile there are popular libraries, such as [GSAP](https://greensock.com/morphsvg/) and [Flubber](https://github.com/veltman/flubber), that tackle the problem of morphing between SVG shapes well, I wanted to keep this project simple. Given I only wanted to switch between a snake `path` and a circle, I decided to use [D3's built-in transition module](https://github.com/d3/d3-transition/tree/main).\n\n*Note: In case you're interested, while the [Flubber](https://github.com/veltman/flubber) repo shows no updates in the last 4 years, [Fil](https://observablehq.com/@fil/) tells me it has great stability and the lack of recent updates doesn't cause issues.*","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"\n## D3 path transitions require the same number of points\n\nTo create a smooth visual transition between `path`s using D3, it's useful to have the same number of points in both paths. I'll explain that visually as I step through the steps I took to implement my morphing steps.\n","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"## Starting with a circle\n\nIf you create a circle in an app like Figma or hand-written SVG, it will produce an SVG `circle` element like this:\n\n```html\n\n```\n\nThat circle will be rendered like this:\n","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"## Converting a circle to a path\n","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"\nIn Figma, I used the `Flatten` command (⌘E) to convert that `circle` element into a `path` element:\n\n```html\n\n```\n\nThat effectively renders the same circle using different markup:\n","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"\n","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"## D3 Transition problem #1: number of points\n\nIn Figma, if I edit the circle you can see the control points. By default, there are 4 on this circle (top, right, bottom, left):\n","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"{\n const image = await FileAttachment(\"didoesdigital-circle-with-4-points.png\").image();\n image.alt = \"Screenshot of a circle in Figma showing 4 points on it\"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"When D3 tries to transition those points to their new home in the snake path, what should it do with all the new additional snake points that didn't exist in the circle `path`? Well, it just whacks them on the page:\n","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"![Animation of a circle with a bunch of snake points added before morphing the remaining circle points to the rest of the snake](${await FileAttachment(\"didoesdigital-morphing-insufficient-points.gif\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"Similarly, when D3 tries to transition a bunch of snake points into the circle path and they have no home there, it just demolishes them:","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"![Animation of snakes suddenly losing a bunch of snake points before morphing the remaining snake points back into a circle](${await FileAttachment(\"didoesdigital-morphing-insufficient-points-back.gif\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"## Solution #1: add more points\n\nIn Figma, select the circle and add a bunch more anchor points. See this StackExchange post on [How to add an anchor point/node in Figma?](https://graphicdesign.stackexchange.com/questions/107858/how-to-add-an-anchor-point-node-in-figma)\n","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"\n{\n const image = await FileAttachment(\"didoesdigital-circle-with-many-points.png\").image();\n image.alt = \"Screenshot of Figma circle with many editable points on it\"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"How many points? Here I selected the snake and manually counted the points:","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"{\n const image = await FileAttachment(\"image@4.png\").image();\n image.alt = \"Screenshot of Figma showing edited snake with many points on it\"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"## Problem #2: ordering\n\nThe initial circle path I produced was in the wrong order, so it looked quite tangled when transitioning the points:\n","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"![Animation of circle to snake tangled morphing](${await FileAttachment(\"didoesdigital-morphing-tangle.gif\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"## Solution #2: reverse path\n\nThere are different ways to do this but the easy way I did it was by pasting the path into this [Reverse SVG path Codepen by Gabi](https://codepen.io/enxaneta/pen/WWPYqQ).","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"{\n const image = await FileAttachment(\"svg-reverse-path-codepen-by-gabi.png\").image();\n image.alt = \"Screenshot of Reverse SVG path UI with two textareas for input and output and two shapes showing direction markers\"\n image.width = 640;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"## Problem #3: centered circles\n\n[SVG circles](http://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle) are defined using a `cx` property for the x-axis coordinate of the center of the circle and a `cy` property for the y-axis coordinate of the center of the circle. When I switched my circles from actual `circle` elements to circles drawn with a `path` element, the positioning effectively moved from the center of the circle to the top–left to start drawing the path.\n","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"\n## Solution #3: transform the position of paths\n\nI specified each node as a `g` (group) element and placed the snake/circle `path` elements inside. Here's a simplified example of the output:\n","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"~~~html\n\n \n\n~~~\n","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"The `transform` property's `translate` value is calculated by subtracting the node radius from the x/y values:\n\n```js\nnodes.attr(\n \"transform\",\n (d) =>\n `translate(\\${d.x - nodeRadius}, \\${d.y - nodeRadius})`\n);\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"## The actual transitions\n\nHere is a simplified version of the D3 transitions to morph between SVG paths:\n","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"```js\n // Initial / final circle paths:\n gNodes\n .transition()\n .duration(200)\n .call((g) => {\n g.selectAll(\"path\")\n .transition()\n .duration(500)\n .attr(\"d\", circlePath);\n })\n\n // Snake paths:\n gNodes\n .transition()\n .duration(200)\n .call((g) => {\n g.selectAll(\"path\")\n .transition()\n .duration(500)\n .attr(\"d\", (d) =>\n d.showSnake === true\n ? snakePath\n : circlePath\n )\n```","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"For the complete, actual code used, see my [snakes repo](https://github.com/didoesdigital/snakes/) [`script.js`](https://github.com/didoesdigital/snakes/blob/main/src/script.js).\n","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"## Final tweaks","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"I think I miscounted the number of anchor points and I may need to re-arrange the circle path points so that the first point in the path more closely matches the first point in the snake path because every so often I see a quick snap of a couple of points that shows this slightly distorted snake:\n","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"![Screenshot of distorted snakes](${await FileAttachment(\"image@5.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"Aaaand while writing this I realised I could at least mitigate the effect with some CSS to reduce the [`stroke-miterlimit`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) and round off the [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap):\n\n```js\ng path {\n stroke-miterlimit: 1;\n stroke-linecap: round;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"![Screenshot of slightly less janky snake icons](${await FileAttachment(\"image@7.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"Ideally I'd track down the missing detail but there are more important things in life! That's enough for this project.","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"# Conclusion\n\nFor a hasty solution to path transitions in D3 without extra libraries, I'm happy with the result. I hope this helps you too!","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"*Bonus! [Sebastian Lammers](https://sebastianlammers.com/) made a [Svelte demo of this](https://svelte.dev/repl/e926cd8b1cb74d8e8759b7f09f06e379?version=4.2.0) 🐍🥳*","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}