100%

simple Line Chart_drb

✓ Published1🌍 Public

Last edited Apr 14, 2024

Created on Apr 13, 2024

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.

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…

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…

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

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

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

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

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

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

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

82% match