Pan & Zoom III

100%

Pan & Zoom III

✓ Published0🌍 Public

Last edited Oct 23, 2020

Created on Oct 23, 2020

This example shows a dense phyllotaxis spiral of 2,000 points that can be panned and zoomed interactively. The points are generated on the fly from a mathematical formula, with each point placed at a radius and angle derived from the golden angle, creating a uniform spiral distribution across the SVG canvas. A transparent overlay rect captures all pointer input and applies a d3.zoom behavior, which clamps the scale between 0.5x and 4x and updates a group element’s transform attribute on every zoom event. The code uses d3.zoom and d3.select to bind the behavior, while the SVG circles remain static and are transformed collectively.

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>

mit Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Pan & Zoom III

A sparse scatter plot of 2,000 points arranged in a phyllotaxis spiral demonstrates interactive pan and zoom via the `d3.zoom` module, which applies an SVG transform to a group element upon zoom events. The behavior is attached to an invisible overlay rectangle, and the visible circles remain static while the group’s transform updates. The code uses `d3.select`, `d3.range`, and the `phyllotaxis` function to generate the spiral pattern.

Mmbostock

90% match

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

88% match

Loading thumbnail…

Pan & Zoom V

A canvas-based D3 visualization displays a phyllotaxis spiral of 2,000 points, fixated so that wheel zooming always centers on the first point while panning is disabled. The zoom handler uses d3.zoom to capture the transform, inverts the viewport center to compute the needed translation, and reapplies the transformed coordinates via context.translate and context.scale. The spiral’s points are drawn with Canvas arc calls, and the view updates on each zoom event without user translation.

Mmbostock

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

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

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

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

81% match