Drag & Zoom

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.

91% match

Drag & Zoom

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`.

SServuc

88% match

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.

83% match

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

83% match

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

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.

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

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.