Gist ca516940263ea0b1137a
This example shows a zoomable map of U.S. states, where clicking a state animates the viewport to focus on that state’s bounding box, and clicking the background or the active state resets the view. It uses D3 v3 with TopoJSON to load state boundaries, renders them as SVG paths via `d3.geo.path`, and applies `transition` with a computed translate and scale to smoothly change the projection’s viewport. The active state is highlighted in orange, and stroke width adjusts inversely to the zoom scale.
AI-generated descriptionThis example demonstrates how to compute a suitable translate and scale to zoom to the bounding box of a particular feature. Click on any state to zoom in; click on the focused state or the background to zoom out.
This variant uses transform transitions to change the viewport. A slightly better approach, and one that can also allow free panning and zooming with the mouse if desired, is to use zoom transitions.