Fork of Sankey Preisverteilung

100%

Fork of Sankey Preisverteilung

✓ Published0🌍 Public

Last edited Jan 23, 2026

Created on Jan 23, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

SANKEY TEST

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.

Wwdn616@haw-hamburg.de

79% match

Loading thumbnail…

Fork of SANKEY Experiment

A directed-flow diagram maps notification counts from a total source through matched and scrap categories into downstream targets. The visualization uses a custom `d3.sankey` layout with SVG rendering, featuring draggable nodes and hoverable links with adjustable stroke opacity. Node heights encode link values, and the layout algorithm iteratively optimizes node positions to reduce collisions. Data comes from a static JSON file, with node labels styled in bold Verdana text and the chart embedded in a React application shell.

PPeter S

77% match

Loading thumbnail…

Fork of Fork of test of Fork of SANKEY Experiment

This example presents a sankey diagram showing the flow of notifications from a total source into matched and scrap categories, which further break down into subcategories like XRM, Prodc, PN OTD, CRB, and scrap. Built with React and D3.js, the visualization uses the custom `d3.sankey` layout API to compute node positions and link paths. The SVG rendering displays interactive nodes with draggable rectangles and hoverable links, while data is loaded from a static JSON file containing node names and link values.

SSteve_Nashon

75% 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

75% 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

74% match

Loading thumbnail…

Fork of Fork of Sankey Particles

An interactive Sankey diagram visualizes energy flows between sources and consumers, with animated particles traveling along links to represent the magnitude of each transfer. The SVG renders nodes and link paths using D3.js and the sankey layout plugin, while a separate Canvas layer draws moving particles computed from each link's path geometry. Particles are generated based on a frequency scale derived from link values and fade over time, creating a dynamic sense of flow intensity across the network.

DDonald Bagwell

74% match

Loading thumbnail…

SANKEY Experiment

This example uses a Sankey diagram to visualize the flow of values between five nodes, with links showing the quantity transferred from each source to its targets. The diagram is rendered as an SVG using d3.v7 and the d3-sankey plugin v0.12.3, with node rectangles colored using d3.scaleOrdinal and d3.schemeCategory10. Link thickness encodes the flow value, and hovering highlights the links. Data is loaded from a static JSON file (sankey.json) containing the node and link definitions.

Dd3noob

74% match