Pan & Zoom I

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.

91% match

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.

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

85% match

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 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.

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.

Fixed Zoom

This example demonstrates a fixed focal point zoom on a phyllotaxis pattern of 2,000 points rendered on a Canvas. The d3-zoom library is used with a custom zoom transform that ignores translation values, applying only the scale factor *k* to zoom around a specified world-coordinate focal point, which is centered on the display. The code initializes the points with a phyllotaxis algorithm, using the first point as the focal reference, and redraws the scene via `context.translate` and `context.scale` based on the current transform from the `zoom` event.

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