Skip to main content
100%

Zoom + Pan

✓ Published0🌍 Public
ZZhengYingqian
Last edited May 23, 2018
Created on May 23, 2018

This example demonstrates D3’s zoom and pan behavior applied to a simple coordinate system with axes. The visualization shows a blank gray plotting area where users can zoom up to 32× and pan freely by dragging, with the x-axis updating dynamically during the interaction. Built with D3 v3, it uses `d3.behavior.zoom` bound to linear `d3.scale` objects and renders axes via `d3.svg.axis` in SVG. The grid lines are drawn as axis ticks extending across the full chart height and width, with the y-axis intentionally omitted from updates during zooming.

AI-generated description

An example of d3.behavior.zoom applied using x- and y-scales. This example can be extended with programmatic control to animate between preset views.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3892919'>Pan+Zoom</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning on a two-dimensional Cartesian plane using D3’s `d3.behavior.zoom` with linear `x` and `y` scales. Dragging the mouse pans the view, while the mouse wheel zooms, with the scale extent limited to 1–32×. The code renders an SVG with a light gray background, a bottom x-axis with full-height tick lines, and a left y-axis with five ticks; during zoom events, the `zoomed` handler updates the x-axis only. It builds on D3 v3 and uses SVG elements for all graphics. No data is loaded; the chart shows an empty coordinate system.

ZZhengYingqian
92% 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
91% 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
88% 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
88% 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
88% match
Loading thumbnail…

Pan & Zoom Axes

This example demonstrates interactive pan and zoom control over a two-dimensional plot. Using the d3-zoom library, a user can drag to pan and scroll to zoom, with the view constantly updated. The code applies the zoom transform to linear scales via `rescaleX` and `rescaleY`, which then redraws the axes and a colored rectangle backdrop. The rectangle uses an SVG linear gradient, and a reset button animates the view back to its original state with a D3 transition.

TThanaporn-sk
86% 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
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
86% match