ZoomIV_red/bue_dots

100%

ZoomIV_red/bue_dots

✓ Published0🌍 Public

Last edited Apr 7, 2017

Created on Apr 7, 2017

This example shows a spiral arrangement of 2,000 red and blue dots generated using a phyllotaxis pattern. When the user zooms, the dots are repositioned according to the current zoom transform, with alternating colors assigned to each dot based on its index. The visualization uses D3 v4’s `d3.zoom` behavior and applies the transform directly to each circle’s `transform` attribute, rendering in SVG. The data is procedurally generated with a phyllotaxis function based on the golden angle.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nohevog1/'>nohevog1</a>'s block: <a href='http://bl.ocks.org/nohevog1/e07229df6e820f9266085159840e9a71'>ZoomIV_red/bue_dots</a>

mit Licensed

Similar vizzes

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

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

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

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

78% match

Loading thumbnail…

Simple Zoom Example v4 II

This example demonstrates a simple zoom interaction on an SVG canvas populated with 50 randomly placed blue circles. The circles are generated using `d3.range` and assigned random `cx` and `cy` coordinates within the canvas dimensions. The zoom behavior is implemented with the `d3.zoom()` method, which triggers a `zoom` event handler that applies the transform to the circle group. The code uses the D3 v4 library and specifically the `d3.zoom()` API, along with `d3.select` and `attr` for SVG manipulation.

TThanaporn-sk

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

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

76% match

Loading thumbnail…

Zoom Transitions

A phyllotaxis layout of a thousand black circles on a canvas randomly selects a red target point every 2.5 seconds, smoothly zooming to center it using the `d3.zoom` API and `transition()` call. The animation uses a custom `zoomed` handler that translates and scales the context, leveraging `d3-zoom`’s transform interpolation. Rendering is done via the Canvas 2D context.

AAjayyy

76% match