The next 24 hours AQI in Beijing (area)

100%

The next 24 hours AQI in Beijing (area)

✓ Published1🌍 Public

Last edited Mar 25, 2020

Created on Mar 25, 2020

Forked from The next 24 hours AQI in Beijing (line)

This area chart shows the predicted Air Quality Index (AQI) in Beijing over the next 24 hours, with time on the x-axis and AQI values on the y-axis. The smooth curve, generated using D3’s `area` generator with `curveBasis`, highlights rising pollution levels from evening to midday. The visualization loads hourly forecast data from a local CSV file and renders it as an SVG. Axes and gridlines are drawn with `axisBottom` and `axisLeft`, while `scaleTime` and `scaleLinear` map the data coordinates.

AI-generated description

北京市未来24小时空气质量预报面积图

数据来源：[http://www.weather.com.cn/weather/101010100.shtml]

MIT Licensed

Similar vizzes

Loading thumbnail…

The next 24 hours AQI in Beijing (line)

This visualization displays the Air Quality Index (AQI) forecast for Beijing over a 24-hour period, showing a clear upward trend. The line chart, rendered as an SVG using D3 v5, maps timestamps on the x-axis and AQI values on the y-axis. The code uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.line` with `curveBasis` for a smooth line, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a local CSV file.

Wwyh1029

94% match

Loading thumbnail…

The next 24 hours AQI in Beijing (dot)

This dot chart displays Beijing’s Air Quality Index (AQI) forecasts for the next 24 hours, with each circle representing an hourly reading from March 25–26, 2020. The data comes from weather.com.cn and shows AQI values rising from 95 to a peak of 232 before declining. The visualization uses D3 v5 with `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for gridlines, and SVG circles to plot points. Timestamps are parsed as JavaScript `Date` objects, and the chart includes labeled axes and a title.

Wwyh1029

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

80% match

Loading thumbnail…

Anual AQI (2015) of Tianjin, Shanghai and Guangzhou

This visualization shows the annual Air Quality Index (AQI) for 2015 across three Chinese cities—Tianjin, Shanghai, and Guangzhou—as a streamgraph with wiggling stacked areas. Each city’s monthly AQI values are interpolated to create smooth, colored bands. The visualization uses d3.stack with d3.stackOffsetWiggle and d3.stackOrderInsideOut to generate the layers, and d3.area with d3.curveBasis for rendering. Hovering over a path highlights it in black. The code loads data from a local AQI.json file and employs d3-scaleTime for the x-axis and d3-scaleOrdinal with d3.schemeCategory10 for colors.

LLichenYang

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

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

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

65% match

Loading thumbnail…

NYC Air Quality Area Chart

This area chart tracks NYC PM2.5 air pollution levels from February to May 2020, showing a decline in particulate matter during the early COVID-19 period. The visualization uses D3 v5 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, an `area()` generator with `curveBasis` for the smoothed fill, and `axisLeft`/`axisBottom` for ticks. Data is loaded from a local CSV file via `d3.csv` and mapped to the weekly measurements.

AAnnie Liao

64% match