Ozone AQI Count by Days

100%

Ozone AQI Count by Days

✓ Published1🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

Forked from Unhealthy AQI for PM2.5 in Texas

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.

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

MMahendraGullinkala

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

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

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

72% 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…

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

72% match

Loading thumbnail…

histogram graph for map

This visualization displays U.S. ozone AQI data over time, using a histogram to show monthly average AQI values. The chart reveals how air quality varies across different months. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to define axes, `d3.histogram` with `timeMonths` thresholds to bin data, and `mean` to calculate aggregate values. The data is loaded from a CSV file, and the resulting bars are rendered as SVG rectangles with mouseover tooltips showing the average AQI for each bin.

CChase Hall

72% match

Loading thumbnail…

Pie chart in React & D3 - with Legend

A React and D3 donut chart visualizes budget allocations across five categories, with a legend mapping category names to a color scale interpolated between coral and crimson. The `pie` and `arc` generators compute slice geometry, while `scaleOrdinal` assigns colors from the interpolated range. Percentages appear on slices via `arc.centroid`, and the `ColorLegend` component renders interactive-free color swatches with tick spacing. The chart uses SVG rendering with `d3.interpolateRgb` for gradient transitions and `format` for numeric labels, based on static data in the `donThemes` array.

BbeauMarko

72% match