Skip to main content
SimilarExport ZIP
100%

Pollution in US with counties by React and d3

✓ Published0🌍 Public
AAbdul Salam Almadani
Last edited Oct 20, 2020
Created on Oct 20, 2020

This choropleth map displays PM2.5 air pollution concentrations across US counties for the year 2000, with counties lacking data rendered in grey. Built with React and d3.v5, the visualization uses `d3.geoIdentity` and `d3.geoPath` to project county boundaries from a TopoJSON atlas, while a `d3.scaleSequential` with an `interpolateYlGnBu` color scheme encodes pollution values. The data originates from a CSV file of county-level PM2.5 measurements, filtered through a custom React hook and passed as a Map to the SVG marks component.

AI-generated description

An early version of the final project.

  • Marked area with no data record by grey color.
  • Drew a wireframe of the US map with counties.
  • Filled the wireframe by the PM2.5 concentration data in 2000.

Data of PM2.5 concentration from PM2.5 by County.

County boundries from US county altas.

Adapted and extended from Mass School District Boundaries

Inspired by Choropleth.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pollution in US with counties by React and d3

This interactive choropleth visualizes PM2.5 pollution levels across US counties from 2000 to 2018. Users can drag a vertical slider or press a play button to animate through years, with county colors transitioning smoothly via the sequential `d3.interpolateYlGnBu` scale. Built with React and D3 v5, it uses `d3.geoPath` and `geoIdentity` projection to render county boundaries from the US Atlas TopoJSON, while county pollution data is loaded from a CSV and mapped to each feature. The legend displays the concentration range, and hovering over a county reveals its name and value.

Ggeorgeeeee
95% match
Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This choropleth map shows the concentration of PM2.5 air pollution across US counties from 2000 to 2018, with an animated play button and slider enabling temporal exploration. County colors encode pollution levels using a sequential YlGnBu scale, while state boundaries highlight administrative context. The visualization is built with React and D3 v5, using `geoPath` with `geoIdentity` projection to render SVG county shapes from US Atlas TopoJSON, with data from a CSV of county-level PM2.5 measurements.

MMar-99
93% match
Loading thumbnail…

Pollution in US with counties with color legend

This visualization displays PM2.5 concentration levels for US counties in the year 2000, with each county colored according to its pollution level. Counties without data appear in grey, while the color legend uses d3.interpolateYlGnBu to map concentration values. The map uses d3.geoPath with a geoIdentity projection fitted to US county boundary data from the US Atlas TopoJSON. The React-based implementation loads CSV data containing PM2.5 measurements and creates a Map for lookups, encoding values through a d3.scaleSequential color scale.

Ggeorgeeeee
92% match
Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This interactive choropleth map visualizes PM2.5 concentration levels across US counties from 2000 to 2018. A vertical slider and play button animate through time, updating the color-coded counties using React’s state management. The SVG map uses `d3.geoPath` with `geoIdentity` projection for county and state boundaries from the us-atlas TopoJSON. Data from a CSV file is filtered by year, and the sequential YlGnBu color scale is applied via `d3.scaleSequential` and `d3.interpolateYlGnBu`. Hovering reveals county and state names with pollution values via tooltips.

AAndres de la Garza
91% match
Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This choropleth visualizes PM2.5 air pollution concentrations across US counties from 2000 to 2018, with a slider and play button animating through years. County colors map to concentration values via a quantile scale, while county and state boundaries are rendered using d3.geoPath with TopoJSON data from the US Atlas. React manages the interactive year state, and d3 provides the color interpolation and legend scales. Hovering reveals county names and exact values through SVG titles.

CChase Hall
91% match
Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This choropleth map of US counties visualizes PM2.5 concentration per year from 2000 to 2018, allowing users to select a specific year or trigger a play animation that cycles through the data. The map colors each county using a sequential YlGnBu color scale via `d3.scaleSequential` and `d3.interpolateYlGnBu`, with grey indicating missing data. The map is rendered with `d3.geoPath` and a `geoIdentity` projection, while a slider and play button control the temporal dimension. Data comes from a CSV file of county-level PM2.5 values, and county boundaries from the US Atlas TopoJSON.

AAndrey Getmanov
91% match
Loading thumbnail…

Pollution in US with counties with color legend

A choropleth map of the United States displays PM2.5 concentration levels for counties in the year 2000, using a sequential YlGnBu color scale from d3.interpolateYlGnBu. County boundaries come from the US Atlas TopoJSON file, rendered as SVG paths via d3.geoPath and geoIdentity. A linear gradient legend annotates the concentration scale. Data is loaded from a CSV using d3.csv and filtered into a Map for lookup. The visualization is built with React and D3 v5.

Nnadia-el
90% match
Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This interactive choropleth shows the concentration of PM2.5 particulate matter across US counties for each year from 2000 to 2018, with a slider and play button animating through time. County colors map to the sequential `d3.scaleSequential` with `d3.interpolateYlGnBu`, while state boundaries are drawn with `d3.geoPath` and `geoIdentity` from US Atlas TopoJSON data. React manages the year state and SVG rendering, with a D3 color legend showing the concentration scale.

Aall-over-yet
90% match