mousewheel-zoom + click-to-center

100%

mousewheel-zoom + click-to-center

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 26, 2012

This example demonstrates interactive zooming and panning on a map of the United States using mousewheel events and click-to-center functionality. The visualization uses an Albers USA projection rendered as SVG paths, with state boundaries drawn from TopoJSON data loaded via `d3.json`. D3’s `d3.behavior.zoom` handles wheel zoom and drag panning, while a click on any state triggers a smooth 700-millisecond transition that recenters the projection on that state’s centroid. The `d3.geo.path` generator updates the path data during both zooming and click-driven transitions, and the code explicitly manages the projection’s translate and scale properties to synchronize with the zoom behavior.

AI-generated description

Part of a series of examples. See:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoom to Bounding Box II

This example demonstrates smooth zooming and panning over a map of the United States using Albers equal-area projection. Users click individual states, triggering a 750-millisecond animated transition to a bounding box around that state, while the map remains freely navigable via mouse drag and wheel zoom. The visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.zoom` for interactive and animated transformations, and `d3.geo.path` to render state boundaries and a mesh overlay from the US TopoJSON data file. Active states highlight in orange, and stroke widths adjust dynamically during zoom.

Mmbostock

89% match

Loading thumbnail…

Zoom to Bounding Box II d3v4

This example demonstrates zooming and panning across a map of the United States, with clickable states that smoothly transition to fill the viewport. It shows how to combine geographic projections with D3’s zoom behavior for interactive exploration. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to render TopoJSON state boundaries, and `d3.zoom` to handle free pan and zoom. Clicking a state triggers a 750ms transition via `zoom.transform`, calculating a bounding-box scale and translate to frame the feature. The active state is highlighted in red, while stroke widths adjust inversely to the zoom level for crisp rendering.

IIgathi

87% match

Loading thumbnail…

Zoom to Bounding Box II d3v4

IIgathi

87% match

Loading thumbnail…

Gist 6414125

This example demonstrates interactive panning and zooming over a map of U.S. states and counties using SVG. It uses `d3.behavior.zoom` to control the map’s transform, while `d3.geo.path` renders the TopoJSON data from the `us.json` file. The zoom event updates the map’s translate and scale attributes, and stroke widths adjust inversely to the zoom level. Buttons also allow resetting the view or disabling the zoom event entirely.

11wheel

86% match

Loading thumbnail…

click-to-zoom via transform

Clicking a US state zooms to that state via a SVG transform transition, while clicking the background resets the view. The map renders TopoJSON data through `d3.geo.albersUsa` projection and `d3.geo.path`, with state borders drawn from a topology mesh. An orange highlight marks the active state, and stroke width inversely scales with zoom. The interaction uses a `g.transition()` to animate `translate` and `scale` attributes over 750 milliseconds.

Mmbostock

86% match

Loading thumbnail…

Zoom to Bounding Box II - test

This example demonstrates a zoomable and pannable map of U.S. states, where clicking a state smoothly transitions the view to center and scale that state’s bounding box. It shows how to combine free-form zooming and panning with programmatic animated transitions. The visualization uses D3 v3 with the `d3.geo.albersUsa` projection, `d3.geo.path` for rendering GeoJSON features, and `d3.behavior.zoom` for user interaction. Clicking a state triggers a 750-millisecond zoom transition, while a background click resets the view. State boundaries are drawn as a TopoJSON mesh, and the map data comes from a TopoJSON file of U.S. states.

IIgathi

86% match

Loading thumbnail…

click-to-zoom via transform

Clicking a US state smoothly zooms the map to that state, centering it and enlarging it fourfold; clicking again restores the full national view. The example builds an interactive state map with D3, using `d3.geo.albersUsa` for the projection and `topojson` to process geographic data. Zoom animation is driven by D3 transitions, which update an SVG `g` element’s `transform` attribute and adjust the stroke width to maintain visual consistency. State borders and a clickable background rect facilitate the interaction, with active states highlighted in orange.

FFrissAnalytics

86% match

Loading thumbnail…

Zoom to Bounding Box II - Updated for d3 v4

This example demonstrates zooming and panning over a map of the United States, where clicking a state smoothly transitions the view to focus on that state’s bounding box. The visualization also supports free-form mouse or touch dragging and zooming. Built with d3.v4 and TopoJSON, it uses `d3.geoAlbersUsa` for the projection and `d3.geoPath` to render state shapes. Zoom interactions are handled via `d3.zoom` with a `d3.zoomIdentity` transform, and transitions animate the view using `zoom.transform`. The underlying GeoJSON data comes from a TopoJSON file of US states.

GGerardoFurtado

86% match