map with aqi data

100%

map with aqi data

✓ Published1🌍 Public

Last edited Oct 18, 2022

Created on Jul 28, 2022

This map displays air quality index (AQI) readings as circles overlaid on a U.S. states map, with circle size proportional to AQI values. It renders SVG via React, using d3.geoPath with a geoAlbersUsa projection for the map outlines and d3.scaleSqrt to map AQI to radii. The data is loaded as CSV from a GitHub gist, while state boundaries come from the us-atlas TopoJSON. Hovering over a circle shows a tooltip with its AQI value.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

AQI data in America over histogram

This visualization maps Air Quality Index (AQI) data across the United States, displaying each monitoring site as a circle sized proportionally to its AQI value. The map uses a `geoAlbersUsa` projection and `geoPath` to render state boundaries from TopoJSON, while circles are scaled with `scaleSqrt` on a dataset from a CSV file. The React-based interface integrates D3 v5 for data loading and map rendering, with SVG elements providing a clear, interactive view of regional air quality variations.

CChase Hall

90% match

Loading thumbnail…

AQI data in america

This example displays a map of the United States with circles representing the population of various cities, colored in blue to contrast against the teal state boundaries. Using the `geoAlbersUsa` projection from `d3`, the map renders state outlines and interiors via `geoPath`. A `scaleSqrt` function maps city populations to circle radii, while React manages the application state and loads both the US Atlas TopoJSON and city CSV data. The visualization highlights population distribution without explicitly referencing AQI values.

CChase Hall

88% match

Loading thumbnail…

Fork of map with aqi data with histogram

This interactive visualization combines a map of U.S. states with a time-based histogram of air quality index (AQI) values. The map shows data points as blue circles, with radius scaled by AQI using a square-root transform. A separate histogram displays the monthly average AQI over time, binned by month. The visualization uses React with D3 v5 APIs, including `d3.geoAlbersUsa` and `d3.geoPath` for map projection and rendering, and `d3.histogram` with `timeMonths` for binning. Data is loaded from a CSV file containing ozone samples with geographic coordinates and dates.

CChase Hall

86% match

Loading thumbnail…

AQI (or any data) Data in America by State

This interactive visualization combines a choropleth map of the United States with a linked time-series histogram to explore Air Quality Index (AQI) data by state. The map, rendered with d3.geoPath and geoAlbersUsa, colors each state using a quantile scale based on AQI values. The histogram below aggregates daily readings into monthly bins, and users can brush across it to filter the map’s coloring. Built with React and d3.v5, it loads CSV data from a GitHub gist and US state boundaries from a TopoJSON file.

TToly

85% match

Loading thumbnail…

Fork of AQI Data in America by State

This interactive visualization presents daily AQI measurements across U.S. states on a choropleth map, where each state’s fill color reflects its average AQI using a quantile color scale. A linked date histogram below enables brushing to filter the map to a selected time range, with the map updating to show only those states’ data. Built with React and D3 v5, it uses `d3.geoAlbersUsa` and `d3.geoPath` for map projection, `d3.scaleQuantile` for coloring, and `d3.brushX` for interactive selection. The data comes from a CSV file loaded via `d3.csv`.

EEarnAnurat

85% match

Loading thumbnail…

Fork of Fork of AQI Data in America by State

A choropleth map of the United States colors each state by its average Air Quality Index (AQI), using a quantile color scale with eight green-to-red bins. A white fill marks states without data. The visualization pairs the map with a time-series histogram showing monthly mean AQI values, though the histogram is not visible in the final render. Built with React and D3 v5, the map uses `d3.geoAlbersUsa` and `d3.geoPath` to project TopoJSON state boundaries from the us-atlas package, while the histogram applies `d3.bin` and `d3.brushX` for interactive filtering of the map by date range. Data comes from a CSV of ozone measurements.

UUmarani Vemula

85% match

Loading thumbnail…

Fork of Fork of AQI Data in America by State

This visualization displays US Air Quality Index (AQI) data as a choropleth map, where each state is filled with a color representing its average AQI value. A time-series histogram of AQI readings is also present, allowing users to brush over a date range to filter the map's displayed data. Built with React and D3 v5, the map uses the `geoAlbersUsa` projection and `geoPath` to render state boundaries from TopoJSON, while the histogram uses `scaleTime` and `histogram` to bin data. The dataset is loaded via `d3.csv` from a GitHub-hosted CSV file.

NNIRANJANAN24

84% match

Loading thumbnail…

Fork of Fork of AQI Data in America by State

This visualization combines a choropleth map of average AQI values by U.S. state with a linked time-series histogram. The map uses d3.geoPath and d3.geoAlbersUsa to render state boundaries, with colors assigned via d3.scaleQuantile. A brush on the histogram filters the map to show only data within a selected date range. The histogram bins daily AQI readings by month using d3.histogram and displays the mean value per bin. React manages the state and rendering, with data loaded from a CSV file.

IItacheeeey

84% match