Skip to main content
SimilarExport ZIP
100%

Fork of Responsive Line Chart

✓ Published0🌍 Public
Mmuhmdabdollahi@gmail.com
Last edited Jan 18, 2025
Created on Jan 18, 2025

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.

AI-generated description

A responsive line chart.

MIT Licensed

Similar vizzes

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

Responsive Line Chart

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.

DDonald Bagwell
91% match
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
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
90% 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.
88% 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
88% 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
86% 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
85% match