Skip to main content
SimilarExport ZIP
100%

Responsive Line Chart

✓ Published9🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Feb 12, 2024
Forked from Simple Line Chart

This responsive line chart displays atmospheric CO2 concentrations over time using the Keeling Curve dataset, rendering a black line on a gray inner rectangle. It updates smoothly when the container resizes, with the x-scale for years and y-scale for CO2 (ppm) recalculated via the `observeResize` hook. The visualization uses d3’s `scaleTime`, `scaleLinear`, `line`, and `axes` from d3, along with the library `@curran/responsive-axes` for automatic axis adjustment.

AI-generated description

A responsive line chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Simple Line Chart

This example shows the rise in atmospheric CO2 concentrations over time using the Keeling Curve dataset. A gray background rectangle highlights the plotting area, with a single black line tracing the data points and semi-transparent circles marking individual measurements. The visualization is built with D3's `scaleTime`, `scaleLinear`, `axisLeft`, and `line` functions, while axis labels are added via the `@curran/axis-labels` library. The code reads dimensions from the container and uses D3's declarative selection API to create the SVG elements.

MM Hema
84% 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
83% match
Loading thumbnail…

Simple Line Chart

A simple line chart visualizes the Keeling Curve data, showing monthly CO2 concentrations over time. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map dates and CO2 values to coordinates, with `d3.line` generating the path and `d3.axisLeft` for the axes. The data is sourced from `@curran/keeling-curve-data`, and the visualization is rendered into an SVG using D3's selection and join patterns.

CCurran Kelleher
82% match
Loading thumbnail…

keeling Curve

This visualization reproduces the Keeling Curve, showing the monthly average atmospheric CO2 concentration from 1958 onward. The line chart displays a clear upward trend in CO2 levels over time, with the seasonal fluctuations visible in the data. The code uses d3.line to generate the path and d3.timeParse with the format '%Y-%m' to convert date strings into JavaScript Date objects, with axes rendered using d3.axisLeft and d3.axisBottom. Data comes from the Global Monitoring Laboratory’s Trends in Atmospheric Carbon Dioxide dataset.

KKhatera Alizada
81% match
Loading thumbnail…

Keeling Curve

This interactive visualization displays the Keeling Curve, charting monthly average atmospheric CO2 concentrations from NOAA’s Mauna Loa records since 1958. The primary line shows measured averages, with a secondary lighter line for interpolated values. Using d3’s scaleLinear, line, axisLeft, and axisBottom, the code maps decimal dates to x-coordinates and CO2 values to y-coordinates, rendering SVG paths with gridlines. It reveals both the seasonal oscillation and the long-term rising trend in atmospheric carbon dioxide.

CCurran Kelleher
80% 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
79% match
Loading thumbnail…

rudhrani

This line chart visualizes atmospheric CO2 concentration over time, using a single black line to show the trend across years. The chart includes labeled axes for year and CO2 in parts per million, with a light gray background rectangle framing the plotting area. The visualization is built with d3’s scaleTime, scaleLinear, and line generators, while the axes are rendered via the @curran/responsive-axes helper. Data comes from the @curran/keeling-curve-data package, and the chart adapts responsively to container resizing through observeResize from @curran/responsive-axes.

Mmogantirudhrani@gmail.com
79% 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
79% match