100%

Fork of Simple Line Chart

✓ Published0🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

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.

AI-generated description

A simple line chart with D3 showing the Keeling Curve Data.

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Simple Line Chart

This example visualizes the Keeling Curve, plotting atmospheric carbon dioxide measurements from Vancouver over time. The chart uses a time-scaled x-axis and linear y-axis to draw a line graph with data loaded from a CSV file via `d3.csv()`. It employs D3 v7’s `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` to render the SVG path, with axes generated using `d3.axisBottom()` and `d3.axisLeft()`. The visualization demonstrates a simple, reusable line chart template adaptable to other datasets.

YYashwanth0311

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

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

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…

Fork of Keeling Curve

This chart reproduces the Keeling Curve, a time series that visualizes atmospheric CO2 concentration over time, plotting a single line that traces the annual sawtooth pattern of rising carbon dioxide levels. The data is sourced from the NOAA Global Monitoring Laboratory, though the dataset used here contains religious demographics with a date field parsed from year and month. The visualization is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path generator, and `d3.timeParse` for date parsing. A custom `axes` module renders the left and bottom axis labels.

Ffsajedi22

86% match

Loading thumbnail…

Fork of Keeling Curve

This visualization displays the Keeling Curve, tracking monthly average atmospheric CO₂ concentrations from NOAA’s Mauna Loa records between 1958 and 1967. The line chart shows a clear upward trend in carbon dioxide levels over time. Using D3 v7, the code employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `line` to map the data from a CSV file, with a black stroke path representing the average readings and gridlines drawn via tick marks.

Ddasari234

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

84% match

Loading thumbnail…

Keeling Curve Practice

This example visualizes the Keeling Curve, showing atmospheric CO2 concentration over time as a scatterplot of individual measurements connected by a line. The chart displays each data point as a semi-transparent circle over a gray inner plot area, with time-based axes and labeled axes for year and CO2 concentration in parts per million. It uses D3's `scaleTime`, `scaleLinear`, `line`, and `axisLeft` to render the visualization, with the data imported from the `@subh3ndu/keeling-curve` package.

SSubhendu Karmakar

84% match