Simple stream + interpolation, layout offset & axes

100%

Simple stream + interpolation, layout offset & axes

✓ Published0🌍 Public

Last edited Jun 20, 2016

Created on Jun 20, 2016

This streamgraph uses D3’s stacked area layout to show changes in value across multiple categories over time, with a cardinal interpolation smoothing the layers. The chart offsets the layout to center the stream and includes both left and right y-axes as well as a bottom x-axis. Data is loaded from a CSV file (stream.csv) and grouped by a key field, with each series represented as a colored layer using a blue ordinal color scale from the ColorBrewer palette. The x-axis uses a time scale for dates, while the y-axis encodes the cumulative values of the stacked areas. The example highlights D3 v3's streamgraph capabilities with custom axes and layout offset handling.

AI-generated description

forked from <a href='http://bl.ocks.org/devgru/'>devgru</a>'s block: <a href='http://bl.ocks.org/devgru/8622315'>Simple stream + interpolation, layout offset & axes</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/33cab2fc24468acaf682a5706de09c16'>Simple stream + interpolation, layout offset & axes</a>

Similar vizzes

Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock

80% match

Loading thumbnail…

Streamgraph

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.

GGerardoFurtado

79% match

Loading thumbnail…

Streamgraph

A streamgraph displays 20 layers of synthetic time-series data, each rendered as a filled area with a smooth, wiggle-based baseline. The visualization alternates between two precomputed datasets when the "Update" button is clicked, triggering a six-second animated transition. The code uses the D3 v3 stack layout with the "wiggle" offset, an area generator, and linear scales for x, y, and color. Layers are vertically offset with a translate transform for added padding.

CCurran Kelleher

77% match

Loading thumbnail…

Streamgraph

This streamgraph visualizes two synthetic datasets generated with a custom layer-stacking function, rendered as smooth, colored areas in SVG with D3 v2. Each stream can be toggled and faded by clicking or hovering on its tag in the legenda above the chart, where tag positions are computed using getBBox() to fit the graph width. The visualization supports smooth transitions between datasets and includes a button to switch between the two stacked layouts, with in-stream tags positioned heuristically to label each series. Styling uses a Google Font and interactive highlights, while the code comments note known browser quirks around font loading and transition interruptions.

GGerHobbelt

77% match

Loading thumbnail…

Streamgraph 1.0

A streamgraph displays changes in five data series from 1996 to 2018, including happiness scores, mood disorder diagnoses, and suicide-related metrics. Using d3.stack with stackOffsetSilhouette, the code layers filled areas symmetrically around a central axis, with d3.scaleOrdinal and d3.schemeDark2 assigning colors. The SVG rendering includes a gridline-based x-axis, and interactive hover effects dim other areas while tooltips identify the selected series. Data comes from a CSV file loaded via d3.csv.

EEline000

77% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This interactive streamgraph displays changes in numeric values across multiple named categories over time, using a silhouette-style stacked area layout. Built with React and D3 v5, it loads CSV data via `d3.csv` and processes it with `stack`, `stackOffsetSilhouette`, `stackOrderInsideOut`, and `area` with `curveBasis`. A React hover state adjusts path opacity and shows a tooltip label. Colors come from `schemeDark2` via `scaleOrdinal`, with axes scaled by `scaleLinear` and `extent`.

SSumeyya-Eser

76% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty stacked layers, each with two hundred samples, generated from synthetic data using a wiggle-offset stack. The visualization animates between two different datasets, smoothly transitioning the area paths over 2.5 seconds when the Update button is clicked. Built with d3.v4, it uses d3.stack, d3.area, and d3.scaleLinear, with a custom zoom that pans horizontally and a color scale from d3.interpolateCool. The random data is created via a bump function, and the rendering is pure SVG.

GGerardoFurtado

76% match

Loading thumbnail…

streamgraph test

A streamgraph displays three data series (AR, DJ, TP) as stacked, colored layers over time, using a silhouette offset to center the bands. Built with React and D3 v2, it loads CSV data and renders as SVG paths with animated transitions. The visualization includes axis labels, hover tooltips showing exact values, and mouse-following vertical guide lines. It uses d3.layout.stack, d3.svg.area, d3.time.scale, and d3.svg.axis with cardinal interpolation.

Eevsjg

76% match