d3 zoom and pan from the keyboard

100%

d3 zoom and pan from the keyboard

✓ Published0🌍 Public

Last edited Sep 21, 2014

Created on Sep 21, 2014

This example demonstrates keyboard-driven zooming and panning of a map rendered with D3.js, replacing typical mouse or touch interactions. A user presses arrow keys to shift the viewport, plus or minus keys to zoom in and out by a factor of two, and Escape to reset the transformation. The behavior is implemented through D3’s zoom behavior, which tracks translation and scale, and applies these values to the SVG’s transform via a transition. The code also handles legacy key codes for Safari and logs unrecognized keys to a debug console.

AI-generated description

Similar vizzes

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…

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

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

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

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

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

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

76% match

Loading thumbnail…

Zoom + Pan

The example demonstrates zooming and panning over a dense scatterplot of 2,000 points, rendered as red squares that move in response to user interaction. It shows how a standard d3.behavior.zoom can be applied to HTML divs rather than SVG, using CSS transforms for positioning. The code generates random data with d3.random.normal, maps it through linear scales, and updates each square’s transform during the zoom event. The visualization uses d3.v3 with SVG-free HTML elements, highlighting the flexibility of D3’s zoom behavior for non-SVG layouts.

DDinoJay

75% match