MB zoom circles in and out

100%

MB zoom circles in and out

✓ Published0🌍 Public

Last edited Oct 31, 2019

Created on Oct 31, 2019

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Igathi/'>Igathi</a>'s block: <a href='http://bl.ocks.org/Igathi/c83ee941415a45da0cbcd611546bee54'>MB zoom circles in and out</a>

forked from <a href='http://bl.ocks.org/Igathi/'>Igathi</a>'s block: <a href='http://bl.ocks.org/Igathi/577e567978a74776bdd16d2837f8d8a0'>MB zoom circles in and out</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

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

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

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

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

83% match

Loading thumbnail…

Circles with D3 + Zoom

This example demonstrates how to create and interact with circles using D3.js. It renders a collection of colored circles with varied positions, radii, and fill colors on a light green SVG background, set at 70% opacity to show overlaps. The visualization implements zooming through d3.zoom, allowing users to scale the content between 0.5x and 5x magnification by adjusting a transform on a group element. The code uses d3.select and data joins to bind circle data to SVG elements, with attributes set via method chaining.

SShaun Robbins

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

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

82% match