MB zoom circles in and out

100%

MB zoom circles in and out

✓ Published0🌍 Public

Last edited Aug 14, 2019

Created on Aug 14, 2019

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.

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>

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

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

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

82% match

Loading thumbnail…

Map Pan & Zoom I

A black-and-white world map renders on a light gray background using the Mercator projection. This example demonstrates map panning and zooming through the `d3.behavior.zoom` API, which applies SVG transforms to a group containing the geographic paths. The map is built from TopoJSON world data with `d3.geo.path`, and the zoom scale is limited to 1–8×. A transparent overlay rect captures pointer events, enabling the interactive behavior.

Mmbostock

81% match

Loading thumbnail…

Map Zooming

This example demonstrates a map zooming animation that alternates between San Francisco and New York, using D3’s zoom transitions. The code renders simplified U.S. state boundaries on a Canvas element via `d3.geo.path` with a custom `d3.geo.transform` for adaptive simplification. It uses `d3.behavior.zoom` to compute translations and scales, and `topojson.presimplify` to preprocess the TopoJSON data source. The continuous back-and-forth zoom is driven by chained transitions with a repeating `jump` function.

Mmbostock

81% match

Loading thumbnail…

Basic Map Zooming

This example demonstrates how d3-zoom can be used to add pan and zoom interactions to a map. The map shows the states of India, rendered as SVG paths using an azimuthal equal-area projection and TopoJSON data. Each state is filled with a distinct color from a categorical palette, and hovering highlights the state by raising it above its neighbors and applying a thicker stroke. The zoom behavior, constrained to a scale range of 1–8× and bounded by the viewport, is applied directly to the SVG element, with a transform on the group containing all map paths. The window resize handler recalculates the projection’s fit and updates the translate extent, demonstrating how d3-zoom integrates with dynamic map projections.

663anp3ca

81% match

Loading thumbnail…

Simple Zoom and Pan

This example demonstrates simple zoom and pan interactions on a scatterplot of 100 randomly positioned circles. The visualization uses D3 v4 to render SVG circles with a categorical color scale, while a transparent overlay rectangle captures pointer events and applies a zoom behavior with a scale extent from 0.5× to 4×. The zoomed function updates the transform attribute of a container group, enabling smooth panning and scaling of all circles. The code leverages d3.zoom and d3.event.transform to handle the interaction, with the data generated on the fly using d3.range and Math.random.

EEfratVil

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

80% match