Click to center & zoom

100%

Click to center & zoom

✓ Published0🌍 Public

Last edited Mar 14, 2018

Created on Mar 14, 2018

Ten colored rectangles are randomly arranged on a blank SVG canvas. Clicking any rectangle smoothly animates the view to center and zoom in on that rectangle, using D3 v4's zoom behavior and a custom transform computed from the rectangle's bounding box. The zoom transition is powered by `d3.zoom.transform`, with `d3.zoomIdentity` translated and scaled to fit the clicked shape within a margin, demonstrating programmatic zoom control with animated SVG transitions.

AI-generated description

This example uses the zoom behaviour of D3.js (version 4) for enabling "click-to-zoom" interactions on SVG objects such as rectangles, circles and so on.

The D3 zoom.transform function has been used in order to create an animated transition every time an object is clicked.

In order to translate and scale the visualization, it is necessary to use the d3.zoomTransform function. In order to translate and scale the visualization, since the x, y and k properties are read-only, d3.zoomIdentity must be translated and scaled without accessing them directly.

By refreshing the visualization, random rectangles are generated.

forked from <a href='http://bl.ocks.org/fabiovalse/'>fabiovalse</a>'s block: <a href='http://bl.ocks.org/fabiovalse/b9224bfd64ca96c47f8cdcb57b35b8e2'>Click to center & zoom</a>

forked from <a href='http://bl.ocks.org/christianbriggs/'>christianbriggs</a>'s block: <a href='http://bl.ocks.org/christianbriggs/a2a3821d1ada49c07b036c0f2f6a0248'>Click to center & zoom</a>

forked from <a href='http://bl.ocks.org/smithant/'>smithant</a>'s block: <a href='http://bl.ocks.org/smithant/664d6cf86e53442d09687b154a9a411d'>Click to center & zoom</a>

mit Licensed

Similar vizzes

Loading thumbnail…

MB zoom circles in and out

Three circles, colored green, purple, and red, sit on a white canvas as the core subjects of this zooming example. The visualization demonstrates click-to-zoom interactions using d3.zoom, where clicking a circle triggers a smooth transition that scales and translates the view to center on that circle. The code uses d3.v4 with SVG rendering, and the zoom behavior is applied to the entire SVG container while individual circles respond to click events. A background rectangle handles resetting the view when clicked, and the active circle is tracked to toggle between zoomed and reset states. The data consists of a simple JSON array of circle positions, radii, and colors, rendered as SVG circle elements.

IIgathi

84% match

Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

IIgathi

83% match

Loading thumbnail…

MB zoom circles in and out

This example shows a set of four colored circles on a white background that zoom in and out when clicked. Clicking a circle smoothly transitions the viewport to center on that circle and scale it up, while clicking the background resets the view. The code uses d3.zoom with a zoom transform, d3.transition for the 750-millisecond animation, and SVG circle elements. Circle positions and radii come from an inline JSON array, and the zoom behavior applies a transform to a group element containing the circles.

TThanaporn-sk

82% match

Loading thumbnail…

Center MB zoom circles in and out

The visualization shows a set of four colored circles arranged around the center of the screen, which zoom in and out when clicked. It demonstrates a custom zoom behavior where each circle, when selected, scales to a consistent size relative to the viewport, centering the clicked circle regardless of its original position. The code uses d3.zoom with a transition to animate the zoom transform, applying a computed scale and translate to focus on the clicked circle. SVG circles are rendered with fill colors and a gray feature class, while a background rectangle resets the view when clicked. The data consists of hardcoded circle coordinates and radii in a JSON array.

IIgathi

82% match

Loading thumbnail…

Zoom Center

By setting the zoom behavior's center, this example fixes the focal point of mousewheel zooming to the center of the canvas, rather than the default cursor position. A set of concentric circles, generated from a range of radii, shows the zoom transformation clearly. The visualization uses `d3.behavior.zoom` with an explicit `.center` array and redraws a group container on each zoom event. The SVG renders the axis circles and a red center marker, with the D3 v3 library handling the interaction and scaling.

Mmbostock

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

80% match

Loading thumbnail…

MB zoom circles in and out

This example demonstrates a zoomable map interface where clicking a circle smoothly scales and pans the view to center on that circle, with a reset option to return to the initial state. It uses D3 v4 with SVG rendering and animation, relying on `d3.zoom` and `d3.zoomIdentity` for transform handling and `transition.call(zoom.transform)` for the animated effect. The data is a static array of circle objects with coordinates, radius, and colors, while a topojson feature layer provides the underlying map context. The background rectangle enables click-to-reset functionality, and strokes adjust dynamically based on zoom scale.

IIgathi

80% match

Loading thumbnail…

Zoomable Circles & Pan with D3-Zoom

This visualization demonstrates a zoomable and pannable SVG canvas containing six colored circles of varying sizes and positions. The example uses the `d3-zoom` library's `zoom` function, which is applied to the SVG element to handle mouse interactions. A `transform` state, updated via a zoom event callback, is applied to a group element containing all circles, allowing the entire set to be panned and scaled smoothly. The circle data, including x, y, radius, and fill color, is hardcoded in the JavaScript.

DDonald Bagwell

79% match