Skip to main content
SimilarExport ZIP
100%

A9 - choro

✓ Published0🌍 Public
RRavneet Singh Bhatia
Last edited Apr 1, 2024
Created on Apr 1, 2024
Forked from HTML Starter

This choropleth map visualizes county-level population estimates across the United States, with each county colored on a sequential green scale from light (approximately 900 people) to dark (up to 4 million). The map is rendered as SVG using React, with geographic boundaries drawn via `d3.geoPath` and an equirectangular projection. Population data, loaded from a local CSV file, is joined to county features by name, and counties lacking data appear in gray. The map supports interactive zooming through `d3.zoom`, transforming the SVG paths in response to user gestures.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A9 - Choropleth Map

This example displays a choropleth map of population estimates by U.S. county, using a green sequential color scale to encode values from roughly 900 to 4 million. It loads GeoJSON county boundaries and a CSV dataset, then renders the map with `d3.geoPath` and an equirectangular projection. The map supports zooming and panning through `d3.zoom`, and each county includes a tooltip showing its name and population.

RRavneet Singh Bhatia
90% match
Loading thumbnail…

[A9] US Population 2020(Choropleth Map)

This choropleth map displays the population of each US state for 2020, using a green color scale with thresholds that categorize states from under 50,000 to over 30 million residents. The map is rendered as an SVG using the D3.js v7 library, with state boundaries drawn via `d3.geoPath()` and a Mercator projection centered on the continental US. Population data is loaded from an external CSV and joined to GeoJSON state features by area name, enabling tooltips that show each state's population on hover. The map employs D3's threshold scale and sequential color scheme to visually encode population density.

Cctan13@dons.usfca.edu
84% match
Loading thumbnail…

A9- Choropleth Map

This choropleth map visualizes US state populations using a purple color scale, with states lacking data rendered in gray. Built with D3.js, it loads GeoJSON and CSV data via `d3.json` and `d3.csv`, then draws state boundaries with `d3.geoPath` and `topojson.feature`. A quantized color scale (`d3.scaleQuantize`) maps population values to fills, and a legend with thresholds is rendered using `d3.pairs` and `d3.format`. The map is rendered as SVG with white state borders, and the legend sits in the lower right corner.

SSukhraj Singh
83% match
Loading thumbnail…

A9-US Choropleth Map

This animated choropleth map displays the 2020 census population for each U.S. state, using a color scale to encode population values with interactive tooltips. The visualization loads population data from a CSV file and U.S. state boundaries from TopoJSON, then uses `d3.geoAlbersUsa()` for the projection and `d3.geoPath()` to render the SVG paths. State polygons are colored by population via a color scale, with a tooltip showing details on hover.

Bbhavi.kenia@gmail.com
82% match
Loading thumbnail…

A9 - Choropleth map

This choropleth map visualizes poverty estimates across US counties in 2021, using a red sequential color scale to encode rates. The map renders county boundaries as SVG paths via `d3.geoPath` and TopoJSON, with white state borders overlaid for context. Hovering over a county triggers a CSS tooltip displaying the area name, state, and poverty value, while the county highlights in steel blue through a class toggle. A legend with an `axisBottom` scale maps thresholds from 0 to 50 percent, and data loads from an external CSV with `d3.csv`.

DDuc Pham
81% match
Loading thumbnail…

A9- Choropleth Map

A choropleth map displays the poverty rate for every county in the US for 2021, with counties colored on a sequential red scale. Hovering over a county reveals its name and poverty percentage via a tooltip. Built with React and D3 v7, the visualization uses `d3.geoPath` to render county and state boundaries from a TopoJSON file, while `d3.json` and `d3.csv` load geographic and poverty data. A legend, created with `d3.scaleLinear` and `d3.axisBottom`, maps the color scale to percentages.

SShazil Taqi
80% match
Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays 1990 county-level population estimates from a CSV file, with counties shaded from light beige to dark red based on population. The map uses a blue-to-red sequential color scale, and hovering over a state dims others, highlights the selected one with a black stroke, and shows a tooltip with the state name and its population value. Built with D3.js (d3.v3), the visualization uses `d3.csv` to load data, `d3.geo.path` to render geographic features from a TopoJSON file, and `d3.mouse` events to manage tooltip positioning.

Pprateekvasi
80% match
Loading thumbnail…

A9: D3 Choropleth Map

This choropleth map visualizes county-level poverty population data for 2023 across the United States. It uses a quantile color scale with six classes from light pink to dark red to show the distribution of poverty counts. Built with D3.js and TopoJSON, the map renders county boundaries as SVG paths using `d3.geoPath`, and includes interactive tooltips that display county names and data values on hover. The data is loaded from a local CSV file and joined to geographic features by FIPS codes.

Rronnieferrufino4908@gmail.com
80% match