click-to-center via transform

100%

click-to-center via transform

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 26, 2012

Clicking a U.S. state smoothly shifts the entire map to center that state, using a transform transition on a group element. The map renders TopoJSON state boundaries via `d3.geo.albersUsa` and `d3.geo.path`, while a click handler computes each state's centroid with `path.centroid` and animates the group's `translate` attribute over 750 milliseconds. Clicking the background or the already-centered state re-centers the view.

AI-generated description

Part of a series of examples. See:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

click-to-center

Clicking any US state shifts the Albers USA projection so that state becomes the center of the map, with a smooth animated transition re-drawing all state boundaries and borders. The visualization uses D3 v3’s `d3.geo.path` with a `d3.geo.albersUsa` projection, TopoJSON for state geometry, and SVG paths with click handlers. A background click re-centers the map, while clicking the already-centered state also returns to the default view.

Mmbostock

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

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

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

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

81% match

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

80% match

Loading thumbnail…

Geo Map

This map of the United States lets users click a state to zoom in on it and click the background to zoom back out. The visualization uses D3.js v3 with the `d3.geo.albersUsa` projection and `d3.geo.path` to draw state boundaries from TopoJSON data loaded from a GitHub gist. Clicking a state triggers a smooth `g.transition()` that adjusts the scale and translate attributes, while the active state is highlighted in orange via CSS classes.

IIgathi

80% match

Loading thumbnail…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Ppcsong33

79% match