Skip to main content
SimilarExport ZIP
100%

AQI in Different Cities

✓ Published0🌍 Public
LLichenYang
Last edited Dec 14, 2019
Created on Oct 31, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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
84% match
Loading thumbnail…

Example AQI Data in Scatter Plot

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.

CChase Hall
83% match
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
81% match
Loading thumbnail…

AQI Over Time

This visualization tracks Air Quality Index (AQI) over time for Chinese cities, beginning with a series of hourly line charts for Beijing, and then shifting to a stacked area chart showing monthly AQI totals for Beijing, Tianjing, Shanghai, and Guangzhou. The first chart uses Vega-Lite and d3.csv to render the data, while the second employs d3.stack, d3.area, d3.areaLabel, and d3.scaleOrdinal to build the stacked areas. Both chart components are responsive, re-rendering on window resize to fill the available viewport.

LLichenYang
81% 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
80% match
Loading thumbnail…

AQI Data in America by county

This interactive visualization displays a choropleth map of air quality index (AQI) data across U.S. counties, with each county colored by its AQI value according to a quantile scale. A brushed time-series histogram below the map filters the displayed data by collection date, allowing users to explore how AQI varies temporally. The map uses d3.geoPath with a geoAlbers projection and topojson county boundaries, while counties without data appear gray. The histogram is built with d3.bin and d3.brushX, and the entire interface is rendered as SVG within a React framework, reading from a CSV dataset.

CChase Hall
79% match
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
78% 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
78% match