Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Interactive Streamgraph Template in React

Public visualization

Fork of Interactive Streamgraph Template in React

0 stars0🌍 Public
Ssrikkanth05
Last edited Jul 25, 2023
Created on Jul 25, 2023

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.

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.

Comments

Sign in to join the discussion.

MIT Licensed