Example AQI Data in Bar Graph

backup bar chart

This example visualizes air quality index values for various pollutants in Maine using a horizontal bar chart. The chart displays pollutants along the y-axis and their corresponding AQI measurements along the x-axis. It loads the CSV data using D3's `csv` utility and renders the SVG bars and axes with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code also includes tick marks and labels generated from the scales.

88% match

Fork of AQI Data in Bangor, Maine Over Time

The visualization shows daily Air Quality Index (AQI) readings for Bangor, Maine, over time, filtered by pollutant type (Ozone or PM2.5) through a dropdown menu. It plots AQI values against dates using d3.scaleTime and d3.scaleLinear, rendering a smooth curved line via d3.line with curveNatural and individual data points as circles with tooltips. The component uses React hooks to manage state and loads CSV data from a GitHub gist, while SVG elements are generated through reusable axis and mark components.

VVikil Lakkavatri

86% match

Fork of AQI Data in Bangor, Maine Over Time

This interactive line chart displays Air Quality Index (AQI) values for Bangor, Maine over time, with a dropdown menu allowing users to toggle between Ozone and PM2.5 pollutant data. The visualization uses React for the interface and D3 v5’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to render smooth SVG paths and circles. Data is loaded from a local CSV file, with axes generated via custom React components and ticks formatted to show month labels.

Iindira-antgrvty

84% match

AQI-city

This interactive line chart visualizes daily Air Quality Index (AQI) readings for the city of Bangor, Maine, throughout 2022. A dropdown menu allows the user to switch between two pollutant types, Ozone and PM2.5, enabling comparison between the two time series. The visualization renders as an SVG using React, with D3 v5 handling the scales, axes, natural curve interpolation for the line, and data point circles that display exact AQI values on hover. The underlying dataset is loaded from a remote CSV file.

Vvenky0623

84% match

Fork of AQI Data in Bangor, Maine Over Time

This visualization displays a line chart of Air Quality Index (AQI) data for Bangor, Maine, plotted over time using a natural curve. The chart uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the axes. Data is loaded via d3.json from a TopoJSON world-atlas file, though the map features are not visualized. Interactive tooltips appear on each data point via SVG title elements. The visualization is styled with Poppins font and teal-colored marks, with the line and circles drawn using d3.line and explicit circle elements.

Gg1g10

AQI Data in Bangor, Maine Over Time

This interactive line chart visualizes daily Air Quality Index (AQI) data for Bangor, Maine, across 2022. A dropdown menu lets users switch between viewing Ozone and PM2.5 pollutant measurements. Built with React and D3 v5, the visualization renders an SVG with natural curve smoothing and tooltips on each data point. The data is loaded from a CSV file using D3’s `csv` function, with time-scaled x-axis and linear y-axis, all styled with the Poppins font.

10Green Line Graph Template

This line graph template displays daily Air Quality Index (AQI) values over time for Bangor, Maine, using D3 scales (scaleTime, scaleLinear) to map data points as SVG circles. The visualization reads CSV data via d3.csv, with React managing component state through hooks. Axes are rendered by custom React components that generate D3 tick marks and labels, while the chart's teal color scheme and clean styling come from CSS classes.

10 green graph template with menus

Ten green horizontal bars display AQI values for Maine pollutants in a React and D3 bar chart. Two dropdown menus select axis attributes, though only the options array for the Y-axis is shown. The SVG visualization uses D3's scaleBand and scaleLinear for axes, with tooltips revealing each bar's exact value. Pollutant data loads from a CSV file using D3's csv function.