D3 Zoom

100%

✓ Published1🌍 Public

Last edited Jun 1, 2023

Created on Jun 1, 2023

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Simple Zoom and Pan

This example demonstrates simple zoom and pan interactions on a scatterplot of 100 randomly positioned circles. The visualization uses D3 v4 to render SVG circles with a categorical color scale, while a transparent overlay rectangle captures pointer events and applies a zoom behavior with a scale extent from 0.5× to 4×. The zoomed function updates the transform attribute of a container group, enabling smooth panning and scaling of all circles. The code leverages d3.zoom and d3.event.transform to handle the interaction, with the data generated on the fly using d3.range and Math.random.

EEfratVil

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

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

86% match

Loading thumbnail…

Untitled

This example demonstrates a scatter plot of 100 randomly generated points within a 600×400 SVG viewport. The visualization shows how D3’s zoom behavior transforms a group element containing the circles, enabling pan and zoom interactions. The code uses `d3.zoom()` with a `handleZoom` callback that applies the event transform via `.attr('transform', ...)`. Rendering relies on SVG circles with `cx`, `cy`, and `r` attributes, using D3’s data join pattern to bind the generated array of point objects.

TTrushin Arseniy

85% match

Loading thumbnail…

SVG Geometric Zooming

A scatterplot of 2,000 normally distributed points demonstrates geometric zooming in SVG. The visualization shows how the entire coordinate system scales uniformly, with all circle radii increasing proportionally as the view magnifies. Built with D3 v4, the example uses `d3.zoom` attached to a background rectangle, applying the current transform directly to a group element containing all points. The code generates random positions via `d3.randomNormal` and renders each point as a circle with a `translate` transform, allowing the zoom handler to scale and pan the whole scene without recalculating individual positions.

Mmbostock

85% match

Loading thumbnail…

Pan & Zoom III + fix

This example shows an interactive scatterplot of 2,000 points arranged in a spiral, which users can pan and zoom by dragging or scrolling over the entire SVG canvas. The visualization relies on the d3-zoom behavior attached to a transparent overlay rectangle, ensuring smooth pointer interaction regardless of the zoomed content. During zooming, the code applies the current transform directly to a group element using the zoom event’s transform property, updating the positions of all circles in real time. The data is generated on the fly with a phyllotaxis function, while the SVG circles are rendered from an array of computed coordinates.

PPhilippe Rivière

85% match

Loading thumbnail…

Scatter plot with zoom

This scatter plot visualizes 300 normally distributed data points and supports interactive zooming through a brushed region. Users can drag to select a rectangular area, which triggers a smooth animated transition that rescales the x and y axes to focus on the selected points. Double-clicking outside the brushed area resets the view to the full dataset. The implementation uses D3 v4’s `d3.brush` for selection handling, `d3.scaleLinear` for coordinate mapping, and `transition.attr` to animate the circles’ positions. The axes are updated via `d3.axisBottom` and `d3.axisLeft`, with a clip path preventing points from spilling outside the plotting area.

EEfratVil

84% match

Loading thumbnail…

Untitled

This example shows a scatterplot of 100 randomly generated points in a 600x400 SVG canvas, with the ability to pan and zoom the view. The points are rendered as small circles inside a group element, and their positions are updated using D3’s data join pattern. The code initializes a D3 zoom behavior on the SVG and applies the current zoom transform to the group on each zoom event. It uses the D3 library for zoom and data binding, while the SVG is defined directly in the HTML.

TTrushin Arseniy

84% match