100%

Responsive Line Chart

✓ Published3🌍 Public

Last edited Apr 14, 2024

Created on Apr 14, 2024

This responsive line chart visualizes the Keeling Curve, showing atmospheric CO2 measurements over time as a black line against a gray plotting area. The visualization uses D3 scales and line generators to map the data, with the chart dimensions automatically updating through the `observeResize` function from `@drbagwell/responsive-viz-axes`. The example demonstrates how to build a resize-aware chart that redraws its axes and marks when the container size changes, using data from the `@drbagwell/keeling-curve-data` package.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

MIT Licensed

Similar vizzes

Loading thumbnail…

Responsive 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.

CCurran Kelleher

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

91% match

Loading thumbnail…

Fork of Responsive Line Chart

Mmuhmdabdollahi@gmail.com

91% match

Loading thumbnail…

Fork of Responsive Line Chart

This example displays the Keeling Curve, a record of atmospheric CO2 measurements over time, as a responsive line chart. The chart updates its dimensions to fit its container, thanks to the `observeResize` and responsive axes libraries. The `viz` function uses `d3.scaleTime` and `d3.scaleLinear` to map dates and CO2 values, and `d3.line` to generate the path. The plot includes a light gray inner rectangle and semi-transparent circles, though the circle layer is not visible in this configuration.

PPhilip

87% match

Loading thumbnail…

simple Line Chart_drb

This example renders a simple line chart of the Keeling Curve, plotting atmospheric CO2 concentration over time. The visualization uses a gray inner rectangle as the plotting area and displays axes with labeled year and CO2 values. The code leverages D3’s `scaleTime`, `scaleLinear`, and `line` generators to map data points and draw the path, while custom `xAxis`, `yAxis`, and label utilities from `@drbagwell/axis-labels` handle the chart furniture. The line is drawn in black with no fill, using the CO2 and date fields from the imported dataset.

DDonald Bagwell

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

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

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

81% match