Skip to main content
SimilarExport ZIP
100%

Interactive Streamgraph Template in React

✓ Published0🌍 Public
RRoland
Last edited Feb 5, 2022
Created on Feb 5, 2022

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.

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 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
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
92% 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
91% 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
90% match
Loading thumbnail…

Visualizing Data With React & D3

This bar chart visualizes the top ten baby names from an 1880 dataset, loaded via `d3.csv` from a GitHub gist. React manages the component state for loading and rendering, while D3 utilities (`scaleBand`, `scaleLinear`, `max`) compute the scales and axis ticks. The SVG output displays horizontal bars with labeled axes, where each rect’s width reflects name frequency. React’s `useEffect` and `useState` handle data fetching, and the chart updates the visualization once the CSV is parsed.

AAdrianna87
81% match
Loading thumbnail…

Aggregating Data With React & D3 (skipped ahead)

This example shows a horizontal bar chart of the top 10 baby names from an 1880 dataset, with each bar’s length scaled to the name’s frequency. It uses React’s `useState` and `useEffect` to asynchronously load CSV data via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The chart also includes gridlines, tick labels, and axis labels generated from `xScale.ticks()`. The data source is a GitHub Gist, and the visualization updates only after the CSV resolves.

AAdrianna87
81% 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
81% 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
79% match