Skip to main content
SimilarExport ZIP
100%

Simple Line Chart

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jul 9, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

The keeling curve dataset with D3

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.

BBismark Kofi Owusu Sarfo
83% 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
81% match
Loading thumbnail…

Line Chart

This line chart visualizes monthly atmospheric CO₂ levels from 1958 onward, with data loaded from a CSV file. It uses D3.js version 7 within a React app to render an SVG. The chart handles missing values (-99.99) via a custom `lineDefinedValue` filter, and builds axes with `axisBottom` and `axisLeft`, using a time scale for the x-axis.

Mmustafaksyed1@gmail.com
81% match
Loading thumbnail…

Fork of Simple Line Chart

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.

Ookahne@gmail.com
81% match
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.
81% match
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
80% match