Streamgraph.js
import React, { useState } from "react";
import {
stack,
area,
curveBasis,
stackOrderInsideOut,
stackOffsetSilhouette,
} from "d3-shape";
import { schemeDark2 } from "d3-scale-chromatic";
import { scaleLinear, scaleOrdinal } from "d3-scale";
import { extent } from "d3-array";
export const StreamGraph = ({ data, width, height }) => {
const keys = data.columns.slice(1);
// Color for each category
const colorScale = scaleOrdinal().domain(keys).range(schemeDark2);
// Accessor function to get the year and then build scale from it
const xValue = (d) => d.year;
const xScale = scaleLinear().domain(extent(data, xValue)).range([0, width]);
const yScale = scaleLinear().domain([-100000, 100000]).range([height, 0]);
// could do some filtering here
const stackData = data;
// Setup the layout of the graph
const stackLayout = stack()
.offset(stackOffsetSilhouette)
.order(stackOrderInsideOut)
.keys(keys);
// Using the stackLayout we get two additional components for y0 and y1.
// For x we want to get the yeaer from the original data, so we have to access d.data
const stackArea = area()
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