2c:null 2d:["$","title",null,{"children":"Implementing an SVG Zoom Animation Without a D3 Transition | Chris Henrick | Observable"}] 32:[] 30:{"id":"869ff7adff5e57ea","slug":"implementing-an-svg-zoom-animation-without-a-d3-transition","title":"Implementing an SVG Zoom Animation Without a D3 Transition","thumbnail":"6e6303c39e3e38c5b0354ae2c2f17bc93e3bec2d5e2f8bd0595b491df4337abd","access_level":"public","create_time":"$D2019-06-23T21:49:53.564Z","update_time":"$D2019-06-24T20:31:55.796Z","view_time":null,"first_public_time":"$D2019-06-24T00:26:22.916Z","fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":394,"publish_version":394,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"81d9c151229317f2","slug":"random","title":"random","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"Implementing an SVG Zoom Animation Without a D3 Transition","cells":[{"id":0,"value":"md`# Implementing an SVG Zoom Animation Without a D3 Transition\n\nWorking towards implenting an animated SVG zoom without using [d3-transition](https://github.com/d3/d3-transition).\n\nWhy you may ask? When using other JS frameworks that handle mainpulating the DOM, you may want to avoid having to use D3 and your framework of choice to both manipulate the DOM.\n\nThanks to [@Fil](https://observablehq.com/@fil) for the helpful [d3.interpolateTransformCss](https://observablehq.com/@d3/d3-interpolatetransformcss) notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`## First, an Identity Transformation\n\nThe \"identity transform\" sets the initial transform state of the map, which is the same as not applying a transform property at all. Defining this redundant property however will allow for setting the \\`0\\` or \"start\" value of our transform interpolator.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"map = { \n const s = svg``\n \n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`## Calculating the End Transform State\n\nTo calculate the \"end\" transform state, we need the coordinates of the center of the SVG object (California) we're zooming in on. Because we're dealing with a map and geographic data, this may be accomplished using [d3-geo](https://github.com/d3/d3-geo#paths)'s \\`geoPath.centroid()\\`. \n\nWe'll also need the width or height of the bounding box for the SVG object, which ever is greater. This can be done using \\`geoPath.bounds()\\`\n\nWe may then calculate the x, y, and size parameters for end transform state. See the [d3.interpolateZoom notebook](https://observablehq.com/@d3/d3-interpolatezoom) for background reading.\n\nFinally we may then calculate the end transform's translate and scale values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"center = path.centroid(cali)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"bounds = path.bounds(cali)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"padding = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"start = [center[0], center[1], bounds[1][1] + padding - bounds[0][1] + padding]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"end = [w / 2, h / 2, w / 2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"k = Math.min(w, h) / start[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"translate = [w / 2 - start[0] * k, h / 2 - start[1] * k]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"transformEnd = `translate(${translate}) scale(${k})`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"map2 = {\n const s = svg``\n \n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`## Interpolating the zoom\n\nNext, using [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg) we can return the correct CSS transform string while interpolating between the start and end transform states. Use the slider below to view how the interpolation affects the rendering of the SVG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"interpolatorTransform = d3.interpolateTransformSvg(\"translate(0, 0) scale(1)\", transformEnd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"interpolatorTransform(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof t = slider({ description: \"parameter t\", value: 0.5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"map3 = {\n const s = svg``\n \n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`## Animating the Zoom using requestAnimationFrame\n\nNow that we may interpolate between the start and end transform states, we may animate the zoom. Using the [\\`requestAnimationFrame\\` API](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is one way of accomplishing this.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof duration = slider({ description: \"parameter duration\", value: 1500, min: 500, max: 3000, step: 100 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"map4 = {\n replay;\n let startTime;\n let frame;\n let transformStr = interpolatorTransform(0);\n \n const s = svg``,\n g = d3.select(s).select(\"g\");\n\n function tick(timestamp) {\n if (!startTime) startTime = timestamp;\n const elapsed = timestamp - startTime;\n const t2 = elapsed / duration;\n \n if (elapsed < duration) {\n transformStr = interpolatorTransform(t2);\n\n g.attr(\"transform\", transformStr);\n \n frame = requestAnimationFrame(tick);\n }\n };\n\n requestAnimationFrame(tick); \n invalidation.then(() => cancelAnimationFrame(frame));\n\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"stateId = \"06\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"w = 960","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"h = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"statesPaths = () => states.map(d => \n svg``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"cali = states.find(d => d.id === stateId);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"states = topojson.feature(us, us.objects.states).features;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"us = await d3.json(\"https://unpkg.com/us-atlas@2.1.0/us/10m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"