Skip to main content
SimilarExport ZIP
100%

Sankey Revenue

• Draft0🔗 Unlisted
Mmaya.cylkowski@gmail.com
Last edited Dec 4, 2025
Created on Dec 4, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sankey Umsatzverteilung

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.

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
82% 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 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
78% 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
77% 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
76% match
Loading thumbnail…

SANKEY Experiment

This is a Sankey diagram that visualizes the flow of values between named nodes, with the source and target data loaded from an external CSV file. The diagram uses the `d3-sankey` extension library on top of d3.v6, with nodes rendered as colored rectangles and links as semi-transparent black paths with widths proportional to their values. The code explicitly formats numbers and applies a categorical color scheme using `d3.scaleOrdinal`, while interactive hover states on links increase their opacity. Rendered as SVG, the visualization includes node labels and tooltips via `title` elements.

Dd3noob
74% match
Loading thumbnail…

Sankey Diagram

A Sankey diagram visualizes the flow of values between five nodes, with links of varying thickness representing the magnitude of each connection. The diagram is rendered as an SVG using D3.js v4 and the `sankey` layout function from the D3 graph gallery library. Node and link data is loaded from a JSON file, and the visualization uses `scaleOrdinal` and `schemeCategory10` for color mapping, with a color legend generated by the custom `colorLegend` function.

KKarkG
74% match