Skip to main content
SimilarExport ZIP
100%

Interactive Streamgraph Template in React

✓ Published0🌍 Public
Rrajasrilekkala
Last edited Apr 27, 2023
Created on Apr 27, 2023
Forked from React Starter

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.

AI-generated description

React Starter code.

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
82% 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
82% 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
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
79% 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
77% 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
77% match
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
76% match
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
76% match