Skip to main content
SimilarExport ZIP
100%

hw7

✓ Published1🌍 Public
Kkenny-wq
Last edited Oct 27, 2023
Created on Oct 15, 2023
Forked from HTML Starter

This example shows a horizon chart displaying SO2 measurements over time for multiple monitoring addresses, with each horizontal band representing a different location and the color intensity indicating the measurement magnitude. The visualization uses D3 v6 to build the chart, leveraging d3.area, d3.scalePoint, and custom clipping paths to create the layered horizon effect. Data is loaded from a CSV file and preprocessed in JavaScript before being passed to the chart function. The SVG rendering approach employs reusable clip paths and color bands to show data beyond the base scale.

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
88% 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
86% 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
78% match
Loading thumbnail…

Horizon chart

This horizon chart displays multiple time-series datasets stacked vertically, each showing traffic values over time for different locations. The visualization loads data from a CSV file using d3.csv and processes it with d3.nest to group series by name and parse dates. The implementation uses d3.scaleLinear for the y-axis and prepares an d3.area generator for rendering, though the final SVG output is currently incomplete, showing only placeholder circles instead of the intended area paths.

KKams2015
77% 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
76% 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
76% match
Loading thumbnail…

Horizon chart

This visualization displays traffic data over time using a horizon chart, where each band represents a different location and the area encodes the hourly visitor count. The chart compresses the y-axis by layering positive values into colored bands, making it easy to compare patterns across multiple series. Built with D3 v5, it uses d3.nest to group the CSV data, scaleLinear for the y-axis, and an area generator with curveBasis for smooth lines. The data comes from traffic.csv, and the rendering is done with SVG.

KKams2015
75% 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
74% match