30:[] 2e:{"title":"d3.interpolateZoom","cells":[{"id":0,"value":"# d3.interpolateZoom\n\n[d3.interpolateZoom](https://d3js.org/d3-interpolate/zoom#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://d3js.org/d3-zoom#zoom_transform). (A different interpolator can be specified with [*zoom*.interpolate](https://d3js.org/d3-zoom#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://d3js.org/d3-zoom) and [collection](https://observablehq.com/collection/@d3/d3-zoom)._","pinned":false,"hidden":false,"mode":"md"},{"id":457,"value":"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":"md"},{"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"},{"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"},{"id":155,"value":"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":"md"},{"id":268,"value":"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":"md"},{"id":162,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"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":"md"},{"id":368,"value":"w = 260","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"h = 190","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"The scale that will make the square of ${start[2]}×${start[2]}\nfit the ${w}×${h} viewport is:","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"k = Math.min(w, h) / start[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"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":"md"},{"id":555,"value":"translate = [w / 2 - start[0] * k, h / 2 - start[1] * k]","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"And finally we have:","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"transformStart = `translate(${translate}) scale(${k})`","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"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":"md"},{"id":348,"value":"interpolator = d3.interpolateZoom(start, end)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":83,"value":"viewof t = Inputs.range([0, 1], { label: \"parameter t\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"interpolator(t)","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"transform(t)","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"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":"md"},{"id":134,"value":"duration = interpolator.duration * 1.5 // 33% slower than the recommendation","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":442,"value":"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://d3js.org/d3-transition) module.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":671,"value":"[d3.interpolateZoom.rho](https://d3js.org/d3-interpolate/zoom#interpolateZoom_rho)(*rho*) allows to specify the curvature of the zoom interpolator. With a curvature of 0, the interpolation is linear—if the start and end have the same scale, the interpolator is simply a translation. The higher the value of *rho* (which defaults to 1.414), the more important the “dolly out” (or zoom out) movement is before zooming in again on the final destination. Configure it below and see how this changes the interpolation in the chart above.","pinned":false,"hidden":false,"mode":"md"},{"id":674,"value":"viewof rho = Inputs.range([0, 2], {\n value: Math.sqrt(2),\n precision: 6,\n label: \"curvature (rho)\",\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"transformRho = {\n const interpolator = d3.interpolateZoom.rho(Math.max(rho, 0))(start, end);\n return t => {\n const view = interpolator(t);\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 return `translate(${translate}) scale(${k})`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"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\", () => transformRho);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"scene = `\n \n ${d3\n .ticks(0, 260, 30)\n .map(x => ``)\n .join(\"\\n\")}\n ${d3\n .ticks(0, 190, 20)\n .map(y => ``)\n .join(\"\\n\")}\n \n\n \n \n \n \n\n \n \n \n \n \n \n\n \n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}