AQI-city

100%

✓ Published1🌍 Public

Last edited Nov 12, 2023

Created on Nov 12, 2023

Forked from AQI Data in Bangor, Maine Over Time

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

CChase Hall

95% match

Loading thumbnail…

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

93% match

Loading thumbnail…

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

92% match

Loading thumbnail…

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

89% match

Loading thumbnail…

Fork of AQI Data in Bangor, Maine Over Time

This fork displays daily Air Quality Index (AQI) values in Bangor, Maine over time, with a dropdown to toggle between Ozone and PM2.5 pollutant measurements. A natural curve connects the data points, with individual circles showing each measurement and tooltips revealing exact AQI values. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` for the chart, while `csv` loads data from a GitHub gist. The y-axis is fixed between zero and one hundred for consistent comparison across pollutants.

WWasanta Pruttisarikorn

88% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes daily Air Quality Index (AQI) values for Bangor in 2022 over time. Each data point is rendered as a small circle with a hover tooltip, while the connecting line is drawn using D3’s `line` function with a natural curve. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, and rendered as an SVG. The data is loaded from a CSV source via D3’s `csv` parser, and the chart is styled using the Poppins font and a custom color palette.

CChase Hall

87% match

Loading thumbnail…

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.

CChase Hall

86% match

Loading thumbnail…

Average AQI Per Month in Bangor, Maine

This interactive visualization displays the average Air Quality Index (AQI) per month in Bangor, Maine, for years 2018 through 2022. A slider at the top lets users select a year, triggering a two-second animated transition of the bar chart. The code uses d3.v4 with a d3-queue to load multiple CSV files containing monthly data. Bars are drawn as SVG rectangles, with fill colors mapped through a d3.scaleQuantile. The y-axis scale remains fixed at 0 to 50, while each year’s data updates smoothly via `transition.attr` calls.

CChase Hall

85% match