Skip to main content
SimilarExport ZIP
100%

Fork of Zoomable Circles with D3-Zoom

✓ Published0🌍 Public
YYanghong Huang
Last edited Sep 23, 2025
Created on Sep 23, 2025

This example presents a static scatterplot of six colored circles on a light green background, with zoom and pan interactions enabled. The circles are positioned at fixed coordinates and rendered as SVG elements using d3.select and attribute setters. The zoom behavior is implemented with d3.zoom, which captures the current transform in state and applies it to a group element containing all circles. The state-driven transform updates the group’s transform attribute, allowing the entire collection of circles to be moved and scaled smoothly.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a zoomable bubble chart of six colored circles of varying sizes and positions. It demonstrates how to add pan and zoom interactions to a visualization using the D3.js library. The code uses `d3.zoom` to handle user input and applies the zoom transform to a group element containing the circles. Data is hardcoded as an array of objects with x, y, radius, and fill color properties. The visualization updates its state with the current transform, allowing for smooth interactive exploration of the circular layout.

SStephen HC Lin
91% match
Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a zoomable bubble chart of six colored circles of varying sizes and positions. It demonstrates how to add pan and zoom interactions to a visualization using the D3.js library. The code uses `d3.zoom` to handle user input and applies the zoom transform to a group element containing the circles. Data is hardcoded as an array of objects with x, y, radius, and fill color properties. The visualization updates its state with the current transform, allowing for smooth interactive exploration of the circular layout.

SStephen HC Lin
91% match
Loading thumbnail…

Zoomable Circles with D3-Zoom

Six colored circles on a light green background form the focus of this example, which demonstrates how d3-zoom adds pan and zoom interactions. The visualization shows static circles positioned at fixed coordinates, with the zoom behavior updating a transform state that is applied to a group element. Dragging and scrolling the mouse translates and scales the entire circle collection smoothly. The implementation uses `d3.zoom` and binds its `zoom` event to update the group’s `transform` attribute, while the circle data remains unchanged, highlighting how the zoom layer operates independently of the underlying marks.

CCurran Kelleher
90% match
Loading thumbnail…

Fork of Circles with D3 + Zoom

This example displays a collection of colored circles scattered across a light green canvas. The visualization demonstrates the D3 general update pattern and method chaining to create and style each circle based on data attributes. Using D3's `select`, `join`, and `attr` methods, circles are rendered with specified x, y, radius, and fill properties. The example also incorporates D3's `zoom` and `zoomIdentity` functions to enable interactive pan and zoom controls on the SVG content.

KKen Falcon
89% match
Loading thumbnail…

zoomable circles with d3 zoom

This example shows a set of colored circles positioned on a light green background, which can be zoomed and panned through mouse or touch gestures. The visualization uses D3's zoom behavior to apply a transform to a group element, updating the state object with each zoom event. The circles are rendered with D3 selections, each assigned fixed coordinates, radii, and fill colors from an inline data array. The code leverages the d3.zoom API and the state management pattern to persist the current transform across re-renders.

Ccoreyfnolan@gmail.com
87% match
Loading thumbnail…

Fork of Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable, zoomable circles rendered as an SVG visualization. Users can drag individual circles to reposition them and zoom or pan the entire scene using mouse or touch interactions. The visualization uses D3’s `drag` and `zoom` behaviors, with a state management pattern that updates circle coordinates and the group transform on interaction. Initial circle positions, sizes, and colors are hardcoded as static data, while the `d3.select`, `join`, and `attr` methods handle dynamic rendering and updates.

AAl Piepho
87% match
Loading thumbnail…

Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable and zoomable circles, where users can reposition individual circles by dragging and pan or scale the entire scene via zoom interactions. It visualizes six colored circles, each with a fixed position, radius, and fill color. The implementation uses D3’s `drag` and `zoom` behaviors, with the state managed through a `setState` callback that updates circle coordinates during drag and applies a transform to a parent group element during zoom. The rendering uses D3’s `select`, `selectAll`, `join`, and `attr` methods, with a light green background.

AAl Piepho
86% match
Loading thumbnail…

Fork of D3 Zoom

This example demonstrates interactive zooming and panning on an SVG canvas. A group of circles connected by lines, generated from trigonometric functions in `utils.js`, responds to mouse wheel and drag gestures through the `d3.zoom` API. The zoom behavior applies a scale transform to the container group, respecting a scale extent between 0.5x and 4x. The SVG output is created with the `select` and `append` methods from the `d3` v7 library.

KKhanin Sisaengsuwanchai
85% match