Skip to main content
SimilarExport ZIP
100%

Sankey Preisverteilung

✓ Published2🌍 Public
Mmaya.cylkowski@gmail.com
Last edited Jan 23, 2026
Created on Jan 23, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
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
78% 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
70% match
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
68% 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
68% match
Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of "Widgets" between named sources and targets in a network. It uses d3.js version 3 and the custom `d3.sankey()` layout function, which positions nodes and computes curved link paths. External CSV data supplies the source, target, and value pairs, which are parsed into node and link objects. Users can drag nodes to rearrange the layout, triggering a relayout that updates the link paths, with hover effects increasing link opacity.

PPragyagarg
67% match
Loading thumbnail…

SANKEY Experiment

This sankey diagram visualizes the flow of widgets between seven nodes, with link thickness proportional to the value of each connection. The diagram uses d3.js v3 with SVG rendering, loading JSON data that defines nodes and links by name. The code leverages the custom `d3.sankey` API to compute node positions and link paths, with interactive node dragging that triggers relayout. Node and link titles display labels and values on hover, while the color scheme uses `d3.scale.category20()` to differentiate node groups.

PPragyagarg
67% 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
67% match