Pan & Zoom II

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.

91% match

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.

86% match

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.

86% match

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

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.

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.

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

Canvas Geometric Zooming

This example demonstrates geometric zooming on a canvas, where a scatterplot of 2,000 normally distributed points scales and translates as a unified image. The code uses d3.zoom with scaleExtent to handle user interaction, applying the transform directly to the canvas context via translate and scale methods. Points are drawn using the Canvas 2D API’s arc and fill operations, while the underlying data is generated with d3.randomNormal. Unlike semantic zooming, this approach redraws the entire visualization at the new scale, preserving the spatial relationships between all marks.