100%

Fork of Simple Line Chart

✓ Published0🌍 Public

Last edited May 6, 2024

Created on May 6, 2024

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.

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 fork visualizes the Keeling Curve, plotting atmospheric CO2 concentration against time from the @curran/keeling-curve-data package. The chart uses D3 scales (scaleTime, scaleLinear) to map the date and CO2 values, with axes, labels, and a filled inner rectangle framing the data. A single line path, generated by d3.line, traces the points, while the viz() function handles all rendering with configurable margins and opacity settings. The example adapts the original chart to support custom data by specifying x and y value accessors.

OOswald Zion O.

94% match

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

90% match

Loading thumbnail…

Fork of Responsive Line Chart

This responsive line chart visualizes the Keeling Curve, plotting atmospheric CO2 concentrations over time. The code uses D3’s `scaleTime` and `scaleLinear` for axes, with the `line` generator drawing the trend, while `@curran/responsive-axes` handles label placement and `observeResize` adapts the SVG to the container. A gray inner rectangle highlights the plotting area, and the data comes from the `@curran/keeling-curve-data` package.

Mmuhmdabdollahi@gmail.com

88% match

Loading thumbnail…

Fork of Responsive Line Chart

Mmuhmdabdollahi@gmail.com

88% match

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…

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

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

85% match

Loading thumbnail…

Fork of Keeling Curve

This fork of the Keeling Curve plots atmospheric CO₂ measurements over time as a line chart, with time on the x-axis and average values on the y-axis. The visualization uses d3.line and d3.timeParse to parse and render the data, which comes from NOAA’s Global Monitoring Laboratory. Axes are drawn with axisLeft and axisBottom, and the chart updates dynamically after fetching and parsing the CSV data.

QQingyang Wang Profolio

85% match