Skip to main content
SimilarExport ZIP
100%

10Green Line Graph Template

✓ Published0🌍 Public
CChase Hall
Last edited Jul 15, 2022
Created on Jul 15, 2022

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.

AI-generated description

Uses HTML, javaScript, CSS, React, and D3 to make interactive data visualization.

MIT Licensed

Similar vizzes

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
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
88% 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
88% 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
87% 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
87% 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
87% 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
86% 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
85% match