100%

SANKEY TEST

✓ Published0🌍 Public

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

Project Structure

MIT Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays flow quantities between six named stages—Scrap, Matched, CRB, Prodc, XRM, and PN OTD—with link thickness scaled to numeric values. The D3.js v3 library’s `d3.sankey` plugin computes node positions and link paths, while `d3.behavior.drag` enables interactive node repositioning with automatic relayout. SVG rendering uses color-coded rectangles and bezier curves, with hover tooltips showing exact link and node values.

BBhavyatulasi

79% match

Loading thumbnail…

Fork of Sankey Preisverteilung

A vertical Sankey diagram visualizes the distribution of subscription revenue from an "Abopreis" (subscription price) source to a single "Künstler" (artist) target. The flow is represented with a single curved path connecting the two circular nodes, with its width proportional to the value. Built with React and D3 v7, the visualization loads CSV data, positions nodes at the center top and bottom, and renders the link using SVG paths. Interactive hover effects enlarge nodes and adjust link opacity.

Wwdn616@haw-hamburg.de

79% match

Loading thumbnail…

SANKEY Experiment

This sankey diagram visualizes the flow of notifications from a total source through matched and scrap categories, with values displayed for each link transition. Built with React and rendered as SVG using D3.js v3, the visualization loads data from a JSON file containing node and link definitions. The diagram employs the custom `d3.sankey` layout API, which handles node positioning and link thickness calculation through iterative layout algorithms, while CSS styling controls the visual appearance of nodes and links.

BBhavyatulasi

78% match

Loading thumbnail…

Sankey Preisverteilung

This Sankey diagram visualizes the distribution of a subscription price (Abopreis) from a central source node to two target destinations: the Künstler (artist) receiving 81% and MwSt (tax) receiving 19%. The vertical layout uses hand-crafted cubic Bézier paths in SVG to create three merged pipe-like ribbons that split at a breakpoint. React manages the component state and dimensions, while d3.csv loads the data and d3.select handles SVG rendering. Node circles pulse via CSS animations and expand on hover.

Mmaya.cylkowski@gmail.com

78% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays the flow of "Widgets" between five nodes, with links showing the directed transfer values. Built with D3.js version 3.5 and the sankey.js plugin, the SVG visualization renders nodes as draggable rectangles and links as curved paths whose thickness encodes flow magnitude. Data loads from an external JSON file, and the chart supports interactive node repositioning, which triggers recalculation of link paths through the sankey.relayout() method. Node and link hover tooltips reveal names and formatted values.

Dd3noob

78% match

Loading thumbnail…

test of Fork of SANKEY Experiment

A Sankey diagram shows the flow of notifications from a total pool into matched and scraped categories, then onward to specific systems like XRM, Prodc, PN OTD, and CRB. The visualization uses D3.js (v3.5.17) with a custom `d3.sankey` layout algorithm that computes node positions and link curvatures. Data comes from a JSON file containing node names and link values, rendered as SVG elements with styled rectangles and cubic Bézier curves. Hovering a link increases its stroke opacity to highlight the path.

SSenserva

77% match

Loading thumbnail…

SANKEY Experiment

This visualization demonstrates a Sankey diagram using D3.js v5, displaying flows between nodes with width-proportional links. Built with SVG, it renders colored rectangles for nodes and semi-transparent black curves for links, with interactive drag-and-drop repositioning that triggers smooth link updates. The diagram, titled “SANKEY Experiment,” loads its data from an external JSON file and includes hover tooltips showing source, target, and value. The code adapts a D3 v4 block by d3noob and uses the custom sankey.js layout module to compute node positions and link paths, with a units label of "Widgets" and a color scale from d3.schemeCategory10.

GGerardoFurtado

77% match

Loading thumbnail…

SANKEY update Experiment

An interactive SVG Sankey diagram visualizes test results from API request flows. Nodes represent parameters, endpoints, and response statuses, with links flowing between them. D3's drag behavior allows manual node repositioning, triggering a relayout that updates the link paths. The diagram indicates test outcomes by overlaying textual status codes on the links, colored green for success and red for failure. Data is loaded from local JSON files describing API structures and test execution results.

Kkbkashyap

77% match