Steamgraph

100%

✓ Published0🌍 Public

Last edited Jun 26, 2022

Created on Jun 26, 2022

A steamgraph visualization made with raw SVG paths shows three colored streams—beef, sugar, and cotton—stacked vertically across a chart with black axes. The paths use manual cubic bezier curves defined in the `d` attributes, with hover effects adding a black stroke via CSS. The pure SVG markup in `index.html` renders the graph without any JavaScript libraries or frameworks.

AI-generated description

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

Similar vizzes

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

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

72% match

Loading thumbnail…

SVG - Faux Data Viz

This example mimics a stream graph using an SVG exported from Figma, composed of layered, hand-drawn path shapes with custom fill colors. The visualization is rendered with React and SVG, with each path and rectangle hardcoded in the markup rather than generated from data. CSS styles the text with the Share Tech font and centers the layout, while the SVG itself sets specific dimensions and fills. The faux data viz demonstrates how static vector graphics can simulate the look of a dynamic, data-driven chart.

KKirsten Lund

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

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

70% match

Loading thumbnail…

music streaming (Matthias)

An animated SVG streamgraph shows the rise and fall of five music formats—CD, CD Single, Digital, Vinyl, and Streaming—from 1973 to 2019. Built with D3.js `stackOffsetSilhouette`, `area`, and `curveMonotoneX`, the areas fade in sequentially on load. A red dashed line marks the user-selected birthday year, and hovering over a layer highlights it while dimming others. Data is parsed from a semicolon-delimited CSV with European decimal commas.

MMatthias Stahl

70% match

Loading thumbnail…

SVG Fundamentals

This example introduces the building blocks of SVG for data visualization, displaying a static collection of primitive shapes including red circles, a blue rectangle, a black line, a thick black path, and a complex green filled path resembling a geometric icon. The code directly defines each element in raw SVG markup inside an HTML page, using no external libraries or data sources. The rendering approach relies purely on the standard browser SVG renderer, illustrating how simple shapes and paths form the foundation for more advanced charting techniques.

SStefan

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

69% match