Skip to main content
SimilarExport ZIP
100%

click-to-zoom via transform

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Mar 26, 2012

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.

AI-generated description

Part of a series of examples. See:

  1. mousewheel-zoom + click-to-center via projection
  2. click-to-center via projection
  3. click-to-center via transform
  4. click-to-zoom via transform

More recently, see the Zoom to Bounding Box example.

gpl-3.0 Licensed

Similar vizzes

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
95% match
Loading thumbnail…

click-to-zoom w. shadow & transition

Clicking a US state zooms the map to that state with a smooth transform transition, dims all other states, and applies a drop-shadow filter to highlight the selected state. Clicking the background resets the view and restores full opacity. The example renders SVG paths from TopoJSON state boundaries using `d3.geo.path` and an Albers USA projection, animating the zoom with `transition.attr`. A custom `moveToFront` selection method brings the active state to the top of the SVG stack.

PPatrick Wojda
91% match
Loading thumbnail…

Zoom to bounding box d3.v4

Clicking a US state zooms the map to that state’s bounding box, with a smooth 750-millisecond transition, while the user can also freely pan and zoom. The example uses d3.v4’s `d3.zoom` and `d3.geoPath` with an Albers USA projection, rendering state features as SVG paths from TopoJSON. Zooming is triggered by computing the path bounds and applying `d3.zoomIdentity.translate().scale()` via `transition.call(zoom.transform)`. Clicking the background resets the view, and active states highlight in orange, with the mesh and stroke width updating on zoom.

FFrissAnalytics
90% match
Loading thumbnail…

Zoom to Bounding Box

Clicking any U.S. state zooms the Albers USA projection to that state’s bounding box, while clicking the background or the active state resets the view. The code computes the path bounds via `d3.geo.path` and uses a `g.transition()` with a computed translate and scale to animate the viewport, adjusting stroke widths inversely to the zoom. It loads TopoJSON state boundaries and uses D3 v3’s `d3.geo.albersUsa` projection, rendering SVG paths with click handlers for interactivity.

Mmbostock
88% 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
87% 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
86% 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
86% match
Loading thumbnail…

mousewheel-zoom + click-to-center

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.

Mmbostock
86% match