Zoomable US Map

100%

Zoomable US Map

✓ Published1🌍 Public

Last edited Jul 29, 2024

Created on Jul 28, 2024

This interactive map of the United States allows users to zoom into individual states by clicking, with smooth animated transitions and hover highlighting. Built with D3.js v6 and TopoJSON, it loads US state boundaries from the `us-10m.v1.json` dataset and renders them using `d3.geoPath` within an SVG. The `d3.zoom` API handles pan and zoom gestures, while `transition` calls animate the viewport and state fill colors between default, hover, and clicked states. A tooltip displays each state’s name on mouseover.

AI-generated description

Zoomable US Map from D3 examples

MIT Licensed

Similar vizzes

Loading thumbnail…

US Map with Zoom on Click

This interactive map of the United States displays state boundaries using the `d3.geoAlbersUsa()` projection and `d3.geoPath()`, with geographic data sourced from `us-atlas` and parsed via `topojson-client`. Users can click any state to zoom into it using the `d3.zoom` behavior, with a 750ms transition, while hovering highlights the state in red and shows a tooltip with its name. A background click or the “Reset View” button restores the original view. The visualization also supports loading external CSV data, such as the provided `nics.csv` firearm background-check statistics.

Rrpkupfer@wpi.edu

87% match

Loading thumbnail…

US State Map with Interaction

This example presents a choropleth-style map of US states with pan and zoom interaction. Built with D3 v5 and rendered as SVG, it uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to display state boundaries loaded from a TopoJSON file. State names and election data come from a CSV file, though only the names appear as tooltips via appended `title` elements. Hovering highlights a state in red, while the map supports interactive zooming through event-driven transforms.

Ddanrhymes

87% match

Loading thumbnail…

Zoom in Map Demo

Clicking a US state zooms to that state at 4× magnification, while clicking again resets the view. Clicking an individual county zooms in much deeper, to 23×, centering on that county. Built with D3 v3 and TopoJSON, the map renders US states and counties as SVG paths using an Albers USA projection, with smooth 750-millisecond transitions handled by D3's `transition` and `attr` methods. The data comes from a raw GitHub gist containing US TopoJSON topology.

JJn1532

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

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

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

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau

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