CV: Line Chart

100%

CV: Line Chart

✓ Published6🌍 Public

Last edited Oct 17, 2025

Created on Oct 17, 2025

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.

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

88% match

Loading thumbnail…

Fork of Line Chart with React & D3

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.

DDeclan Naughton

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

84% 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…

Keeling Curve

This visualization displays the Keeling Curve, showing monthly average atmospheric CO₂ concentration from Mauna Loa from 1958 onward. The line chart reveals both the seasonal oscillations and the steady upward trend in carbon dioxide levels over time. It uses D3 v7’s `scaleTime`, `scaleLinear`, and `line` generators for the chart, with custom axis and label functions. Data is loaded from a CSV file, parsed with `csvParse`, and dates are converted using `timeParse` before being rendered as an SVG path.

SSubhendu Karmakar

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

81% match

Loading thumbnail…

Keeling curve with D3

The chart displays atmospheric CO2 concentrations measured at Mauna Loa, Hawaii, from 1958 onward. It uses a line and scatter plot of monthly measurements, showing an overall upward trend. The visualization is built with D3 version 7, using `d3.scaleTime` and `d3.scaleLinear` to map dates and CO2 values. Data is manually parsed from a CSV file, filtering out missing values, and points are colored by station (blue for MLO, red for others).

BBismark Kofi Owusu Sarfo

79% match

Loading thumbnail…

Simple Line Chart

A line chart shows CO₂ concentration in parts per million from 1958 onward, rising over time. Built with d3-rosetta and unidirectional data flow, it uses `scaleTime` and `scaleLinear` for axes, `line` for the path, and `csv` to parse the Keeling dataset. Missing values are sent as NaN, and a loading state text renders until the data arrives.

CCurran Kelleher

79% match