Labeled Streamgraph

100%

Labeled Streamgraph

✓ Published1🌍 Public

Last edited Mar 1, 2024

Created on Mar 1, 2024

A streamgraph displays four time series—Leonardo, Donatello, Raphael, and Michelangelo—as smoothly curved stacked areas. The code uses D3 v4 with the `d3-area-label` plugin to automatically place white labels inside each layer. Random walk data updates every two seconds, triggering animated transitions that recompute the stacked layout via `d3.stack().offset(d3.stackOffsetWiggle)` and redraw the areas with `d3.area` and `d3.curveBasis`. The `d3.areaLabel(area)` helper positions each label along the final shape.

AI-generated description

Uses d3-area-label to position labels on a StreamGraph.

Inspired by Noah Veltman’s Block: Stacked area label placement

Originally built with blockbuilder.org. See also:

MIT Licensed

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

78% 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…

Area Label Test

This example tests automatic label placement for stacked area charts. Four colored streams animate every two seconds, with white labels positioned inside each area. The code uses d3.stack with wiggle offset and d3.area to render paths, while the d3-area-label library computes label transformations during a transition. Data is procedurally generated random walk series, rendered as SVG with an ordinal color scale and curveBasis interpolation.

CCurran Kelleher

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

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

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

74% match

Loading thumbnail…

Experimental Label Placement

This visualization experiments with automated label placement for stacked area charts, using a streamgraph of D3.js commit activity across repositories over time. It renders smooth, wiggle-offset layers in SVG with hover interactions, and computes a label position for each layer by finding the widest vertical gap along its midpoint line, then placing text via `d3.textPath`. The labels are sized according to the gap height, revealing the technique’s limitations when text overflows irregular area shapes.

CCurran Kelleher

72% match

Loading thumbnail…

Streams

Five random data series render as smooth, horizontally stacked stream-like ribbons across an SVG canvas. Each of the 90 values per series is drawn as a filled area path with a black outline, using a basis interpolation to create fluid curves. The visualization uses D3 v3 with `d3.svg.area`, linear and ordinal scales for positioning, and a predefined color palette. Each series is vertically offset via a translate transform, producing a layered composition that highlights variations in the randomly generated data.

Mmbostock

71% match