Fork of Stylized Line Chart

100%

Fork of Stylized Line Chart

✓ Published6🌍 Public

Last edited Dec 5, 2022

Created on Jul 18, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

82% match