Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Eeyxxr1260@gmail.com
Last edited Oct 25, 2024
Created on Oct 25, 2024

This interactive horizon chart visualizes air pollution measurements across Seoul districts, allowing users to compare six pollutants (CO, NO2, O3, PM2.5, PM10, SO2) for selected years (2017–2019) and adjustable band counts. Built with D3 v7 and SVG, it uses `d3.csv` to load data, `d3.schemeBlues` and related color schemes for pollution-specific palettes, and `select` elements with change events to re-render the chart. The SVG dimensions are fixed at 1200×950 pixels, with margins defining the plotting area.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a Horizon Chart for visualizing air pollution measurements across multiple locations over time. The interactive interface allows users to select a specific year/month, pollution class (PM2.5, PM10, NO2, etc.), color scheme from six D3 sequential scales, and adjust the number of bands via a slider. The chart is rendered using SVG, with data loaded from a CSV file via `d3.csv` and processed using `d3.timeParse` and `d3.curveLinear`. The visualization applies the `d3.schemeBlues` through `d3.schemeGreys` color arrays to encode amplitude through color intensity.

Eeyxxr1260@gmail.com
90% match
Loading thumbnail…

Fork of HTML Starter

This interactive horizon chart visualizes air pollution measurements across multiple monitoring stations, allowing users to explore data by month, pollutant type (PM2.5, PM10, NO2, O3, CO, SO2), color scheme, and the number of bands. Built with D3.js version 7, it uses the `d3.csv` loader for external data and renders SVG output. The implementation uses `d3.timeParse` for date handling, `d3.schemeBlues` and related sequential color schemes, and a custom `HorizonChart` function with configurable curves and margins. Users can dynamically filter categories and adjust band intensity through slider controls.

Eeyxxr1260@gmail.com
85% 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
85% match
Loading thumbnail…

Data Visualization Homework 7: Horizon Chart

This D3.js 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 pollutant concentration through stacked colored bands derived from the `d3.scaleLinear` y-axis, with the `d3.area` API generating the band shapes. The visualization reads hourly measurements from an `air-pollution.csv` file, computes daily means via `d3.mean`, and renders the horizon charts as SVG paths within a 6000x10000 viewport. Colors are assigned per pollutant using custom RGB scales, with each band representing a fraction of the 98th percentile value.

Dderrick373519@gmail.com
84% 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
83% 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
82% match
Loading thumbnail…

Homework 7

The visualization displays hourly air quality measurements from a Seoul monitoring station as a horizontal chart, with each line representing a pollutant such as SO2, NO2, or PM2.5 across time. Users can zoom into specific date ranges using a dual-handle time slider that filters the displayed data. The rendered SVG chart uses D3.js v7’s `d3.drag` for interactive range selection, `d3.group` to organize data by pollutant and date, and a custom `multitext` function for labeling. The underlying data comes from a CSV file containing pollutant concentrations and timestamps.

Jji3ji3ji3195@gmail.com
80% match