Skip to main content
SimilarExport ZIP
100%

Fork of AQI Data in Bangor, Maine Over Time

✓ Published0🌍 Public
VVikil Lakkavatri
Last edited Dec 28, 2022
Created on Dec 26, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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
97% 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
95% 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
95% match
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
92% match
Loading thumbnail…

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

Fork of Fork of Stylized Line Chart

This example shows a stylized line chart of daily Air Quality Index (AQI) values for Bangor, Maine, plotted over time with circular markers for individual data points. The React-based visualization uses d3.scaleTime and d3.scaleLinear for axes, with d3.line and curveNatural to create a smooth path through the data. Axis components render tick marks and labels via SVG, while marks include tooltips showing pollutant names via SVG title elements. The data is loaded asynchronously from a CSV file using d3.csv.

Ffexiye
89% 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
88% match
Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart tracking Air Quality Index (AQI) values over time for ozone pollution in Bangor, Maine. The visualization uses a natural curve to connect data points, with circle markers reinforcing each observation. The chart is built with React components, using d3.scaleTime and d3.scaleLinear for axis scaling and d3.line with curveNatural for the path. Temporal and value axes are rendered as SVG elements with formatted date tick labels. Data originates from a CSV file loaded via d3.csv, and the styling relies on the Poppins font and custom CSS classes for marks and labels.

CChase Hall
87% match