Skip to main content
SimilarExport ZIP
100%

Project POLLUTANTS

✓ Published0🌍 Public
PPreethi Medepalli-91
Last edited Dec 4, 2024
Created on Dec 4, 2024

This bar chart visualizes the count of each pollutant type in an air quality dataset, highlighting the distribution of pollutants across the records. The chart uses D3.js v6 to load a GitHub-hosted CSV file via `d3.csv`, process the data with array reductions, and render an SVG bar chart with `scaleBand` and `scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with bars colored steelblue that turn orange on hover. The data source is a CSV file fetched directly from a GitHub repository.

AI-generated description

The code fetches data from a GitHub-hosted CSV file using PapaParse and visualizes the top 10 pollutants with the highest average values. The bar chart includes bars and displays pollutant names and average values, making it intuitive for users to interpret the data. Axes are clearly labeled, and the chart is styled for readability.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pollutant count Project

This bar chart displays the top ten pollutants with the highest frequency in a global air quality dataset, ranked by their average count. The visualization uses a D3.js v6 SVG bar chart, where each bar represents a pollutant type and its corresponding frequency, with hover effects for interactivity. The data is fetched from a GitHub-hosted CSV file and parsed client-side using PapaParse. Axes are clearly labeled, and the chart is styled for readability, making it straightforward to compare pollutant prevalence at a glance.

PPreethi Medepalli-91
88% match
Loading thumbnail…

Project

This visualization displays a bar chart of the top 10 pollutants ranked by their average measured value, with green bars that lighten on hover for easy comparison. It loads a CSV file from GitHub using the PapaParse library to parse the data, then processes it in JavaScript to calculate averages per pollutant. The chart is rendered as an SVG using D3 v6, employing `d3.scaleBand` and `d3.scaleLinear` for the axes, with clearly labeled tick marks and axis titles for readability.

PPreethi Medepalli-91
86% match
Loading thumbnail…

Project ANalysis

This bar chart visualizes the average pollutant value for each country from a CSV dataset of world air quality. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is aggregated using `d3.rollup` with `d3.mean` to compute country-level averages. Bars change color from steelblue to orange on mouseover, providing interactive feedback to the viewer.

PPreethi Medepalli-91
86% match
Loading thumbnail…

Project most affected country

This bar chart shows the top 10 countries with the most pollution occurrences, ranked from highest to lowest count, with each bar labeled with its exact value. Built with D3 v6 and PapaParse, it loads a GitHub-hosted CSV of world air quality data, filters rows for valid country and value fields, and counts occurrences via `d3.rollup`. The x-axis uses `d3.scaleBand` with rotated labels for readability, while `d3.scaleLinear` handles the count axis. The SVG renders steel-blue bars that turn orange on hover, with clear axis labels for intuitive interpretation.

PPreethi Medepalli-91
83% match
Loading thumbnail…

Making a Bar Chart

This example visualizes NYC Air Quality during COVID-19 using a horizontal bar chart, where each bar represents a region’s PM2.5 level, with longer bars indicating higher pollution. The chart loads CSV data with d3.csv, parses the airquality values as numbers, and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. It uses d3.axisLeft and d3.axisBottom to display region labels and a numeric axis, with gridlines and a custom axis title. The bars are styled in lavender with a cornflowerblue background.

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

Vis for Project

This visualization shows the average Air Quality Index (AQI) for six pollutants—CO, NO2, SO2, PM10, PM2.5, and Ozone—as a pie chart with a custom legend listing each pollutant and its mean value in units. The code loads a CSV dataset from a GitHub gist, aggregates the pollutant-specific AQI values by summing and averaging non-void entries, and renders the result using D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10`. The SVG is drawn with paths, and each segment includes a mouseover handler that logs the pollutant’s AQI to the console.

Llibramanju
75% match
Loading thumbnail…

Project Task 1

This example shows average PM2.5 AQI values for various countries as a horizontal bar chart, with each country’s bar length proportional to its pollution level. The visualization uses React for component structure and D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads pollution data from a GitHub-hosted CSV. The SVG bars are rendered as `rect` elements, with axes built from `AxisBottom` and `AxisLeft` components that call `xScale.ticks()` and map over `yScale.domain()`. Tooltips are provided via SVG `<title>` elements.

MMichael Biancardi
74% match