Zoomable Geography

100%

Zoomable Geography

✓ Published0🌍 Public

Last edited Feb 4, 2020

Created on Apr 13, 2012

This example shows U.S. states and counties rendered as SVG paths, which can be panned and zoomed with the mouse. It uses d3.behavior.zoom to modify the transform of a group element, letting the browser redraw geographic features quickly without reprojection. The code loads TopoJSON data and renders it with d3.geo.path, using a null projection to preserve the pre-computed geometry. Border stroke widths are adjusted inversely to the zoom scale to maintain a constant visual weight.

AI-generated description

An example of d3.behavior.zoom and d3.geo.path. By modifying the transform, the browser can rapidly redraw geographic features while panning and zooming, without the overhead of reprojection. This technique can be extended by combining with d3.geo.tile.

gpl-3.0 Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

Zoom to Bounding Box II d3v4

IIgathi

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

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

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

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

84% match