100%

Mapbox GL Zoom-in Population map

✓ Published0🌍 Public

Last edited Mar 20, 2018

Created on Mar 19, 2018

This zoomable choropleth map of the United States visualizes population at the state level when zoomed out, then transitions to county-level population data when zoomed in past a threshold of zoom level 4. Built with Mapbox GL JS v0.27.0, the map uses two vector layers from a Mapbox-hosted source, each with its own color stops and legend. A `zoom` event toggles the visibility of the state and county legends dynamically. The map uses a light basemap style and is centered on the contiguous US.

AI-generated description

Mapbox GL Zoom-in Population map

// source http://jsbin.com/qahokec

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Mapbox Legend

This example shows a choropleth map of US population density by state, with a hover tooltip displaying the density value. It uses the Mapbox GL JS library to render the interactive map and a custom HTML legend that maps population ranges to a sequential color scale. The legend is dynamically generated by iterating over hardcoded layer names and corresponding hex colors, and the map relies on a Mapbox Studio style for the underlying geographic data. The overlay panel and legend are styled with CSS, and no external data loading is shown beyond the style's built-in state boundaries.

WWill Carter

78% match

Loading thumbnail…

Mapbox GL county identification/population

A Mapbox GL map highlights individual U.S. counties on mouseover, displaying the county name and total population in a small overlay panel. The example queries vector tile sources for county polygons, uses `map.queryRenderedFeatures` to identify the hovered county, and `map.setFilter` to render all matching county polygons with a distinct purple fill. Population data is summed from the features returned by `map.querySourceFeatures` and formatted with `toLocaleString`. The interaction uses Mapbox GL's Popup API and cursor styling to signal selectable regions.

JJn1532

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

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

76% match

Loading thumbnail…

USA geojson

This example displays a choropleth map of the United States using GeoJSON data from a gist, with each state’s population from 2010 encoded by color. It uses d3-geo’s `d3.geoPath` to render the state boundaries and fill them with a color scale based on the `POP2010` property. The map is drawn with SVG, and the layout is generated by projecting the geographic coordinates. The rendering demonstrates how spatial data can be visually encoded using standard D3.js geographic utilities.

JJn1532

75% match

Loading thumbnail…

US Map

A choropleth map of the United States colors individual states by population, using a threshold color scale that ranges from light yellow to dark amber. The visualization loads US state boundaries from the us-atlas TopoJSON file and renders them as SVG paths via d3.geoPath with an Albers USA projection. Population values are mapped to FIPS codes using a JavaScript Map, and the d3.scaleThreshold assigns fill colors based on population brackets. Hovering over a state triggers a native SVG title tooltip displaying the FIPS code and population figure.

KKOLLIPATI NIKHIL

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

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

74% match