Sankey Diagram

A flow diagram for visualizing data transfers between nodes

Installation

terminal

pnpm dlx layro-cli add @bklit/sankey-diagram

npx layro-cli add @bklit/sankey-diagram

npx layro-cli add @bklit/sankey-diagram

bunx layro-cli add @bklit/sankey-diagram

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import {
  type SankeyLink,
  sankey,
  sankeyCenter,
  sankeyLinkHorizontal,
} from "d3-sankey";
import type { Transition } from "motion/react";
import { domAnimation, LazyMotion } from "motion/react";
import {
  memo,
  type ReactNode,
  useCallback,