Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Streamgraph Template in React

✓ Published0🌍 Public
SSumeyya-Eser
Last edited Nov 23, 2021
Created on Nov 23, 2021

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`.

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…

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

Fork of Interactive Streamgraph Template in React

This fork of the streamgraph template displays multiple ECG data series as stacked, filled areas over time, with a tooltip that appears on hover to identify each stream. Built with React and D3 v5, it uses `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut` to compute the layout, and `d3.area` with `curveBasis` to generate SVG paths. Data is loaded from a CSV gist via `d3-fetch`’s `csv` function. Hovering changes the opacity of non-highlighted streams, while the tooltip text updates to show the active series key.

SSumeyya-Eser
91% match
Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This fork of the streamgraph template displays multiple ECG data series as stacked, filled areas over time, with a tooltip that appears on hover to identify each stream. Built with React and D3 v5, it uses `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut` to compute the layout, and `d3.area` with `curveBasis` to generate SVG paths. Data is loaded from a CSV gist via `d3-fetch`’s `csv` function. Hovering changes the opacity of non-highlighted streams, while the tooltip text updates to show the active series key.

SSumeyya-Eser
91% 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
88% match
Loading thumbnail…

Interactive Streamgraph Template in React

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`.

Iiblub
85% 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
83% 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
83% 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