Ozone AQI Count by Days

100%

Ozone AQI Count by Days

✓ Published0🌍 Public

Last edited Apr 9, 2023

Created on Apr 9, 2023

This example shows the number of days each ozone AQI category occurred, displayed as a pie chart with a legend listing each category and its day count. The data is loaded from a CSV file via `d3.csv`, then processed into a form suitable for `d3.pie` and rendered as SVG paths using `d3.arc`. The chart uses `d3.scaleOrdinal` with `schemeCategory10` for coloring, and a custom legend built with SVG rectangles and text. The visualization is implemented in React with D3 v5, and the SVG is updated on mouseover to log category counts.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Ozone AQI Count by Days

This example shows a pie chart of ozone AQI categories by the number of days each category occurred, with a legend listing each category and its corresponding day count. The chart is generated in React using D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to create the slices, which are rendered as SVG paths. Data is loaded via `csv` from a GitHub gist and processed to count unique dates per category before being passed to the rendering function.

Llibramanju

96% match

Loading thumbnail…

test

This example displays a static pie chart that categorizes daily ozone air-quality readings by AQI category, showing the number of distinct dates per category. Using D3 v7, the code loads a CSV dataset from a GitHub gist via `d3.csv`, aggregates the data into category-count pairs with JavaScript Sets, and renders the results as text. Although the page initially outputs “Hello D3 version 7” using `select('body').text()`, the pie chart itself is not drawn—only the computed data is prepared but never visualized. The visualization uses no SVG or canvas rendering, and the final output remains a simple text greeting.

LLakshmi Sairam Kakarla

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

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

73% match

Loading thumbnail…

Month wise Ozone Max AQI

This line chart shows the maximum Ozone Air Quality Index (AQI) for each month of the year. Data is loaded from a GitHub gist CSV and mapped to numeric month values using a month-to-number array. The visualization uses D3 v5 with `scaleLinear`, `scaleTime` (though not applied), `axisBottom`, `axisLeft`, and `line` with `curveBasis` smoothing. The SVG renders axis labels, grid lines, and a blue stroke line path styled by the `styles.css` class, with title and axis text annotations.

Llibramanju

73% match

Loading thumbnail…

Example AQI Data Per Day of the Week

This interactive bar chart displays Air Quality Index (AQI) values for three pollutant types (Ozone, PM2.5, and PM10) across each day of the week. The visualization updates dynamically when users click buttons for Monday through Sunday, swapping between seven pre-defined datasets. Built with d3.v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a custom `d3.scaleQuantile` color scale with a purple sequential palette. The SVG rendering includes animated transitions when data changes, with button focus states managed through CSS.

CChase Hall

73% match

Loading thumbnail…

Untitled

This example combines a U.S. state map with a date-based histogram, visualizing ozone AQI values from a cleaned CSV dataset. The map renders state boundaries and interiors using `d3.geoPath` and `topojson` features. A histogram of daily AQI readings is drawn with React and D3 scales, where each bar’s tooltip displays its exact AQI value. The code uses `d3.csv` for data loading and `d3.json` for the US Atlas topology, with styling provided by Poppins font and custom CSS.

CChase Hall

72% match

Loading thumbnail…

mouli pie chart

This pie chart visualizes weather data by aggregating and summing values for each weather category, then displaying the proportional shares as colored arcs. The chart uses D3 v7 to load CSV data via `d3.csv`, compute category sums with `d3.sum`, and generate the pie layout with `d3.pie()` and `d3.arc()`. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) maps each category to a distinct color, while a legend, positioned dynamically, identifies each slice. The visualization renders as SVG, with white strokes separating arcs for clarity, and includes a title and centered layout.

Ddmouli369@gmail.com

71% match