Interactive Streamgraph Template in React

100%

Interactive Streamgraph Template in React

✓ Published11🌍 Public

Last edited Oct 9, 2021

Created on Oct 9, 2021

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Streamgraph Template in React

This interactive streamgraph visualizes the popularity of eight baby names over time using a wide-format CSV dataset. Built with React and D3 v5, it employs `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut`, along with `d3.area` and `curveBasis` to create smooth, layered paths. Each name’s category is colored via `scaleOrdinal` with `schemeDark2`. Hovering a stream dims other paths and displays the name in an SVG tooltip, with opacity and text managed through React `useState` hooks.

RRoland

92% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React test

This interactive streamgraph displays the changing popularity of eight baby names over time, using a silhouette offset to emphasize fluctuations. Built with React and D3.js v5, it leverages `d3-shape`'s `stack`, `area`, and `curveBasis` for layout, while `d3-scale-chromatic` and `d3-scale` handle color and axes. The SVG renders a path per category, with hover effects that highlight a stream and display its name. Data comes from a CSV file loaded via `d3-fetch`'s `csv` function, featuring yearly counts for names like Amanda and Dorothy.

Bben440

90% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React test 2

This interactive streamgraph visualizes the changing popularity of baby names over time, with each colored stream representing a different name. The chart is built using React and D3 v5, combining React state management for hover interactions with D3’s `stack`, `area`, and `curveBasis` functions from the `d3-shape` module. The data, loaded via `d3-fetch`'s `csv` method, is rendered as SVG paths, with a tooltip displayed in the top-left corner.

Bben440

89% match

Loading thumbnail…

Test StreamGraph

This visualization shows the popularity of eight baby names (Amanda, Ashley, Betty, and others) over time using a streamgraph with stacked, layered areas. The React component wraps D3 v5 APIs including `stack`, `area`, `curveBasis`, `stackOffsetSilhouette`, and `stackOrderInsideOut`. It uses `scaleOrdinal` with the `schemeDark2` color palette and `scaleLinear` for axes. Hovering over a stream highlights that category and displays its name in a tooltip, while non-hovered streams fade to 20% opacity. The data comes from the provided CSV dataset containing yearly name counts.

NNicoA

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

86% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This interactive streamgraph visualizes changes in a dataset over time, with each colored stream representing a different category. The chart uses a silhouette offset and inside-out ordering to create a symmetric, layered appearance. Built with React and D3 v5, the code leverages `d3-shape`'s `stack`, `area`, `curveBasis`, and `stackOffsetSilhouette` functions for layout, while `d3-scale-chromatic` provides the color scheme. Hovering over a stream triggers a tooltip and dims other streams. Data is loaded from a CSV file via `d3-fetch`.

SSumeyya-Eser

85% match

Loading thumbnail…

Interactive Streamgraph Template in React

This interactive streamgraph template in React visualizes hotel booking trends over time, with stacked streams colored by category using `d3-shape`’s `stack`, `area`, and `curveBasis`, and colored via `scaleOrdinal` with `schemeDark2`. Hovering a stream highlights it by adjusting opacity and displays the category name in a tooltip. The SVG rendering is driven by React state and event handlers, while data loads as CSV through `d3-fetch`’s `csv` method.

Rrajasrilekkala

82% match

Loading thumbnail…

Fork of Interactive Streamgraph Template in React

A fork of the Interactive Streamgraph Template recreated in React, this example displays a streamgraph where layered areas show the distribution of categories across a numerical index. The code fetches CSV data from a GitHub gist, parses it manually, and renders the visualization as SVG paths. It leverages React’s `useEffect` and `useRef` hooks, along with D3 v5 utilities including `d3.stack`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart, with axes added at the bottom and left.

Ssrikkanth05

81% match