The keeling curve dataset with D3

100%

The keeling curve dataset with D3

✓ Published0🌍 Public

Last edited Sep 16, 2025

Created on Sep 16, 2025

This example displays monthly atmospheric CO2 concentrations from the Keeling Curve dataset as a line chart, with measurements in parts per million shown over time. The code loads CSV data using `d3.csv`, filters missing values, and renders the chart as SVG. It uses `d3.scaleTime` and `d3.scaleLinear` to map dates and CO2 values, `d3.line` to create the path, and `d3.axisBottom` and `d3.axisLeft` to draw axes. A loading state is shown via `d3-rosetta` state management before the data arrives.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

1 keeling dataset with D3

This example shows the Keeling Curve of atmospheric CO2 concentrations over time, using a line chart to display monthly measurements from a CSV dataset. The visualization uses D3.js to load and parse the data, then renders an SVG line chart with linear scales for time and CO2 values. It applies `d3.axisBottom` and `d3.axisLeft` for labeled axes, and generates the line path using `d3.line` with a monotone curve. The chart includes a loading state and resizes to fit its container.

BBismark Kofi Owusu Sarfo

94% match

Loading thumbnail…

keeling dataset with D3

This visualization displays monthly CO2 concentration measurements from the Keeling dataset as a smooth line chart, with years on the x-axis and CO2 concentration in parts per million on the y-axis. It uses d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.line with curveMonotoneX to draw the trend. The SVG rendering includes axis labels, a steelblue stroke, and a loading state. Data is sourced from a GitHub gist containing the Mauna Loa measurements.

BBismark Kofi Owusu Sarfo

88% match

Loading thumbnail…

Keeling Curve

This example reproduces the Keeling Curve, a time series line chart showing monthly average atmospheric CO₂ concentrations from 1958 onward. The visualization displays the data as a continuous black line, with axes for year and CO₂ concentration labeled accordingly. It uses D3 v7 APIs including `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.timeParse` to parse and plot the data. The dataset comes from the NOAA Global Monitoring Laboratory’s Trends in Atmospheric Carbon Dioxide.

CCurran Kelleher

87% match

Loading thumbnail…

Fork of Keeling Curve

This example reproduces the Keeling Curve, visualizing monthly average atmospheric CO₂ concentrations from 1958 onward, with a clear upward trend. The line chart uses `d3.line`, `scaleTime`, and `scaleLinear` to map dates and concentrations, while `d3.timeParse` converts year-month strings into JavaScript `Date` objects. Data comes from NOAA’s Global Monitoring Laboratory, loaded from a CSV and rendered with SVG paths and custom axes. The chart highlights the seasonal zigzag pattern superimposed on the long-term rise in carbon dioxide.

Ssorabh.vijay@gendigital.com

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

86% match

Loading thumbnail…

Fork of Keeling Curve

This example reproduces the Keeling Curve, showing the steady rise in atmospheric CO2 concentration from 1958 to the present, with the characteristic seasonal zigzag pattern. The line chart uses d3.line to render the data, with d3.scaleTime and d3.scaleLinear mapping dates and CO2 values. Data is loaded from a NOAA CSV file and parsed with d3.csvParse and d3.timeParse. The visualization is built with D3 v7, including custom axis labels and a responsive SVG that fills the viewport.

SSeekerzero

86% match

Loading thumbnail…

testing Keeling Curve

This visualization reproduces the Keeling Curve, plotting average monthly atmospheric CO₂ concentration from 1958 to the present. The line chart displays the characteristic upward and seasonal sawtooth pattern of carbon dioxide measurements. The visualization uses D3 v7's `d3.line` for the path, `d3.scaleTime` for the time axis, and `d3.timeParse` to convert year and month strings into JavaScript `Date` objects. Data comes from NOAA's Global Monitoring Laboratory, loaded from a CSV file.

Jjjlaber

85% match

Loading thumbnail…

Fork of Keeling Curve Practice

This example visualizes the Keeling Curve, plotting atmospheric CO₂ concentration over time. The data is rendered as a black line chart with a light gray inner plot area, using circles to represent individual data points. The chart employs D3's time and linear scales for axes and displays clear axis labels. The code leverages D3's `scaleTime`, `scaleLinear`, `axisLeft`, `line`, and the `@curran/axis-labels` library to construct the visualization. The plot is built declaratively using a join operation to manage SVG elements. The underlying data source is imported from `@subh3ndu/keeling-curve`.

SSubhendu Karmakar

85% match