Reusable D3 Scatter Plot

100%

Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited May 19, 2023

Created on May 19, 2023

This interactive scatter plot displays the relationship between particulate matter (PM2.5) levels in 2010 and 2018 across U.S. counties, with each circle representing a county. Built with a reusable D3.js component within a React application, it renders as an SVG using the `scaleLinear` API for axis scaling and `axisLeft`/`axisBottom` for chart annotations. The visualization leverages D3's `select` and `join` methods for efficient DOM manipulation, making it adaptable to different datasets through configurable accessor functions. Data is sourced from a CSV file containing historical PM2.5 measurements.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the relationship between U.S. county-level PM2.5 air pollution measurements from 2010 and 2018, using data from a raw GitHub-hosted CSV file. Each point represents a county, with positions mapped through D3’s `scaleLinear` and `extent` functions. The visualization uses D3 v7 to load the data via `csv`, filter rows with null values, and render circles in an SVG. Axes are generated using `axisLeft` and `axisBottom`, all embedded within a React-hosted HTML page that fills the viewport.

KKhanin Sisaengsuwanchai

87% match

Loading thumbnail…

Fork of PM 2.5 Particle Change in US_test

This animated choropleth map visualizes changes in PM2.5 particle concentrations across U.S. counties from 2000 to 2018. Users can scrub through years via a vertical slider or trigger automatic playback, with color intensity reflecting pollution levels via a d3.interpolateYlGnBu sequential scale. Built with React and D3 v5, the SVG map uses d3.geoPath with a geoIdentity projection for county boundaries, while a ColorLegend component renders a gradient bar with tick marks. The data is loaded via d3.csv, and each state’s border is highlighted on hover.

爬爬爬

80% 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

80% match

Loading thumbnail…

Fork of PM 2.5 Particle Change in US

This interactive choropleth map shows the change in PM2.5 particulate matter concentrations across US counties from 2000 to 2018. A vertical slider and play button animate through years, with counties colored on a sequential YlGnBu scale where darker blue indicates higher pollution levels. The visualization uses D3 v5 geo projections via `d3.geoIdentity` and `d3.geoPath` to render TopoJSON county boundaries from the US Atlas, with React managing the state and year updates. County-level PM2.5 data comes from a CSV file, and hover tooltips display exact values.

Xxychen0612.cs09@nycu.edu.tw

79% 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

79% 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

79% 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

79% 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

78% match