Skip to main content
SimilarExport ZIP
100%

Two Decades of Pollution in US with menus

✓ Published0🌍 Public
Ggeorgeeeee
Last edited Oct 8, 2020
Created on Oct 8, 2020

This interactive choropleth map displays PM2.5 concentration across US counties for each year from 2000 to 2004, with a React-driven dropdown menu to switch between annual datasets. The visualization uses Vega-Lite’s `markGeoshape` with an Albers USA projection, joining county-level pollution data from a CSV via `vl.lookup`, and encodes concentration values with a clamped color scale. React’s `useState` and a custom `Dropdown` component control the selected year, triggering a re-render of the Vega view. The underlying data comes from the PM2.5 by County dataset, with styling drawn from d3’s `hcl` color utilities.

AI-generated description

The source dataset of this visualization is PM2.5 by County. It shows the pm2.5 concentration of the US counties from 2000 to 2004.

Each region block represents the pm2.5 concentration of the county.

Just want to show how to implement menu by react. This solution is a bit tricky. Need to use Bind a Selection for more delicate one.

References: Scatter Plot with Menus

MIT Licensed

Similar vizzes

Loading thumbnail…

Two Decades of Pollution in US

This visualization shows PM2.5 pollution across US counties for the year 2000, using a choropleth map colored by concentration levels. It builds the map with vega-lite-api, joining county GeoJSON topojson data with a PM2.5 CSV dataset via a lookup transform. The visualization uses an Albers USA projection, encodes the pollution values on a clamped color scale, and renders tooltips showing exact concentrations. It integrates D3 version 5 and React for the interface setup.

Ggeorgeeeee
90% match
Loading thumbnail…

Pollution in US with counties by React and d3

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.

AAbdul Salam Almadani
86% match
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
85% 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
83% 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
83% match
Loading thumbnail…

Fork of PM 2.5 Particle Change in US

This interactive choropleth map visualizes PM2.5 particle concentration changes across US counties from 2000 to 2018. A slider, oriented vertically on the left with auto-play, lets users scrub through the years, revealing shifting pollution hotspots. Each county polygon is filled using a `d3.scaleSequential` with `interpolateYlGnBu` color scale, where darker blues represent higher concentrations. Built with React and D3 v5, it uses `d3.geoPath` with an Albers projection on topojson data, and includes a gradient legend with tick marks for reference.

DDonald Bagwell
83% match
Loading thumbnail…

PM 2.5 Particle Change in US

This interactive choropleth map visualizes annual PM2.5 particle concentrations across US counties from 2000 to 2018. A slider and play button animate through years, updating county fill colors via d3.scaleSequential with interpolateYlGnBu. The visualization uses d3.geoPath with geoIdentity projection, TopoJSON county and state boundaries, and React state management for temporal navigation. County-level data comes from a CSV file, with hover tooltips showing exact values.

Mmandadi1999
82% 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
82% match