Skip to main content
SimilarExport ZIP
100%

Sankey Umsatzverteilung

• Draft0🔗 Unlisted
Mmaya.cylkowski@gmail.com
Last edited Jan 21, 2026
Created on Jan 16, 2026

A scrollytelling visualization breaks down a €10.99 Spotify Premium subscription, showing how the money flows through operational costs, record labels, and publishers to artists. Built with React and D3 v7, it uses a custom vertical Sankey diagram with animated transitions that reveal additional nodes and links as sections come into view via an IntersectionObserver. The `d3-sankey` layout computes node positions and link paths, while D3 transitions animate changes between sections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sankey Revenue

This example visualizes revenue distribution from Umsatz (total revenue) through Spotify Premium and Free Version tiers to Labels, Publishers, Distributors, and finally Artists. The Sankey diagram uses colored nodes and curved links with hover effects to show flow magnitudes. It relies on the D3.js library version 3.5.17, implementing a custom `d3.sankey` layout function that computes node positions and link depths. Data comes from `sankeydata.json`, with rendering handled via SVG and styled through external CSS.

Mmaya.cylkowski@gmail.com
89% match
Loading thumbnail…

Sankey Preisverteilung - Figma

This dark-themed visualization breaks down a €12.99 music streaming subscription, tracing its distribution through a vertical Sankey diagram from the gross price through taxes and net revenue to artists, labels, publishers, and streaming platforms. The React application uses d3.v7 for layout calculations and renders custom SVG paths via a custom layout engine, with interactive hover effects and responsive resizing. Flow widths are scaled proportionally to monetary amounts, and each recipient is labeled with its percentage and euro value.

Mmaya.cylkowski@gmail.com
89% match
Loading thumbnail…

Preisverteilung

This visualization shows the distribution of a music streaming subscription price among value-added tax, the platform, artists, and record labels using a vertical Sankey diagram. The flow starts with the subscription price at the top and branches downward, with the artist's share routed straight down and the other shares positioned to alternating sides. Built with D3 v7 and React, the implementation uses cubic Bézier curves to draw the flows and custom node positioning logic, while the ResizeObserver API handles responsive resizing of the SVG.

Mmaya.cylkowski@gmail.com
83% 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
82% 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
81% 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
81% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This example visualizes the distribution of a €12.99 Spotify subscription price across taxes, streaming services, labels, and artists. It presents a flow diagram where nodes represent revenue categories, with curved Bézier paths drawn on a Canvas element showing monetary values and percentages. The React component calculates financial figures and uses the Canvas 2D API with `bezierCurveTo`, `roundRect`, and custom text rendering to display the breakdown. Hover interactions track nodes through React state, while line thickness corresponds to the proportional value of each revenue stream.

Mmaya.cylkowski@gmail.com
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
72% match