D3 - StreamGraph

100%

D3 - StreamGraph

✓ Published0🌍 Public

Last edited Mar 18, 2024

Created on Mar 14, 2024

A streamgraph displays CO2 emissions for Afghanistan, Albania, Algeria, and Angola from 1970 to 1979, using stacked areas that flow across a time axis. Each colored band represents a country’s emissions, with a tooltip revealing the country name on hover and a legend mapping colors to names. Built with D3 v7, the visualization uses `d3.stack` to compute the stacked series, `d3.area` to generate the path geometry, and `d3.scaleLinear` for axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes axis labels for Year and CO2 Emissions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Streamgraph

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.

BBrittany Harden

78% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

77% match

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

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

74% match

Loading thumbnail…

D3 Data Dashboard

This dashboard visualizes global CO2 emissions across countries, continents, and years, allowing users to compare total emissions or per-capita values via an interactive world map, a pie chart of continental shares, and a bar chart of annual trends for a selected country. Built with D3 v4, it uses `d3.geoMercator` and `d3.geoPath` for map rendering from TopoJSON world atlas data, plus animated SVG transitions for the map, pie arcs, and bars. A year slider and radio buttons drive updates, with tooltips revealing detailed values from the CSV dataset.

VVishnu Sudireddy

74% match

Loading thumbnail…

D3 - Time Series HeatMap

This example visualizes methane emissions across countries and years using a D3.js heatmap. Each cell’s color encodes emission values via `d3.scaleSequential` with the Viridis interpolator, while `d3.scaleBand` positions countries on the x-axis and years on the y-axis. The code loads CSV data from a GitHub gist, renders axes with `d3.axisBottom` and `d3.axisLeft`, and includes an interactive tooltip that displays exact CH4 values on mouseover. A horizontal color legend, built with the d3-legend library, accompanies the SVG chart.

CChandana Srinivas

74% match

Loading thumbnail…

D3 - Small Multiples Line Chart

This example shows a series of small multiples line charts, each depicting CO2 emissions over time for a specific country. The D3.js code (version 7) loads data from a CSV file and uses `d3.scaleLinear` for axes, `d3.line` for the line paths, and `d3.legendColor` for a legend. It renders as SVG, with interactive hover tooltips revealing emission values per year.

CChandana Srinivas

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

73% match