Skip to main content
SimilarExport ZIP
100%

D3 - Choropleth

✓ Published0🌍 Public
CChandana Srinivas
Last edited Apr 1, 2024
Created on Apr 1, 2024
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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…

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…

Choropleth Map of County Data

A choropleth map of U.S. counties visualizes poverty rates as filled paths, with a color legend and axis labeling the percentage scale. Built with d3.v5, it loads TopoJSON county boundaries and a CSV of poverty data, then uses d3.geoPath to render SVG shapes and d3.scaleThreshold with d3.schemeGreens for the color encoding. State borders are drawn as white mesh lines, and hover tooltips show each county’s exact rate.

Yyqinolive
93% 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
92% match
Loading thumbnail…

Choropleth map in D3

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.

EEunice Tu
92% match
Loading thumbnail…

Choropleth Map of County Data

This choropleth map displays poverty rates across U.S. counties, with each county filled using a green sequential color scale from d3.scaleThreshold and d3.schemeGreens[5]. The visualization loads county boundaries from a TopoJSON file and joins them with CSV poverty data via d3.map, rendering the geographic features as SVG paths using d3.geoPath. A legend with a linear scale and axisBottom shows the poverty percentage range, while state borders are drawn as white strokes using topojson.mesh. Tooltips provide exact poverty percentages on hover.

Ssayanighosal34
92% match
Loading thumbnail…

A9 Choropleth

This choropleth visualizes U.S. county-level poverty rates for 2021, with each county colored along a threshold scale of green shades; hovering reveals a tooltip with the county name and its exact percentage. The map is rendered as SVG using D3 v7’s `d3.geoPath` and TopoJSON `topojson.feature` to draw county boundaries, while a separate mesh path outlines counties lacking data. Poverty data is loaded from a CSV via `d3.csv`, and the color legend is generated with the d3-legend library. The visualization also includes a title and uses a linear scale to position the legend.

NNoah C.
91% match
Loading thumbnail…

D3 Choropleth Map

This D3 Choropleth Map visualizes U.S. county poverty rates for 2023. Each county is filled with a color from a threshold-based scale indicating the percentage of the population in poverty, with state averages used where county data is missing. The map uses a geoAlbersUsa projection and draws county boundaries via d3.geoPath, with hover interactions revealing a tooltip. Data is sourced from a remote CSV and county geometries from the us-atlas package.

Rragregory@dons.usfca.edu
91% match