Choropleth map in D3

100%

Choropleth map in D3

✓ Published1🌍 Public

Last edited Mar 31, 2024

Created on Mar 31, 2024

This choropleth map visualizes 2021 poverty estimates for U.S. states, with each state colored according to its poverty rate using a quantized blue color scale. The visualization loads geographic boundaries from a TopoJSON file and joins them with CSV data containing state-level poverty percentages. Built with D3 v7, the example uses `d3.geoPath` with the `geoAlbersUsa` projection to render the map as SVG paths, while a legendQuant scale displays the color-to-value mapping. The code also implements mouseover interactions that highlight states and tooltip text showing the poverty rate for each region.

AI-generated description

Poverty estimates for U.S., States, and counties, 2021 Source: U.S. Department of Commerce, Bureau of the Census, Small Area Income and Poverty Estimates (SAIPE) Program. For definitions of rural classifications, see the USDA, Economic Research Service webpage 'Rural Classifications' in the 'Rural Economy & Population' topic. Note that counties not existing when rural classifications were determined will not have values for those fields. Variable descriptions (column names) are found in the second tab in this workbook. This table was prepared by USDA, Economic Research Service. Data as of June 16, 2023. Contact: Austin Sanders, austin.sanders@usda.gov

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth map in D3

A choropleth map of the United States visualizes 2021 county-level poverty estimates, with each state shaded according to its poverty rate using a quantized color scale from light to dark blue. The visualization loads CSV data from a GitHub gist and combines it with TopoJSON geographic boundaries from `us-10m.v1.json`, rendering the map as SVG paths via `d3.geoPath` with an Albers USA projection. A legend generated by `d3.legendColor` displays the unemployment rate scale, while hover effects and tooltips appear through d3 event handlers. Data originates from the U.S. Census Bureau's Small Area Income and Poverty Estimates program.

EEunice Tu

93% match

Loading thumbnail…

Choropleth map in D3 - Poverty Estimate

This choropleth map displays the estimated poverty rate for each US county in 2021, using a blue color scale to show the percentage of the population in poverty. The map is rendered as an SVG using d3.geoPath and topojson features, with state boundaries outlined in white. A legend and title are included, and the data, sourced from the USDA, is loaded from a CSV file and joined to the map using county IDs. The visualization uses D3 v5 and the topojson library for geographic data processing.

EEunice Tu

93% match

Loading thumbnail…

test Choropleth map in D3

This choropleth map displays poverty estimates for US counties in 2021, with each county shaded according to its poverty rate using a blue sequential color scale and a legend with tick marks. The visualization also includes state boundary outlines overlaid on the county polygons. Built with D3 v5, the map uses `d3.json` to load TopoJSON data from the us-atlas collection and `d3.csv` to parse county-level poverty rates, then renders the geography via `d3.geoPath` and `topojson.feature`. The color encoding applies `d3.scaleThreshold` and `d3.schemeBlues`, while an axis legend is generated with `d3.axisBottom`.

EEunice Tu

93% match

Loading thumbnail…

A9 US Choropleth Map

This example shows a choropleth map of U.S. state poverty rates using 2023 data from Poverty2023.csv. The map colors each state with a sequential red scale based on the percentage of the population living below the poverty line, with missing data rendered in gray. Hovering over a state displays a tooltip with the state name and its poverty rate. The visualization uses D3 v7’s `d3.geoPath` with the `geoAlbersUsa` projection to render state boundaries from TopoJSON, and `d3.scaleSequential` with `d3.interpolateReds` for color encoding.

Hhxu51@usfca.edu

92% match

Loading thumbnail…

D3 - Choropleth

This choropleth map visualizes poverty rates across U.S. counties in 2022, with counties colored according to a blue sequential threshold scale and state boundaries overlaid in white. The visualization includes an interactive legend and a tooltip that displays county name, state, and poverty value on mouseover. The code uses d3.geoPath to render geographic shapes, d3.scaleThreshold with d3.schemeBlues for color mapping, and topojson.feature to process the US county data. Data is loaded from a CSV file and merged with US TopoJSON geometry, with the rendering handled in SVG.

CChandana Srinivas

92% match

Loading thumbnail…

Fork of test Choropleth map in D3

This choropleth map visualizes 2021 poverty estimates across U.S. counties and states using a blue sequential color scale. It displays data from the Census Bureau’s Small Area Income and Poverty Estimates program, with unemployment rates mapped to geographic regions. The visualization uses D3 v6 and the topojson library to project and render the map, employing `d3.geoAlbersUsa()` for the projection and `d3.geoPath()` to draw shapes. An interactive tooltip appears on hover, revealing each county’s name and poverty rate.

EEunice Tu

92% match

Loading thumbnail…

Choropleth map

A choropleth map of the United States displays the percentage of the population living in poverty for each county in 2021. The map uses a sequential red color scale, from light to deep red, to encode the poverty rate, with a legend showing values from 0% to 25% in five-point increments. The visualization is rendered as an SVG using D3.js v7, where the `d3.geoAlbersUsa()` projection and `d3.geoPath()` draw the county boundaries from a GeoJSON file. The poverty data is loaded from a CSV file and joined to the geographic features via their FIPS code.

KKwasi Acquaye

90% match

Loading thumbnail…

A9 Choropleth Map in D3

This choropleth map visualizes poverty rates across U.S. counties, using a blue sequential color scale to encode the percentage of residents in poverty for 2021. County boundaries are rendered as SVG paths via `d3.geoPath()` from TopoJSON data, while color values are mapped from a CSV dataset joined by FIPS codes. The map includes a hover tooltip via SVG `<title>` elements, and missing data appears gray. It uses D3 v7, TopoJSON, and d3-legend for potential legend support.

EEric Yao

90% match