100%

Mapbox GL county identification/population

✓ Published0🌍 Public

Last edited Mar 21, 2018

Created on Mar 19, 2018

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.

AI-generated description

Mapbox GL county identification/population

Edit

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Mapbox GL Zoom-in Population map

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.

JJn1532

78% match

Loading thumbnail…

Mapbox GL map example - turn on/off county 5 color

This example displays a Mapbox GL map of U.S. counties with a categorical five-color fill scheme. A menu allows toggling the visibility of the county fill layer on and off. The map uses the Mapbox GL JavaScript API and loads vector data from a Mapbox-hosted source. The layer’s fill color is determined by a categorical property, with each category assigned a distinct hex color stop. The map setup includes a center point in Texas and a zoom level of 5.

JJn1532

72% match

Loading thumbnail…

County Bubbles

A map of the United States uses brown circles sized by county population, with a legend for reference and hover tooltips showing the county name and population. The visualization overlays these bubbles on a gray landmass with white state borders, placing each circle at its county’s centroid. Built with D3 v3, it loads a TopoJSON file containing merged county, state, and nation geometries, projects it via `d3.geo.albersUsa`, and draws the map with `d3.geo.path` while sizing bubbles with `d3.scale.sqrt`. Population data comes from the 2012 American Community Survey.

Mmbostock

70% match

Loading thumbnail…

Untitled

This choropleth map shows the population distribution across U.S. counties, with a color scale from light blue to red indicating population magnitude. The visualization is rendered as SVG using D3 v7, employing `d3.geoAlbersUsa` for projection and `d3.geoPath` to draw county boundaries from `counties.json`. Population data is loaded from `PopulationEstimates.csv` and matched to counties by name, with a tooltip showing county name and population on mouseover. The code uses a sequential color scale with an RGB interpolator.

Eeranyoung

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

69% match

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

69% match

Loading thumbnail…

US County Populations - D3 Visualization

This interactive choropleth map visualizes 2013 U.S. county population estimates, using a logarithmic color scale with a sequential interpolateGnBu scheme to encode values. The visualization binds population data from Wikipedia-sourced CSV files to county paths from the us-10m.v1.json TopoJSON, rendered with d3.geoPath using a null projection and geoTransform scaling for performance. It features zoom/pan capabilities via d3.zoom, hover tooltips, and toggleable county borders, with a legend provided through d3.scaleSequential.

CConnorIngram

68% match

Loading thumbnail…

NY Counties

A map of New York counties displays population density and includes an interactive pie chart in the corner. Hovering over a county highlights it in crimson and shows its name and total population in an overlay. The visualization uses D3 v4 with `d3.geoTransverseMercator` and `d3.geoPath` to render TopoJSON county boundaries, while `d3.scaleThreshold` and `d3.schemeOrRd` color the map by density. Population data comes from a JSON file, and the pie chart is drawn with `d3.pie` and `d3.arc`.

MMTClass

68% match