Zoom Transitions

100%

Zoom Transitions

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 15, 2013

Animated grid lines on a canvas demonstrate D3’s zoom transitions, which smoothly pan and scale the view every five seconds to a new random location. The example uses `d3.behavior.zoom` with linear scales, and `transition.call` to invoke the zoom’s translate and event methods. Grid rendering relies on the Canvas 2D API, drawing vertical and horizontal lines based on the current domain, with line width scaling by zoom level.

AI-generated description

Another new feature for D3 3.3 is automatic transitions for the zoom behavior. Like the new brush transitions and earlier axis transitions, zoom transitions are initiated via transition.call. Best of all, the zoom behavior applies van Wijk and Nuij’s “Smooth and efficient zooming and panning” to preserve context while zooming!

This example jumps to a new random location every five seconds. Enjoy the trip!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoom Transitions

A thousand points arranged in a phyllotaxis spiral zoom smoothly between random targets. Every 2.5 seconds, the d3-zoom transform animates to center a newly selected point, shown in red, at the viewport’s center. The example uses d3.zoom’s `transform` method within a d3.transition, rendering the points to a Canvas 2D context via the `zoom` event handler.

Mmbostock

85% match

Loading thumbnail…

Zoom + Pan

A grid of axes fills the viewport, with white gridlines on a gray background. Two buttons, "Zoom In" and "Zoom Out," trigger programmatic zooming. The view uses `d3.behavior.zoom` to manage pan and zoom state, with `d3.scale.linear` and `d3.svg.axis` for the axes. Clicking a button adjusts the zoom scale and translates to keep the center point fixed, then animates the transition with `svg.transition().duration(750)`, calling the zoom event to re-render the axes.

Mmbostock

82% match

Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics

82% match

Loading thumbnail…

Zoom + Pan

This example demonstrates interactive zooming and panning on a simple coordinate grid with axes, controlled both by mouse gestures and on-screen buttons. The visualization uses d3.behavior.zoom to link the scale domains to user input, with the axes redrawn on each zoom event. Button clicks trigger animated transitions that adjust the zoom scale or translate the view, recalculating the center point in data space to maintain focus. The rendering uses SVG with d3.v3, and the code explicitly handles coordinate conversion between screen and data space via the zoom object's scale and translate properties.

663anp3ca

81% match

Loading thumbnail…

Zoom + Pan

A zoomable and pannable SVG viewport displays a large grid with axes, controlled by the mouse. The example shows how to programmatically reset the zoom state using a button. It uses d3.behavior.zoom with d3.scale.linear domains, and a transition tween with d3.interpolate to animate the domain reset. The axes and grid are rendered as SVG shapes, and zoomed() rebinds the axes to the updated scales during the transition.

Mmbostock

81% match

Loading thumbnail…

Pan & Zoom I

A canvas displays a phyllotaxis pattern of 2,000 points, which can be panned and zoomed interactively. Using d3.zoom, the current transform is applied directly to the canvas context via translate and scale, redrawing all points on each zoom event. The data is generated procedurally with a phyllotaxis function, and the view is transformed rather than the data itself.

Mmbostock

80% match

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning across a 2D Cartesian coordinate system with visible axes. The view initially centers on the origin, and the user can pan by dragging and zoom by scrolling, with the axis tick marks and grid lines updating accordingly. A "Reset" button restores the original scale and translation. The implementation uses d3.behavior.zoom with linear scales for the x and y axes, and calls the axis render functions within the zoom event handler. The SVG rendering includes a light gray background rectangle and white axis strokes.

Mmbostock

80% match

Loading thumbnail…

Zoom + Pan

This example demonstrates how to pan and zoom a chart using D3.js v3. It renders an SVG with axes and a filled background rectangle, using linear scales for the x- and y- dimensions. The `d3.behavior.zoom` API links the zoom behavior to the scales, allowing mouse wheel and drag interactions to rescale the axes. When zooming occurs, the axes are redrawn to reflect the updated scale ranges. The code sets a zoom scale extent between 1 and 32, and uses `d3.svg.axis` to produce the tick marks and grid lines.

Mmbostock

80% match