Drag & Zoom II

100%

Drag & Zoom II

✓ Published0🌍 Public

Last edited Dec 15, 2017

Created on Dec 15, 2017

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.

AI-generated description

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

This is quite a bit simpler than implementing drag-and-zoom with Canvas, since the SVG element automatically provides hit-testing, coordinate system transformation and re-rendering.

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

gpl-3.0 Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Drag + Zoom + Slider

This example shows a scatterplot of dots from a TSV file, where users can both drag individual circles and zoom the entire view pane. An HTML5 range slider below the chart controls the zoom level, updating the SVG group’s transform scale in real time. Implemented with D3.js v3, it combines `d3.behavior.zoom` for pan/zoom interactions, `d3.behavior.drag` for moving circles, and a slider event handler that calls `zoom.scale(...).event(svg)` to drive the zoom behavior programmatically.

RRicCheng

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

87% match

Loading thumbnail…

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

86% 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…

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

85% match

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

84% match