Zoom + Pan

100%

✓ Published0🌍 Public

Last edited Apr 9, 2020

Created on Oct 15, 2012

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.

AI-generated description

After panning or zooming with the mouse, click the "Reset" button in the top-right corner to transition back to the default viewport. This example demonstrates setting the domain of scales attached to a zoom behavior programmatically. After the domains are set, you must rebind them to the behavior.

See also a simpler version without transitions and a version with buttons that zoom around the center.

gpl-3.0 Licensed

Similar vizzes

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

92% 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

89% 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

89% 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

87% 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

86% match

Loading thumbnail…

Pan & Zoom Axes

This example demonstrates a zoomable scatterplot where panning and zooming are controlled by the d3-zoom library. The visualization shows a colorful gradient rectangle as the data view, with axes that rescale dynamically through `transform.rescaleX` and `transform.rescaleY`. Users can drag to pan and scroll to zoom, with a button to reset the view via `d3.zoomIdentity`. The SVG rendering uses d3-scaleLinear for axes and a text gradient inspired by Nadieh Bremer.

Mmbostock

84% match

Loading thumbnail…

Pan & Zoom Axes

This example shows interactive pan and zoom axes, where a colorful gradient-filled rectangle serves as the plotting area and responds to user drags and wheel gestures. The visualization uses d3-zoom to handle transforms, which rescale the linear scales for both the x and y axes via *transform*.rescaleX and *transform*.rescaleY, updating the axis tick marks and grid lines accordingly. The same transform is applied directly to the SVG rectangle using the SVG transform attribute, while a reset button triggers a smooth transition back to the initial view. The code relies on d3.axisBottom and d3.axisRight to render the axes, with a custom linear gradient defined in SVG defs for the background fill.

GGerardoFurtado

82% match

Loading thumbnail…

D3 Zoom

A D3 zoom interface demonstrates interactive panning and scaling within an SVG coordinate system. A single green circle, positioned through linear scales, responds to mouse wheel and drag gestures that trigger the `d3.zoom` behavior. The example simultaneously updates axis tick marks via `transform.rescaleX` and `rescaleY`, while displaying the current translation values and zoom multiplier in separate HTML divs. The visualization renders with SVG elements, using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to maintain spatial mapping during the zoom transform.

WWRCIECH

82% match