Streamgraph

100%

✓ Published1🌍 Public

Last edited Dec 12, 2022

Created on Dec 12, 2022

This interactive streamgraph visualizes global CO2 emissions from 1790 onward, with stacked layers representing fossil fuel sources—Solids, Liquids, Gas, Cement Production, and Gas Flaring—in gigatons per year. Using d3.stack and d3.area with a basis curve, it renders smooth, colored bands scaled by a time axis and a linear y-axis. Labels are positioned via d3-area-label’s `d3.areaLabel` function, while tooltips appear on hover. The chart uses d3-scale-chromatic’s `schemeDark2` for colors and reads CSV data, updating responsively on window resize.

AI-generated description

A stacked area chart of Global CO2 Emissions.

The segments "Solids", "Liquids", and "Gas" are the forms of fossil fuels being burned.

Uses d3-area-label to position labels.

Inspired by Scott Judson’s Block: Global Carbon Emissions Area Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

CO2 Emissions Streamgraph

This streamgraph visualizes global CO2 emissions from 1751 to 2014, broken down by source—gas, liquids, solids, cement production, and gas flaring—using a wiggled stacked area layout. The code loads CSV data via `d3.csv` and applies `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to shape the layers, while `d3.area` with `curveBasis` renders the smooth paths in SVG. Labels are positioned using `d3-area-label`, and axes are drawn with `d3.axisBottom` in major and minor ticks. Data originates from the Carbon Dioxide Information Analysis Center.

CCurran Kelleher

90% match

Loading thumbnail…

Fork of Streamgraph

This fork of a streamgraph visualizes global CO2 emissions over time as a stacked area chart. Segments representing fossil fuel types—Solids, Liquids, Gas, plus Cement Production and Gas Flaring—are stacked and colored via a D3 ordinal scale. Hovering highlights a single area. The chart uses the `d3.stack`, `d3.area`, and `d3.curveBasis` APIs, with labels positioned by the `d3-area-label` library. Data comes from a remote CSV file, parsed into gigatons, and rendered as SVG using D3 v4.

Ping-Yu Yang

89% match

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time from 1790 onward, breaking down contributions by fuel type: Gas, Liquids, Solids, Cement Production, and Gas Flaring. The chart uses d3.stack with ascending order and d3.area with curveBasis to render smooth layers, colored via d3.scaleOrdinal with schemeDark2. Labels are positioned using d3-area-label’s interpolateResolution method. The data is loaded from a CSV using d3.csv, and the SVG updates responsively on window resize. Axis ticks include a custom format for years, with a rotated y-axis title.

Ppgy-iacas

85% match

Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, segmented by fossil fuel sources including gas, liquids, solids, cement production, and gas flaring. The chart uses d3.stack, d3.area, and d3-scale-chromatic to render the SVG paths, with labels positioned via d3-area-label. Data comes from a CSV file loaded with d3.csv. The chart updates responsively on window resize and includes axes with tick lines and a rotated y-axis title.

KKamilPodsiadlo

85% match

Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel types including solids, liquids, gas, cement production, and gas flaring. The chart uses d3.stack with stackOrderAscending and d3.area with curveBasis to render the layered paths, while d3-area-label positions text labels within each segment. Data comes from a CSV file loaded via d3.csv, with emissions converted from raw values to gigatons. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.schemeDark2 for color encoding, and responds to window resize events for responsive rendering.

KKirsten Lund

85% match

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, broken down by fossil fuel types—Gas, Liquids, Solids, Cement Production, and Gas Flaring—with total emissions scaled in gigatons per year. The chart uses D3 v4’s `d3.stack` and `d3.area` to render the layers, while `d3-area-label` positions labels within each segment. Hovering over a layer triggers a tooltip showing topic-related words from the cloud.json data, rendered as red text inside a circle. The visualization adapts to window resizing and uses `d3.scaleOrdinal` with `d3.schemeDark2` for color encoding.

Ppgy-iacas

85% match

Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, segmented by fossil fuel types—Gas, Liquids, Solids, Cement Production, and Gas Flaring—measured in gigatons per year. The y-axis is labeled accordingly, with a time-based x-axis. Built with D3 v4, it uses `d3.stack()` and `d3.area()` to render SVG paths, with `d3.areaLabel` positioning white labels within each segment. The `d3.scaleOrdinal` and `d3.schemeDark2` assign colors, while axis ticks are formatted with `d3.timeFormat`. Data comes from a CSV file loaded via `d3.csv`.

NNarayana Reddy

85% match

Loading thumbnail…

Fork of CO2 Emissions Over Time

This visualization displays global CO2 emissions from 1790 to the present as a stacked area chart, with segments representing gas, liquids, solids, cement production, and gas flaring. The chart uses D3 v4 with the `d3.stack` and `d3.area` APIs, rendered as SVG paths, and labels are positioned using the `d3-area-label` library. Data is loaded from a CSV file and converted from raw values to gigatons, with axes and gridlines styled through CSS selectors.

TTGaston

85% match