Skip to main content
SimilarExport ZIP
100%

Zoom to Bounding Box II d3v4-Identity

✓ Published0🌍 Public
IIgathi
Last edited Aug 13, 2019
Created on Aug 13, 2019

This example demonstrates how to zoom to a bounding box of a selected geographic feature using D3 v4’s zoom behavior and transitions. The map displays U.S. counties in California, rendered as SVG paths from a TopoJSON file. Clicking on a county triggers a smooth zoom transition that centers and scales the view to fit the county’s bounding box, while also allowing users to freely pan and zoom with mouse or touch interactions. The animation between views is handled by D3’s zoom transition, which interpolates the transform values for a fluid, intuitive user experience.

AI-generated description

A variant of the Zoom to Bounding Box example that uses zoom transitions to smoothly interpolate between different views. This example also allows you to freely pan and zoom with the mouse (or touch).

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/9656675'>Zoom to Bounding Box II</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/652458d1831e41de6efe1d453152131b'>Zoom to Bounding Box II d3v4</a>

forked from <a href='http://bl.ocks.org/mukhtyar/'>mukhtyar</a>'s block: <a href='http://bl.ocks.org/mukhtyar/34453378f460a352bb2f6c4e837011eb'>Zoom to Bounding Box II d3v4</a>

gpl-3.0 Licensed

Similar vizzes

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

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 - 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 interactive map of the United States supports both click-to-zoom and free pan/zoom via mouse or touch. Clicking a state smoothly zooms to its bounding box, while a mesh overlay shows state borders. It uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering, and the `d3.zoom` transition to interpolate between views. The map data comes from a remote TopoJSON file, and the SVG rendering animates transformations and stroke widths.

PPhilippe Rivière
85% 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
85% match
Loading thumbnail…

Zoom to Bounding Box II

This interactive map of the United States lets users click any state to zoom smoothly to its bounding box, while also supporting free pan and zoom via mouse or touch. The visualization uses D3.js v3 with an AlbersUSA projection and TopoJSON state boundaries, rendered as SVG paths. Clicking a state triggers a 750-millisecond zoom transition, adjusting the zoom behavior’s scale and translate to fit the selected feature, while the active state highlights in orange. The zoomed function updates the group’s transform and stroke width inversely with scale, and the background rectangle resets the view when clicked.

EEvertLagerberg
85% match
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
84% 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
84% match