Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Zoomable Circles with D3-Zoom

Public visualization

Zoomable Circles with D3-Zoom

2 stars11🌍 Public
CCurran Kelleher
Last edited Feb 29, 2024
Created on Feb 28, 2024
Forked from Circles with D3

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.

AI-generated description

A demonstration of how to add panning and zooming using d3-zoom.

Challenge

  • Use this technique to add zooming to a visualization you created, such as a map

Comments

Sign in to join the discussion.

MIT Licensed