Mapbox Legend

100%

✓ Published0🌍 Public

Last edited Oct 23, 2019

Created on Oct 23, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Choropleth Tutorial - Leaflet

This example shows a choropleth map of US population density by state, built with the Leaflet JavaScript library. It colors each state according to its population density using a custom color scale and provides interactive features: hovering highlights a state and displays its name and density in an info panel, while clicking zooms in on that state. The map also includes a legend showing the density ranges and their corresponding colors. The visualization uses GeoJSON state boundaries and population data from the US Census Bureau, rendered as vector layers with Leaflet’s `L.geoJson` and `L.control` for the legend and info.

Ggotyou007

79% match

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…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Vvishusikka

74% match

Loading thumbnail…

Untitled

A choropleth map of population density per square mile colors U.S. census block groups using a threshold scale and the sequential color scheme `d3.schemeOrRd[9]`. The visualization includes a square-root-scaled legend with an axis, and overlays county boundaries as black strokes at 30% opacity. The code loads TopoJSON data via `d3.json`, converts it with `topojson.feature`, and renders it with `d3.geoPath`. The legend uses `d3.scaleThreshold` and `d3.axisBottom`. The map is built with D3 v4 and React in the supporting files.

AAlice Hua

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

72% match

Loading thumbnail…

US Choropleths Map And Captital/Major Cities

This example displays a choropleth map of the contiguous United States with state boundaries rendered as colored polygons, overlaid with two city datasets. State colors transition from white to blue via a `scaleLinear` color scale, while graticules and interior borders are drawn using `d3.geoPath` and `d3.geoGraticule`. Population data from a world cities CSV appears as semi-transparent purple circles sized with `scaleSqrt`, and state capitals from a Vega JSON file are fixed black dots. The map uses TopoJSON from the us-atlas library, projected with `geoAlbers` in an SVG rendered through React.

Yyuzhang21

71% match

Loading thumbnail…

Untitled

This visualization displays population density per square mile across U.S. census block groups using a choropleth map. A threshold color scale with d3.schemeOrRd maps density values to sequential red tones, while a legend with a sqrt scale and axis shows the breakpoints. The code loads TopoJSON data via d3.json, renders block group polygons with d3.geoPath, and overlays county boundaries as black outlines. An interactive legend is constructed with rect elements and d3.axisBottom.

CCurran Kelleher

71% match

Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas

71% match