Fork of Fork of Hello VizHub

100%

Fork of Fork of Hello VizHub

✓ Published1🌍 Public

Last edited Dec 4, 2024

Created on Dec 4, 2024

This example visualizes daily air-pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix using D3 v6. It renders an SVG multi-line chart, with each pollutant line colored by a categorical scale and labeled near its final data point. The code loads data from a local CSV, parses dates with `d3.timeParse`, and generates paths with `d3.line`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub

This visualization shows daily air quality measurements from a Phoenix EPA monitoring site, comparing mean concentrations of four pollutants (NO₂, O₃, SO₂, CO) and an overall AQI value across dates in early January 2000. It renders as a grouped bar chart using D3 v6, with `d3.scaleBand` for the date and pollutant groupings, `d3.scaleLinear` for the y-axis, and `d3.schemeSet2` for categorical colors. Hovering over bars triggers a tooltip via D3’s mouse events. The SVG chart loads data from a CSV file, parsing dates with `d3.timeParse` and formatting axis ticks with `d3.timeFormat`.

Hharshabandi3060@gmail.com

89% match

Loading thumbnail…

D3 viz 1

This visualization shows daily air pollution trends for four pollutants—NO2, O3, SO2, and CO—in Phoenix, Arizona, using data from January 2000. Multiple time-series lines are drawn in an SVG, with each pollutant assigned a distinct color via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.csv` to load the dataset, `d3.timeParse` to convert dates, and `d3.line` to generate the paths. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and a legend is placed at each line’s final data point.

Hharshabandi3060@gmail.com

89% match

Loading thumbnail…

Fork of Fork of Hello VizHub

This heatmap shows daily mean concentrations of four air pollutants (NO2, O3, SO2, and CO) over time, with color intensity indicating pollution levels. The visualization uses D3.js v6 to read a CSV file of EPA air quality data, parse dates, and render an SVG with a color scale based on the `d3.scaleSequential` with the YlGnBu interpolator. Each cell represents a pollutant-date combination, and hovering reveals a tooltip with the exact date and value. The chart employs `d3.axisTop` and `d3.axisLeft` for labeled axes.

Hharshabandi3060@gmail.com

87% match

Loading thumbnail…

Fork of Hello VizHub

This scatterplot visualizes NO2 mean levels over time using air pollution data loaded from a GitHub-hosted CSV. The view uses an SVG with D3 v7 to render blue circles for each data point, with time-based x-axis and linear y-axis. Code demonstrates D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for chart construction, plus mouseover tooltips via D3 selections. The example also showcases importing D3 via UNPKG and local ES6 modules, as in the original Hello VizHub template.

Hharshabandi3060@gmail.com

84% match

Loading thumbnail…

d3 vz 2

This interactive parallel coordinates plot visualizes daily air quality measurements for multiple pollutants (NO2, O3, SO2, CO) and the overall AQI at a Phoenix monitoring station across January 2000. Each line represents one day, colored via `d3.interpolateTurbo` based on AQI, with axes drawn using `d3.axisLeft`. The D3.js (v6) code loads CSV data with `d3.csv`, uses `d3.scaleLinear` and `d3.scalePoint` for coordinate mapping, and renders SVG paths with `d3.line`. Hovering reveals a tooltip showing the date and AQI, while the animated color gradient highlights pollution severity.

Hharshabandi3060@gmail.com

83% match

Loading thumbnail…

d3 v3

This visualization presents a grouped bar chart of daily air quality measurements from a single monitoring station in Phoenix, Arizona, showing mean concentrations for NO2, O3, SO2, CO, and the AQI. Built with d3.js v6, it loads data from a local CSV via `d3.csv`, parses dates with `d3.timeParse`, and uses `d3.scaleBand` for both the date and pollutant groupings. The interactive tooltip appears on mouseover, and the chart uses `d3.axisLeft` and a rotated `d3.axisBottom` with `d3.timeFormat` for clear temporal labeling.

Hharshabandi3060@gmail.com

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

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

79% match