Skip to main content
SimilarExport ZIP
100%

CS 360: Assignment 9 Choropleth map in d3

✓ Published0🌍 Public
SSean Sanchez
Last edited Apr 13, 2022
Created on Apr 12, 2022
Forked from HTML Starter

This choropleth map visualizes poverty estimates across US states, with darker shades of gray indicating higher poverty rates on a 5-class ColorBrewer scale. The visualization merges data from a cleaned CSV file with US state GeoJSON boundaries using d3.csv and d3.json, then renders the map as SVG paths with d3.geoAlbersUsa projection and d3.geoPath. A d3.scaleQuantize maps poverty values to the color range, while states without matching data appear in light gray. The map includes a title and uses d3.v4 within a React framework.

AI-generated description

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

See also React Starter.

Resources:

https://github.com/scotthmurray/d3-book/blob/master/chapter_14/05_choropleth.html

Data cleaning using python. repo is below

https://github.com/seansanchez951/CS-360-Assignment-9-csv-data-cleaning/blob/main/CS360%20-%20Assignment%209%20Choropleth%20Data%20Cleaning.py

Colors derived from ColorBrewer, by Cynthia Brewer Color type: 5-class greys

https://colorbrewer2.org/#type=sequential&scheme=Greys&n=5

json data found here

https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json

MIT Licensed

Similar vizzes

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
83% match
Loading thumbnail…

A9 Choropleth Map in D3

This example displays a choropleth map of poverty rates across U.S. counties, using a sequential blue color scale to encode percentages from 0 to 100. It loads county boundaries from the TopoJSON `us-10m.v1.json` dataset and merges them with CSV data containing poverty estimates. The map is rendered as SVG paths via `d3.geoPath` with an AlbersUSA projection fit to the viewport, while `d3.scaleSequential` with `d3.interpolateBlues` determines each county’s fill color.

EEric Yao
83% match
Loading thumbnail…

Choropleth Map of County Data

This choropleth map visualizes county-level poverty rates across the United States. The map uses a green color scale, with darker shades indicating higher poverty percentages, and includes a legend with a color gradient. The visualization is rendered as an SVG and built with D3 v5, using `d3.geoPath` to draw county and state boundaries from a TopoJSON file. County data is loaded from a CSV and mapped to colors via `d3.scaleThreshold`, while tooltips display the exact poverty rate for each county.

JJacob Souch
81% match
Loading thumbnail…

Untitled

A choropleth map of the United States displays county-level poverty rates, colored with a threshold scale using a green sequential scheme. The visualization includes a legend with a color bar and labeled ticks. The code uses D3 v5 and the `d3.geoPath` and `d3.scaleThreshold` APIs, along with TopoJSON for US county boundaries and a CSV data file for the rates.

IIsha Singh
81% 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
80% 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
80% match
Loading thumbnail…

d3 chorplath map

This choropleth map of the United States displays county-level unemployment rates using a quantized color scale. The visualization renders counties as SVG paths, colored from light to dark blues based on rates from 0 to 15 percent, with state boundaries overlaid in white. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` for projection, TopoJSON for US county and state geodata, and a queue to load JSON and TSV data asynchronously.

JJn1532
80% match
Loading thumbnail…

Choropleth US Poverty 1980 to 2020

This interactive choropleth maps U.S. county-level poverty rates from 1980 to 2020, using color intensity to show geographic disparities over time. Built with D3 v7 and TopoJSON, it renders county polygons via `d3.geoPath` and applies a quantizing color scale with `d3.schemeBlues` to encode values. The visualization includes state borders for context and hover titles revealing county names and rates. Poverty data originates from the U.S. Census Bureau's historical tables, with geographic boundaries from a counties-albers-10m TopoJSON file.

PPeter Cordone
80% match