2b:null 2c:["$","title",null,{"children":"d3.interpolateZoom | Chris Henrick | Observable"}] 31:T415,scene = ` ${d3 .ticks(0, 260, 30) .map(x => ``) .join("\n")} ${d3 .ticks(0, 190, 20) .map(y => ``) .join("\n")} `32:[] 2f:{"id":"2c821e192783b1d3","slug":null,"title":"d3.interpolateZoom","thumbnail":"0cfda01936307f893561636c0d905915ef00eef4f50be514fa67f7d062e06db7","access_level":"unlisted","create_time":"$D2019-12-11T23:46:45.336Z","update_time":"$D2019-12-11T23:47:41.725Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"a49bd168a8b5e662","slug":"d3-interpolatezoom","title":"d3.interpolateZoom","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":675,"publish_version":675,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3.interpolateZoom","cells":[{"id":0,"value":"md`# d3.interpolateZoom\n\n[d3.interpolateZoom](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateZoom) implements Jarke van Wijk and Wim Nuij’s “Smooth and efficient zooming and panning” ([PDF](http://www.win.tue.nl/~vanwijk/zoompan.pdf)) to preserve context while zooming. It is used internally by d3-zoom when calling [*zoom*.transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform). (A different interpolator can be specified with [*zoom*.interpolate](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_interpolate)).\n\n_This notebook focuses on details of how d3.interpolateZoom works — if you are looking for examples of how to implement a panning and zooming behavior in D3, check out the d3-zoom [homepage](https://github.com/d3/d3-zoom) and [collection](https://observablehq.com/collection/@d3/d3-zoom)._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`d3.interpolateZoom is an interpolation method that applies between two views (start and end), each represented by an array of three coordinates: [cx, cy, width]. The two first coordinates represent the center of the viewport, and the last one is its size — usually the height or width of the objects that fill the viewport at that moment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"start = [30, 30, 40] // start with a view centered at [30, 30] and a size of 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"end = [135, 85, 60] // end with a view centered at [135, 80] and a size of 60","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`Let’s figure two objects on a grid, their respective bounding boxes being fully contained in these two views (with a small margin to make it more comfortable). The details that draw the scene are not very interesting — it’s just static SVG contents (see [#scene](#scene) in the Annex).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`We begin by drawing the scene in a view that shows it whole — applying the identity transform: translate(0,0) scale(1).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`To focus on the first view, we need to figure out a transform such that the red bounding-box neatly fits in the viewport. Discounting a small margin, the viewport’s dimensions (in SVG units) are:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"w = 260","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"h = 190","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`The scale that will make the square of ${start[2]}×${start[2]}\nfit the ${w}×${h} viewport is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"k = Math.min(w, h) / start[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`Now that the scale is set, we need to figure out how to move the bounding box’s center to the center of the viewport. The formula is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"translate = [w / 2 - start[0] * k, h / 2 - start[1] * k]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`And finally we have:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"transformStart = `translate(${translate}) scale(${k})`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"start","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"end","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`We now generalize the formula for any view. Combining it with the zoom interpolator, we can define the transform as a function of a parameter *t*, going from the start view for *t*=0, to the end view for *t*=1:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"interpolator = d3.interpolateZoom(start, end)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"function transform(t) {\n const view = interpolator(t);\n\n const k = Math.min(w, h) / view[2]; // scale\n const translate = [w / 2 - view[0] * k, h / 2 - view[1] * k]; // translate\n\n return `translate(${translate}) scale(${k})`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof t = slider({ description: \"parameter t\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"curInterpolator = interpolator(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"curTransform = transform(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"demo = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`The zoom interpolator returned by this method also exposes a *duration* property, which encodes the recommended transition duration in milliseconds. This duration is based on the path length of the curved trajectory through x,y space. If you want to a slower or faster transition, multiply this by an arbitrary scale factor.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"duration = interpolator.duration * 1.5 // 33% slower than the recommendation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"{\n await visibility(replay);\n const s = svg``;\n yield s;\n\n const view = d3.select(s).select(\"#view\");\n\n view\n .transition()\n .delay(1000)\n .duration(duration)\n .attrTween(\"transform\", () => transform);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md`The final animation just loops back and forth between the two views, using the zoom interpolator going forward from 0 to 1, then backward from 1 to 0, ad libitum. This animation uses the [d3-transition](https://github.com/d3/d3-transition) module.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"{\n const s = svg``;\n\n const transform_backward = t => transform(1 - t);\n let forward = false;\n\n d3.select(s)\n .select(\"#view\")\n .call(transition);\n\n return s;\n\n function transition(view) {\n forward = !forward;\n view\n .transition()\n .delay(2000)\n .duration(duration)\n .attrTween(\"transform\", () => (forward ? transform : transform_backward))\n .on(\"end\", () => transition(view));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`---\n## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"// This documentation is released under the CC BY-SA 4.0 license.\n// https://creativecommons.org/licenses/by-sa/4.0/\nLICENSE = \"cc-by-sa-4.0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"