Example AQI Data in Scatter Plot

100%

Example AQI Data in Scatter Plot

✓ Published2🌍 Public

Last edited Aug 3, 2022

Created on Jun 29, 2022

This scatter plot visualizes Air Quality Index (AQI) values over time, colored by the dominant pollutant type for each recorded date. Each circle represents a daily measurement, with the y-axis showing the AQI value and the x-axis encoding the date. The visualization is built using Vega-Lite’s API via `vega-lite-api`, with data loaded from a CSV file using `d3.csv`. A firebrick rule line marks a fixed y-value of 20, and tooltips display the specific pollutant and AQI value for each point.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

tests

This visualization plots air quality index (AQI) values over time, with each point colored by the main pollutant type. It uses the vega-lite-api library to construct a scatterplot with tooltips showing AQI value and pollutant. A horizontal red rule line is also drawn at a fixed y-value of 20, though its significance is not labeled. The data is loaded from a CSV file hosted on GitHub using d3.csv, and the visualization is rendered with Vega-Lite in an SVG view.

CChase Hall

88% match

Loading thumbnail…

interactive graph

This interactive scatterplot displays air quality index (AQI) values over time, plotting each daily measurement as a point with a fixed size and full opacity. Hovering reveals the exact AQI value via tooltip. The visualization loads daily API data from a CSV file using `d3.csv`, then builds the chart with the vega-lite-api library, which registers Vega and Vega-Lite and renders to SVG. The chart automatically fits the window size and applies custom styling for readability.

CChase Hall

87% match

Loading thumbnail…

AQI in Different Cities

The visualization displays Air Quality Index (AQI) values as a heatmap across different cities and timestamps, with color intensity reflecting pollution levels. Each rectangular cell encodes a city-time pair, and tooltips reveal exact AQI numbers on hover. The code uses the d3.csv API to load the AQI_2015.csv dataset, then constructs the graphic through the Vega-Lite API (vl.markRect) with fields mapped to the x-axis, y-axis, color scale, and tooltip. The resulting SVG renderer output is configured with custom axis styling and tooltip handling via vegaTooltip.

LLichenYang

83% match

Loading thumbnail…

bar graph exsample

This example combines a bar graph and a line graph to compare Air Quality Index (AQI) values across different pollutants. The bar chart displays AQI values with tooltips, while the line chart overlays the same data points, both sharing the x-axis for AQI and y-axis for pollutant names. The visualization uses vega-lite-api, registering vega and vega-lite, and loads data from a CSV file via d3.csv. Custom axis and label styling is applied through a config object to improve readability.

CChase Hall

80% match

Loading thumbnail…

API in Different Cities

This example shows hourly Air Quality Index (AQI) readings across multiple Chinese cities, with each city’s time series plotted as an area chart and stacked vertically for comparison. The visualization uses a Vega-Lite specification embedded via `vegaEmbed`, which declares temporal x-axes, quantitative y-axes, and row facets for city names. Data is loaded from a CSV file using `d3.csv`, and the chart re-renders on window resize by re-calling `vegaEmbed` with updated dimensions. The code references D3 v4 for data loading and Vega-Lite v2 for the visual encoding.

LLichenYang

79% match

Loading thumbnail…

Vis for Project

This visualization shows the average Air Quality Index (AQI) for six pollutants—CO, NO2, SO2, PM10, PM2.5, and Ozone—as a pie chart with a custom legend listing each pollutant and its mean value in units. The code loads a CSV dataset from a GitHub gist, aggregates the pollutant-specific AQI values by summing and averaging non-void entries, and renders the result using D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10`. The SVG is drawn with paths, and each segment includes a mouseover handler that logs the pollutant’s AQI to the console.

Llibramanju

77% match

Loading thumbnail…

Example AQI Data in Bar Graph

This bar graph displays the Air Quality Index (AQI) values for various pollutants in Maine, with each pollutant represented as a horizontal bar whose length corresponds to its AQI measurement. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. SVG rectangles are rendered for each bar, with axes created through custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV file using D3’s `csv` function, and hovering over a bar reveals its exact AQI value via a tooltip.

CChase Hall

77% match

Loading thumbnail…

Example AQI Data Per Day of the Week

This interactive bar chart displays Air Quality Index (AQI) values for three pollutant types (Ozone, PM2.5, and PM10) across each day of the week. The visualization updates dynamically when users click buttons for Monday through Sunday, swapping between seven pre-defined datasets. Built with d3.v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a custom `d3.scaleQuantile` color scale with a purple sequential palette. The SVG rendering includes animated transitions when data changes, with button focus states managed through CSS.

CChase Hall

75% match