Skip to main content
100%

Streamgraph

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jul 12, 2018
Created on Jul 12, 2018

This streamgraph visualizes multiple time series as smoothly stacked layers, with a button-triggered transition that interpolates between two randomly generated datasets. It uses d3.stack with the wiggle offset to create the baseline, while d3.area renders the filled paths and an animated transition (via .transition().duration(2500)) morphs the layers into a new layout. The code generates synthetic data with a custom bump function and applies the d3.interpolateCool color scale, all rendered as SVG. Zooming is also enabled through d3.zoom, and the entire chart updates in place when the user clicks the "Update" button.

AI-generated description

For continuous data such as time series, a streamgraph can be used in place of stacked bars. This example also demonstrates path transitions to interpolate between different layouts. Streamgraph algorithm, colors, and data generation inspired by Byron and Wattenberg.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4060954'>Streamgraph</a>

gpl-3.0 Licensed

Similar vizzes