Skip to main content
SimilarExport ZIP
100%

Streamgraph

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 9, 2012
Created on Aug 26, 2012

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.

AI-generated description

A little blurb to settle the nerves �� <a href="http://bl.ocks.org/3480186" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>

This demo expands on the standard streamgraph demo in several ways:

  • generates a (bogus) set of tags, one for each series shown in the streamgraph.
  • these 'tags' are printed at the top of the graph as a legenda: the layout logic exploys SVG node.getBBox() to determine the exact pixel cost (width/height) of each tag and distributes them evenly across the horizontal expanse.
  • mixes the above with [Google] WebFonts. <font color="red">That got me a nasty surprise, which I fixed with a timer-delayed action and since Safari's behaviour raised a few hairs I arrived at the FOUT pages ('flash/flicker of unstyled content') and good cause to further enhance my timer-based hack; I added the timeout after looking at Paul Irish's blog page. Unless someone can prove me wrong, I think I got the bugger nailed. (Nasty polling way to check for font loaded and rendered, though...)</font>
  • hover and click event in legenda animate = fade the streams, and vice versa.

Positioning tags in the streams

And then there's the important bit of course: one way to find the 'proper spot' in each stream to print the tag, as big as possible. As can be seen in the code (bottom section of index.hmtl) this was a quest; I didn't commit all the iterations into git, but the 'improvement #x' comments are indicative of what came after I finally got the basic approach nailed - which only worked for a large enough data set as every 'tag' had to span multiple [x] data points to allow this simplistic algorithm to deliver something near usable.

The improvements now allow for small datasets as they are sliced/interpolated at a 1px step to produce (interpolated) data points to make the tag placement algorithm work as desired.

How I got here

The general idea was to scan each stream polygon from left to right and see where we might find a horizontal-enough section that could fit the tag, in its smallest form or maybe bigger. Then continue with the scan in order to find the 'best' location by picking the top 1 from the candidate set.

This started out as code which located the first ('left-most') [x] datapoint which was 'high enough' (.y value!) to make a chance of containing the tag text bbox. Then the code would interpolate the left-most x position for which the .y was exactly the minimum required, and from there the code went to scan to the right to find when we'd hit a right edge, either a downwards upper edge (.y0 + .y) or a upwards going lower edge (.y0). This still lacked the 'growing' code which is needed to find out how big we can scale the text vertically, but somewhere in there I screwed up and got eaten by bugs.

So I ditched that part of the code and went for the 'lazy method' as you see now, which was intended as a speed optimization for that original approach: if you'ld have enough data points, the interpolation tacics wouldn't be required as with sufficient data points, every pixel would be covered by an explicit datapoint anyhow. After a bit of testing and headscratching due to yet another off-by-one mistake of mine I got where I am today (seek out the if(0) in the code to see the visual debugging of red point indicating text x,y and green box indicating the detected largest rectangle fitting the given stream).

Then a bit of pondering led to the decision to keep the 'lazy method' as the only method (so that TODO comment at the bottom is now practically bogus) and just 'tweak' small datasets into becomes virtually large datasets by altering the stepsize in the scan loop to a non-integer, minimal step size. And the rest is history...

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

Streamgraph

This example demonstrates a streamgraph with 20 layers and 200 samples per layer, where the layers smoothly transition between two different datasets when the "Update" button is clicked. The visualization uses color-coded stacked areas that wiggle and morph over a 1.5-second duration, with hover interactions fading non-target layers. Built with d3.v2, it relies on the `d3.layout.stack` with the "wiggle" offset, `d3.svg.area` for rendering paths, and `d3.interpolateRgb` for color generation. Data is procedurally generated via the `stream_layers` function, and rendering uses SVG with custom transitions.

GGerHobbelt
87% match
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
87% 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
85% 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
78% match
Loading thumbnail…

Simple stream + interpolation, layout offset & axes

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.

DDinoJay
77% match
Loading thumbnail…

Streamgraph

This streamgraph visualizes 20 synthetic data layers across 400 time samples, using the protovis library’s `pv.Layout.Stack` with an “inside-out” ordering and “wiggle” offset to minimize slope changes. The chart renders smooth, colored areas whose thickness reveals each layer’s magnitude, with data generated by a bump function in `stream.js`. The visualization adapts to the browser window size via `pv.Scale.linear`, and each area’s fill uses a random color ramp with semi-transparent strokes.

Mmbostock
77% match