Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with React & D3

✓ Published1🌍 Public
DDeclan Naughton
Last edited Sep 30, 2025
Created on Sep 30, 2025

This example renders monthly atmospheric CO2 measurements from Mauna Loa as a line chart built with React and D3 v7. The visualization plots CO2 concentration in parts per million over time, with the date parsed from year and month columns and missing values filtered out. A monotone curve interpolation connects valid data points, and the line color randomly alternates between pink and brown on each render. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`axisLeft` to construct scales, axes, and labels within the React component lifecycle.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with React & D3

This line chart displays monthly atmospheric CO2 concentrations from the Mauna Loa Observatory dataset, with time on the x-axis and CO2 in parts per million on the y-axis. The visualization uses React hooks (useState, useEffect) to load and parse CSV data, while D3 v7 functions like scaleTime, scaleLinear, line with curveMonotoneX, and axisBottom render the chart elements. The line gracefully skips missing data points using the defined accessor in d3.line. Axis labels are added via selection joins in D3.

CCurran Kelleher
91% match
Loading thumbnail…

Line Chart with React & D3

This line chart shows monthly atmospheric CO₂ measurements from 1958 onward, with time on the x‑axis and CO₂ concentration in ppm on the y‑axis. The React component loads CSV data using `d3.csv`, parses dates with `d3.timeParse`, and passes the data to a reusable `viz` function. That function builds scales with `d3.scaleTime` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the curved line with `d3.line` using `curveMonotoneX`. Points with missing values are skipped via the line generator’s `.defined` method.

223100098@lums.edu.pk
88% match
Loading thumbnail…

Fork of line Chart with d3.js

This example visualizes the monthly average atmospheric CO₂ concentration from the Mauna Loa dataset, spanning from 1958 onward. It renders a line chart on a dark background, with individual data points drawn as small, randomly colored circles, alongside a connecting line. The chart uses d3’s `scaleTime` and `scaleLinear` to map the date and average value to the plot area, with custom axis labels. Data is loaded from a local CSV file and parsed using d3’s `csvParse` and `timeParse`.

Vviveknaroju999@gmail.com
87% match
Loading thumbnail…

CV: Line Chart

This example shows the monthly rise in atmospheric CO₂ levels at Mauna Loa from 1958 onward. A single black line traces the seasonal fluctuations and overall upward trend across the time series. Built with React and D3 v7, it loads data from a CSV file, uses `scaleTime` and `scaleLinear` for the axes, and renders the path using `d3.line`. The visualization also includes axis labels and handles missing data points through a custom `lineDefinedValue` filter.

CCurran Kelleher
86% match
Loading thumbnail…

d3-line-chart

This example visualizes monthly average atmospheric CO₂ concentrations from the Mauna Loa dataset, shown as a scatter plot with a connecting line over time. The chart loads a CSV file using `d3.csvParse`, parses dates with `d3.timeParse`, and renders points and a line using `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`. Custom axes are drawn with `d3.axisLeft` and `d3.axisBottom`, styled with a dark background and colored points.

Oownerofthesoul0000@gmail.com
83% match
Loading thumbnail…

line Chart with d3.js

This line chart visualizes the monthly average atmospheric CO₂ concentration over time, using a dataset loaded from a CSV file containing yearly and monthly records. The visualization plots each data point as a small circle and connects them with a line, created using the `d3.line` generator. The chart is rendered within an SVG canvas, with axes and labels added through the custom `axis` function that utilizes `d3.axisLeft` and `d3.axisBottom`. The data is parsed from the CSV using `d3.csvParse`, with dates constructed via `d3.timeParse`, and scales are defined using `d3.scaleTime` and `d3.scaleLinear`. The visualization is built using a state-based rendering approach, where the data is fetched asynchronously and then passed to the chart-drawing function.

Rrobertotienonyaranga@gmail.com
80% match
Loading thumbnail…

Fork of Simple Line Chart

This fork of a simple line chart visualizes the Keeling Curve, plotting atmospheric CO2 concentration over time using d3.scaleTime and d3.scaleLinear. The viz.js file constructs the line with d3.line, applies axes via axisLeft, and renders axis labels from the @curran/axis-labels library. Data comes from the @curran/keeling-curve-data package, while the code also references remote CSV and JSON URLs for potential alternate datasets. The chart includes a styled inner rectangle and semi-transparent circular markers, with configuration options passed from index.js.

Ookahne@gmail.com
78% match
Loading thumbnail…

Fork of Lab 1: Line Chart

This interactive D3.js line chart visualizes annual CO2 emissions for selected countries from 1990 to 2014, sourced from UN Data. The visualization uses a multi-line chart with an ordinal color scale and includes axes with formatted tick labels. Built with D3 4.7.4, the code uses `d3.select`, `d3.nest()`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG elements. The chart allows data filtering by adjusting the `selectedCountries` array, demonstrating animated transitions between different country selections.

RRichard Tomassetti
78% match