Skip to main content
SimilarExport ZIP
100%

d3 v3

✓ Published0🌍 Public
Hharshabandi3060@gmail.com
Last edited Dec 4, 2024
Created on Dec 4, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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
89% match
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
86% 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
85% match
Loading thumbnail…

Fork of Fork of Hello VizHub

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`.

Hharshabandi3060@gmail.com
82% match
Loading thumbnail…

Fork of Making a Bar Chart

This visualization displays the daily Air Quality Index (AQI) values for two pollutants, NO2 and Ozone, as horizontal bars. It shows how AQI levels fluctuate over time for each pollutant type, with the x-axis representing AQI values and the y-axis listing pollutant categories. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, with data loaded from a local CSV file. Custom axis label formatting is applied using D3's `format` function, and the chart includes a title and axis label for the AQI value.

CChase Hall
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
79% match
Loading thumbnail…

1025

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.

Eeyxxr1260@gmail.com
77% 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
76% match