Drag & Zoom

100%

✓ Published0🌍 Public

Last edited Aug 16, 2016

Created on Aug 16, 2016

This example combines d3-drag and d3-zoom on a canvas to let users pan and zoom a field of 2,000 points arranged in a phyllotaxis spiral—a sunflower-like pattern. Dragging the background pans the view, while dragging an individual circle moves it in world coordinates. The code distinguishes between pointer coordinates and the zoomed coordinate space using d3.zoom’s transform inversion methods, then renders points via a single canvas path with `context.arc`.

AI-generated description

This example shows how to combine d3-drag and d3-zoom to allow dragging of individual circles within a zoomable canvas. If you click and drag on the background, the view pans; if you click and drag on a circle, it moves.

The tricky part of this example is the need to distinguish between two coordinate spaces: the world coordinates used to position the circles, and the pointer coordinates representing the mouse or touches. The drag behavior doesn’t know the view is being transformed by the zoom behavior, so you must convert between the two coordinate spaces.

Compare this to the simpler SVG implementation.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2b534b091d80a8de39219dd076b316cd'>Drag & Zoom</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Drag & Zoom

This example combines `d3.drag` and `d3.zoom` on a Canvas to allow both panning the view and moving individual points. Clicking and dragging on the background pans the zoomable world, while dragging on a circle moves that circle in world coordinates. The code explicitly converts between pointer coordinates and world coordinates using the zoom transform’s `invertX`/`invertY` and `applyX`/`applyY` methods. It renders 2,000 points generated by a phyllotaxis pattern, drawn as a single Canvas path with `arc` calls.

Mmbostock

92% match

Loading thumbnail…

Drag & Zoom

This example combines d3-drag and d3-zoom to let users pan and zoom a canvas of 2,000 points while also dragging individual points. Clicking and dragging on the background adjusts the view transform, whereas clicking and dragging on a point moves that point in world coordinates. The code uses `d3.zoomIdentity`, `transform.invertX`, and `transform.invertY` to convert between pointer and world spaces. It renders with the Canvas 2D API, using `context.translate` and `context.scale` to apply the current zoom transform.

TThanaporn-sk

88% match

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable SVG canvas containing two thousand circles arranged in a phyllotaxis pattern, where users can click and drag on the background to pan the view or drag individual circles to reposition them. The visualization combines d3-drag and d3-zoom, using the `d3.zoomIdentity` transform to update the group’s `transform` attribute during zooming, while the drag handler updates each circle’s `cx` and `cy` attributes directly. Rendering relies on SVG’s built-in hit-testing and coordinate transformation, avoiding the need for manual redraws or complex event logic.

Mmbostock

87% match

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable and pannable scatterplot with draggable circles. It combines d3-drag and d3-zoom to let users pan the view by dragging on the background or move individual circles by dragging them. The SVG rendering automatically handles hit-testing and coordinate transformations. The code generates 2,000 synthetic data points from a cubic function and displays them with a linear x-scale and inverted y-scale.

SSpaceActuary

86% match

Loading thumbnail…

Drag + Zoom

This example demonstrates how to combine drag and zoom interactions on an SVG canvas. A grid of lines serves as a background, and individual dots can be dragged by clicking on them, while panning occurs when dragging the background; the mousewheel controls zooming. The code uses d3.behavior.drag and d3.behavior.zoom, with stopPropagation to prioritize dragging over panning. Data is loaded from a TSV file containing x and y coordinates for each dot, rendered as SVG circles that turn red while being dragged.

SSpaceActuary

85% match

Loading thumbnail…

Drag + Zoom

In this example, dots loaded from a TSV file are positioned in an SVG scatterplot with a light grid. Users can drag individual circles to move them, while clicking and dragging on the background pans the view, and the mousewheel zooms the entire scene. The code combines `d3.behavior.drag` and `d3.behavior.zoom`, using `stopPropagation` in the dragstarted handler to give dragging precedence over panning. Both behaviors update the container's transform attribute via the zoom event's translate and scale values, with dragged circles updating their cx and cy attributes.

Mmbostock

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

83% match

Loading thumbnail…

Pan & Zoom II

This example demonstrates a pan-and-zoom interface for a dataset of 2,000 points arranged in a phyllotaxis pattern, drawn on a Canvas. On zoom, the circles retain a constant pixel radius rather than scaling with the data. The implementation uses `d3.zoom` to handle user interaction and applies the transform via `transform.apply` to each point in `drawPoints`, while `d3.event.transform` supplies the current transformation during the zoom event. The `context.arc` method renders each point individually.

Mmbostock

82% match