Skip to main content
SimilarExport ZIP
100%

Hanumanth

✓ Published0🌍 Public
SSiddhardha
Last edited Apr 25, 2024
Created on Apr 22, 2024
Forked from HTML Starter

This example presents an interactive dashboard for exploring air pollution data across Indian states. It uses D3.js (v6) with SVG rendering to display multi-line charts tracking yearly levels of pollutants like SO2, NO2, RSPM, and SPM for a selected state via a dropdown menu. It also renders bar charts using `d3.rollups` and `d3.mean` to compare average pollutant concentrations across states. The data is loaded from a CSV file using `d3.csv`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Indian air quality

This dashboard visualizes air quality trends across Indian states from 1987 to 2015, showing concentrations of pollutants including SO2, NO2, RSPM, SPM, and PM2.5. A dropdown selector displays time-series line charts for each state, while bar charts compare average pollutant levels across all states. The visualization uses D3.js v6 with SVG rendering, employing `d3.rollups` for aggregating state averages, `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` for data encoding, with color mapping via `d3.scaleOrdinal` and `d3.schemeCategory10`.

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

Agriculture

This visualization dashboard displays pollution trends across Indian states using two complementary chart types. A line chart tracks pollutant concentrations (SO2, NO2, RSPM, SPM, PM2.5) over time for a user-selected state via an interactive dropdown menu. Four bar charts compare average pollutant levels across all states. The D3.js code (v6) uses d3.csv to load data, d3.rollups for aggregations, d3.scaleOrdinal with d3.schemeCategory10 for coloring, and d3.axisBottom/axisLeft for scales, rendering all charts as SVG elements.

Aaashrithas2000@gmail.com
78% match
Loading thumbnail…

Question 2

This interactive D3.js visualization displays PM2.5 air pollution levels in India, separated by year. The SVG chart animates a line and area graph of pollutant concentrations, with color-coded bands indicating air quality categories from "Good" to "Hazardous." Users select years via clickable buttons, triggering a transition that redraws the data. The tooltip reveals exact values and health status on hover, with data loaded from a CSV file hosted on GitHub Gist.

Bbhavanasruthikakarlapudi@gmail.com
76% match
Loading thumbnail…

Final Project

This example visualizes air quality patterns, comparing SO2, particle, and NO3 concentrations across 31 U.S. states from 2008 to 2018 through animated line charts. Users select a pollutant via radio buttons, triggering an animation that reveals trends over time. The visualization uses D3.js v4 with SVG rendering, featuring a custom color palette for state-specific lines. The code integrates React for structure and employs D3’s data join and transition methods to update the chart dynamically, with data embedded directly in the script.

YYi Yang
74% 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
Loading thumbnail…

Fork of Final Project

This interactive visualization reveals patterns in air quality data across U.S. states from 2008 to 2018, allowing users to toggle between views of SO2, particulate matter, and NO3 concentrations. The code uses D3.js v6 to render an SVG with animated transitions, mapping state abbreviations along the y-axis and years on the x-axis. Radio buttons trigger distinct animation functions for each pollutant, each displaying differently colored data points with numeric labels formatted using `d3.format`. The visualization employs a React framework and computes aggregated pollutant averages from the embedded dataset.

YYi Yang
73% match
Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality measurements from the London Datastore, plotting pollutant concentrations over time with a dropdown menu to switch between different pollutants. The chart renders smooth multi-line paths for each year using d3.line and curveBasis, while a dynamic y-scale and axis labels update to reflect the selected measurement. The dropdown menu, built with d3.select and .on('change'), triggers a render function that recomputes the line chart with the newly chosen column. Color-coded lines distinguish annual trends, with a legend explaining the color scale.

KKeerthiKandadai
72% match