Skip to main content
SimilarExport ZIP
100%

Zoomable US States

✓ Published0🌍 Public
SSamagoue
Last edited Jun 16, 2018
Created on Jun 16, 2018

Clicking a state zooms the map in to reveal its counties, which are colored by employment location quotient from the Bureau of Labor Statistics' QCEW survey. The darker the fill, the higher the quotient. The zoom and county transitions are handled with D3 v3 transitions, while map geometry from a TopoJSON file is drawn using `d3.geo.path` with a Mercator projection.

AI-generated description

Click a state to zoom and display counties. An extension of this block by Mike Bostock.

The color darker the greater the location quotient for employment in some industry (I forget what industry). The purpose of the example is to test out zoom functionality not to show data. That being said, the data is from the Bureau of Labor Statistics' QCEW survey.

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/1eb1c502692da8046d6b'>Zoomable US States</a>

forked from <a href='http://bl.ocks.org/kaito4213/'>kaito4213</a>'s block: <a href='http://bl.ocks.org/kaito4213/68ca338c396512d3a2c2f9a556a7ebb3'>Zoomable US States</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Zoomable US States

A choropleth map of US states and counties uses employment location quotients from the Bureau of Labor Statistics' QCEW survey to shade each county. Clicking a state triggers a zoom animation that reveals its counties, applying a square-root color scale to the data. The visualization is built with D3 v3, using `d3.geo.Mercator`, `d3.geo.path`, and TopoJSON to render state boundaries and county polygons as SVG.

SSamagoue
95% 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
85% match
Loading thumbnail…

Zoomable Choropleth

A zoomable choropleth of U.S. unemployment rates by state and county. Clicking a state zooms the map to that state, revealing county-level data with smooth animated transitions; clicking a county returns the view to the full country. Built with D3 v4, it uses `d3.geoPath` with an Albers projection, `projection.fitExtent` for zooming, and `transition` for animations. A threshold color scale encodes unemployment values from BLS data, and county shapes are rendered as SVG paths.

SSamagoue
84% 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
83% match
Loading thumbnail…

Zoomable US Map

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.

LLuca Liverani
83% match
Loading thumbnail…

zoomUsCounty

This interactive map displays all U.S. counties as gray polygons with state borders overlaid in white. Clicking a state zooms in on that region, while clicking a county triggers a deeper zoom to a scale of 23, with another click resetting the view. The visualization uses D3 v3 and TopoJSON to load geographic data from a gist, projecting it with `d3.geo.albersUsa` and rendering paths via `d3.geo.path`. Transitions animate the zoom using SVG transform scaling and translation, with hover effects highlighting counties and states in orange.

JJn1532
82% 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
82% 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
82% match