rudhrani

100%

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

A responsive line chart.

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

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

76% match

Loading thumbnail…

rudhranilinechart

A line chart tracks population growth over time, using a blue stroke to connect annual data points from a CSV dataset. The visualization relies on D3 v7 to load the external population.csv, parse numeric values for year and total_population, and render an SVG with linear scales for the axes. The code constructs a line generator, applies it to a path element, and adds axis groups with tick labels, with the y-axis scaled from zero to the maximum population value.

Mmogantirudhrani@gmail.com

74% match

Loading thumbnail…

line Chart with d3.js

This line chart visualizes the monthly average atmospheric CO₂ concentration over time, using a dataset loaded from a CSV file containing yearly and monthly records. The visualization plots each data point as a small circle and connects them with a line, created using the `d3.line` generator. The chart is rendered within an SVG canvas, with axes and labels added through the custom `axis` function that utilizes `d3.axisLeft` and `d3.axisBottom`. The data is parsed from the CSV using `d3.csvParse`, with dates constructed via `d3.timeParse`, and scales are defined using `d3.scaleTime` and `d3.scaleLinear`. The visualization is built using a state-based rendering approach, where the data is fetched asynchronously and then passed to the chart-drawing function.

Rrobertotienonyaranga@gmail.com

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

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

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

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

71% match