Skip to main content
SimilarExport ZIP
100%

Pan & Zoom with click

✓ Published0🌍 Public
SServuc
Last edited Aug 9, 2016
Created on Aug 9, 2016

This example shows a set of circles arranged in a phyllotaxis pattern within an SVG. Users can pan and zoom the view by clicking and dragging, with zoom controlled by the mouse wheel. The implementation uses the `d3.zoom` behavior applied to an invisible overlay rectangle, which updates the SVG group’s `transform` attribute via `d3.event.transform`. Clicking anywhere displays the client and SVG coordinates, converting screen coordinates to SVG space using the SVG’s `getScreenCTM` method. The data is generated programmatically using a phyllotaxis function, and the visualization is rendered with SVG circles.

AI-generated description

This example demonstrates using d3-zoom to pan and zoom an SVG element by applying an SVG transform using transform.toString. The zoom behavior is applied to an invisible rect overlaying the SVG element; this ensures that it receives input, and that the pointer coordinates are not affected by the zoom behavior’s transform.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45'>Pan & Zoom III</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9f70fd5e4c562599bfc07a59cf099a7f'>Pan & Zoom with click</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Pan & Zoom III

This example shows a dense phyllotaxis pattern of 2,000 circles that users can pan and zoom with the mouse. The code uses the d3-zoom plugin in D3 v4 to handle input, applying the zoom transform directly to a group element containing the circles. An invisible overlay rect ensures the zoom behavior receives events, while the SVG’s coordinate system is adjusted with a translate transform. The rendering is done via SVG circles, with a resize handler updating the layout.

HHerst
89% match
Loading thumbnail…

Pan & Zoom III

This example shows a dense spiral of 2,000 circles generated by a phyllotaxis pattern, which users can pan and zoom. The d3-zoom behavior is attached to an invisible overlay rectangle that covers the entire SVG, ensuring it captures all pointer input. On each zoom event, the code applies the current zoom transform to the group element containing the circles via `d3.event.transform` in the `zoomed` callback. This uses SVG transforms and d3.v4’s zoom API, with scale limits set between 0.5 and 4.

MMTClass
88% match
Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

IIgathi
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…

Zoomable Circles & Pan with D3-Zoom

This visualization demonstrates a zoomable and pannable SVG canvas containing six colored circles of varying sizes and positions. The example uses the `d3-zoom` library's `zoom` function, which is applied to the SVG element to handle mouse interactions. A `transform` state, updated via a zoom event callback, is applied to a group element containing all circles, allowing the entire set to be panned and scaled smoothly. The circle data, including x, y, radius, and fill color, is hardcoded in the JavaScript.

DDonald Bagwell
85% 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
84% match
Loading thumbnail…

Pan & Zoom IV

Two thousand circles laid out in a phyllotaxis spiral show the d3.zoom behavior applied by directly manipulating each circle’s SVG transform attribute. On every zoom event, the code calls *transform*.applyX and *transform*.applyY to remap the original data coordinates, keeping all circle radii constant at 2.5 pixels while allowing pan and zoom between half and four times the initial scale. This approach, written in d3.v4 with SVG, demonstrates an alternative to scaling a single parent group, trading performance for customization.

Mmbostock
83% 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
82% match