Skip to main content
SimilarExport ZIP
100%

HC

✓ Published0🌍 Public
Ssunnyshih0312@gmail.com
Last edited Oct 25, 2024
Created on Oct 25, 2024
Forked from hw7_test

This visualization shows air pollution measurements over time using a horizon chart, a technique that reduces vertical space by layering offset copies of a line chart with varying color bands. It displays multiple pollutant types as separate horizontal ribbons, allowing compact comparison of trends. The chart is rendered as SVG using D3 v6, with scales constructed via `scaleLinear` and `scalePoint`, and axes via `axisTop` and `axisLeft`. Data is loaded from a CSV file and preprocessed before being passed to a custom `HorizonChart` function that uses `d3.area` for the layered paths.

AI-generated description
MIT Licensed

Similar vizzes

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

Homework 7: Horizon Chart

This example visualizes daily average air pollution levels for six pollutants across multiple districts over a selected year. The horizon chart technique uses stacked, color-coded bands to encode value magnitudes, with the number of bands adjustable via a dropdown. It loads data from a CSV file using d3.csv, transforms and aggregates measurements by date and district, and renders SVG axes and paths using d3.scaleTime, d3.scaleLinear, and d3.axisBottom. Users switch between years and band counts through interactive HTML select elements.

YYang Shun Yu
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…

Horizon chart

This visualization uses horizon charts to compare six air pollutants (SO2, NO2, CO, O3, PM10, PM2.5) across multiple monitoring stations over time. Each pollutant’s daily median values are rendered as a series of stacked, color-shaded bands, where the number of bands is user-adjustable, revealing amplitude variations. The charts are built with D3.js (v5 and v7), using `d3.rollup`, `d3.area`, and `d3.scaleUtc` to aggregate and lay out the data, with a custom color scheme per pollutant. The interface allows selecting a specific year and band count, updating all six SVG views accordingly.

Sstanley.shen2003@gmail.com
80% 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
79% match
Loading thumbnail…

Horizon Chart

This interactive visualization displays daily average air pollutant concentrations (SO2, NO2, O3, CO, PM10, PM2.5) across multiple monitoring stations. Users select a year and the number of color bands through dropdown menus. Six horizon charts, one per pollutant, show temporal trends using d3.scaleLinear, d3.axisBottom, d3.axisLeft, and the d3.curveLinear path generator. Data comes from Iris.csv, preprocessed by averaging hourly measurements into daily values per station. The horizon chart technique stacks mirrored areas in alternating colors to increase perceptual resolution of small variations.

Hhi4u2qzy@gmail.com
79% match
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
78% 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
78% match