Zoomable US States

100%

Zoomable US States

✓ Published0🌍 Public

Last edited Jun 16, 2018

Created on Jun 16, 2018

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Zoomable US States

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.

SSamagoue

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

87% match

Loading thumbnail…

Zoomable Choropleth to be gutted

This zoomable choropleth of U.S. county unemployment rates shows state-level data that animates to a county-level view when a state is clicked, with the option to zoom back out by clicking a county. Built with D3.js v4, it uses the `d3.geoAlbers` projection, `d3.geoPath`, and `projection.fitExtent()` to smoothly transition the map. The colors encode unemployment data from the BLS, and the code also sets `projection.precision(0)` to prevent interpolation issues during zoom animations.

SSamagoue

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

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

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

81% match

Loading thumbnail…

Zoomable County Choropleth

This example visualizes unemployment rates across U.S. counties from August 2016 using a digital choropleth map. The map, rendered with `d3.geoPath` and a `geoAlbersUsaTerritories` projection, colors each county using a `scaleQuantile` with `interpolateInferno`. It supports interactive zooming and panning via `d3.zoom`, with `d3-rosetta` managing state and efficient DOM updates. County boundaries and state meshes come from the `us-atlas` TopoJSON dataset, while the unemployment figures are loaded from a local CSV file.

CCurran Kelleher

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

80% match