Pan & Zoom V

100%

✓ Published0🌍 Public

Last edited Jul 4, 2016

Created on May 26, 2016

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.

AI-generated description

This example demonstrates how to fixate d3-zoom on a point of interest: zooming using the wheel or touch is allowed, but panning is not. When a zoom event is emitted, the current transform is translated to put the focus point at the center of the viewport:

var point = transform.invert(center);
transform = transform.translate(point[0] - focus[0], point[1] - focus[1]);

Compare this to non-fixated zooming.

gpl-3.0 Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Pan & Zoom III

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.

PPhilippe Rivière

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

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

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

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

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

80% match