1025

100%

✓ Published1🌍 Public

Last edited Oct 26, 2024

Created on Oct 25, 2024

Forked from Shapes and Colors with SVG and CSS

This visualization displays daily average concentrations of six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) for multiple station codes in 2019. Each small multiple is a horizon chart built with D3 v6, using `d3.area` to render SVG paths and `d3.rollups` to aggregate measurements by station and date. The interactive charts support zooming via `d3.zoom` and show a tooltip on hover that reveals the exact date and pollutant value. Data comes from a CSV file loaded with `d3.csv`, with districts extracted from address strings.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

109550187_HW7

This interactive visualization shows air pollution levels across multiple monitoring stations, displaying daily average concentrations for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) as a series of stacked horizon charts. Users select a year and band number via dropdown menus, which updates React state and triggers D3 to re-render the SVG. The code uses `d3.csv` to load air pollution data from a remote server, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.mean` to aggregate hourly measurements into daily averages. Each pollutant uses a distinct color scheme, with bands overlaid to encode magnitude.

Ppatricknicholas27@gmail.com

86% match

Loading thumbnail…

hw7

This visualization presents six horizon charts displaying daily average concentrations of air pollutants (SO2, NO2, O3, CO, PM10, and PM2.5) over time. Using D3.js v6, the chart aggregates the data by day and renders each pollutant as a separate SVG canvas. The horizon chart technique overlays multiple bands with a grayscale color scheme to compactly show data variations. The implementation uses scalePoint for the time axis and scaleLinear for the value axis, with the data loaded from a CSV file containing environmental monitoring measurements.

Kkenny-wq

83% match

Loading thumbnail…

Untitled

This example visualizes daily average air pollution levels for multiple cities across six pollutants (CO, O3, NO2, PM10, PM2.5, SO2) using stacked horizon charts. Each chart represents one city-pollutant pair, with a color scale unique to each pollutant type. The code loads D3 v4 via UNPKG and the d3-horizon-chart library, processes an air-pollution.csv file by computing 24-hour means, and uses `d3.csv` and `d3.select` to bind data and render the horizon charts.

ZZeroKurosakii

82% match

Loading thumbnail…

Untitled

This example visualizes daily average air pollution levels for multiple cities across six pollutant types (CO, O3, NO2, PM10, PM2.5, and SO2) using horizon charts. Data is loaded from a CSV file, aggregated from hourly measurements, and each chart displays a time series for a city-pollutant pair with a color scale specific to the pollutant. The code uses D3 v4, the d3-horizon-chart plugin, and Canvas rendering via the horizon chart’s internal draw method. Charts are appended to the body with titles and computed average values.

ZZeroKurosakii

82% match

Loading thumbnail…

HW7

This visualization displays daily average air pollution levels for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) across multiple Seoul monitoring stations using a grid of horizon charts. Each chart encodes the pollutant concentration over time with layered color bands that fold overlapping values into the vertical axis, using D3.js v6 with SVG rendering. The code loads data from a CSV file, parses timestamps with d3.timeParse, groups measurements by date, and computes daily means via d3.mean. It applies d3.scaleTime, d3.scaleLinear, and d3.area to construct the horizon chart, with per-pollutant color scales and axis generation via d3.axisBottom and d3.axisLeft.

Jjerry70938@gmail.com

80% match

Loading thumbnail…

hw7_test

This visualization presents a horizon chart comparing daily air quality measurements across multiple pollutants (SO₂, NO₂, O₃, CO, PM10, PM25) over time for individual monitoring stations. The data comes from a local CSV file, and the chart uses a time-series x-axis with each pollutant group rendered as its own horizon band. Built with D3 v6, the implementation relies on `scaleUtc`, `scaleLinear`, `area`, `clipPath`, and `axisTop` to stack three overlaid area bands per row, using color density to encode magnitude. The SVG output is styled with Bootstrap and custom CSS.

Kkenny-wq

80% match

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS

This example shows an interactive horizon chart for air pollution data, letting users compare pollutant levels across six types (SO2, NO2, O3, CO, PM10, and PM2.5) for selected years. The visualization uses D3.js (v7) with an SVG rendering approach, displaying time-series data from a GitHub-hosted CSV dataset. It employs d3.rollup to aggregate measurements and d3.scaleTime for the x-axis, while a dropdown menu switches between annual datasets. The chart updates dynamically by redrawing the SVG elements when the user changes the year selection.

Eeyxxr1260@gmail.com

80% match

Loading thumbnail…

Fork of 1025

This animated horizon chart visualizes air pollutant concentrations (SO₂, NO₂, O₃, CO, PM10) over time, with each band color-coded by pollutant and overlaid to show temporal trends. Users toggle pollutants via switches and select time bands from dropdown menus. The chart is built with D3 v7, using SVG paths, interactive checkboxes, and a fixed tooltip to display values. The update mechanism triggers loaders and redraws the horizon bands dynamically, with pollutants rendered individually and stacked for comparison.

Eeyxxr1260@gmail.com

79% match