Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SANKEY TEST

Public visualization

Viewing a saved revision (read-only)

d5facd83439d4343b7893b9f959652a9

SANKEY TEST

0 stars0🌍 Public
Wwdn616@haw-hamburg.de
Last edited Jan 23, 2026
Created on Jan 23, 2026

This Sankey diagram visualizes the breakdown of a 10.99€ financial flow, tracing how the total splits into VAT and net amounts, then branches through streaming royalties, publishing rights, and performer shares. Rendered as a React component using SVG, it defines nodes and flows as typed data structures with manual positioning. The visualization uses custom path generators to create smooth Bezier curves for both main vertical flows and side branches, with flow width scaled proportionally to value.

AI-generated description

Sankey Diagram Component

A React-based Sankey diagram visualization for displaying financial flow breakdowns.

Features

  • Declarative React component with SVG rendering
  • Manual node positioning for precise layout control
  • Support for branching flows (side branches) and main flows
  • Customizable colors and styling
  • Responsive design with viewBox scaling

Usage