Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Interactive Streamgraph Template in React

Public visualization

Viewing a saved revision (read-only)

1b533720862a44e1a211c0a7258f0b6b

Interactive Streamgraph Template in React

2 stars11🌍 Public
Iiblub
Last edited Oct 9, 2021
Created on Oct 9, 2021
Forked from React Starter

This example shows a streamgraph of baby name frequencies over time, recreated from a d3-graph-gallery template using React instead of pure D3. The chart uses stacked areas with a silhouette offset and inside-out ordering, where hovering a stream highlights it in the tooltip. The code uses `d3.stack`, `area`, `curveBasis`, `scaleLinear`, and `scaleOrdinal` with the `schemeDark2` palette, while React manages the interactive state. Data comes from a CSV loaded via `d3.csv`.

AI-generated description

This is a recreation of the Streamgraph template. It is rewritten to use React instead of only d3, if you come from the 2021 Data Visualization course, this template will be more understandable for you.