Skip to main content
SimilarExport ZIP
100%

Preisverteilung

• Draft1🔗 Unlisted
Mmaya.cylkowski@gmail.com
Last edited Jan 23, 2026
Created on Jan 22, 2026

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.

AI-generated description

Music Streaming Subscription Income Distribution

A D3.js and React visualization showing a vertical Sankey diagram where music streaming subscription income (Abopreis) at the top flows down and gets divided among different parties:

  • Abopreis (top): The initial subscription price
  • Mehrwertsteuer, Plattform, Künstler, Label (bottom): Distribution to VAT, platform, artists, and record labels

Features

  • Vertical flow visualization with Abopreis at the top
  • All branches flowing downward to destination nodes
  • Responsive design that adapts to window resizing
  • Smooth curved paths between nodes
  • Color-coded flows (orange for VAT, blue for others)
  • Interactive hover effects
  • Clean node visualization with labels
MIT Licensed

Similar vizzes

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

Scatterplot Zahlungsbereitschaft & Preise /

This interactive scatterplot visualizes survey responses on willingness to pay for music streaming subscriptions, comparing each person's stated maximum price with their estimate of the market price. Green bubbles represent actual responses, while yellow bubbles show the corresponding estimations. Users can submit their own value and estimation, which appear as purple points for direct comparison. The visualization uses React with D3.js v7, employing `forceSimulation`, `forceCollide`, and `forceX`/`forceY` for bubble positioning, while horizontal reference lines mark current Spotify subscription tiers.

Mmaya.cylkowski@gmail.com
75% match