Skip to main content
SimilarExport ZIP
100%

Fork of CV: Loading CSV Data

✓ Published0🌍 Public
Mmaya.cylkowski@gmail.com
Last edited Jan 23, 2026
Created on Jan 23, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of CV: Loading CSV Data

This example visualizes Spotify Premium subscription price increases from 2024 to 2025, comparing "vorher" and "nachher" prices for four plan types using grouped bar charts rendered as SVG. The chart uses D3 v7 scales, axes, and grid lines within a React framework, with interactive tooltips on hover showing specific prices. Data is hardcoded, and a dark theme with green accents highlights the comparisons, supported by summary statistic cards displaying absolute and percentage increases for each plan.

Wwdn616@haw-hamburg.de
78% match
Loading thumbnail…

Fork of music streaming (Matthias)

This interactive visualization displays music format sales trends from 2000 to 2019, showing how CD, vinyl, digital, and streaming revenues evolve over time. A streamgraph, built with d3.stack and stackOffsetSilhouette, centers the data vertically, with smooth areas colored via scaleOrdinal and schemeTableau10. Users adjust a birthday year input to place a red marker line, while hover effects highlight individual format layers. The chart loads semicolon-delimited CSV data in React, parses European decimal commas, and renders animated SVG areas with d3.area and curveMonotoneX.

SSteve Melnikoff
74% 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
73% 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
73% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the basic Netflix subscription cost across fifteen countries using a horizontal bar chart rendered as SVG. React state manages the loaded CSV data, while D3’s scaleBand and scaleLinear handle the y-axis country categories and x-axis cost values. The chart draws grid lines, axis labels, and blue rectangles for each country, with D3’s csv parser fetching the dataset from a GitHub gist. Axes are constructed manually using scale methods and tick identifications rather than axis components.

Aavvarijayakrishna99@gmail.com
71% match
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the basic subscription cost of Netflix across fifteen countries using a horizontal bar chart. Built with React and D3 v5, it renders SVG marks through React components while D3 handles the scales and data loading via d3.csv. The chart uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the continuous cost axis, with axes drawn manually using tick values and grid lines. The data originates from a CSV file containing per-country pricing information.

Cchandanagandla
71% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the basic subscription cost of Netflix in 15 countries using a horizontal bar chart rendered as SVG. The visualization loads CSV data from a GitHub gist, processes it with d3.csv, and uses d3.scaleBand and d3.scaleLinear to map countries and costs to spatial positions. Rectangles encode the cost values, with d3.ticks generating gridlines and labels for the quantitative axis. React manages the component state and lifecycle via useState and useEffect, while d3-selection is used for axis formatting and data binding.

Ssugunagar
71% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart, rendered as SVG through React components. The application loads data from a CSV file, parses the cost values, and displays them with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Grid lines and axis ticks are manually generated using `.ticks()`, with React’s `useState` and `useEffect` managing the asynchronous data loading and component rendering. The bars are simple `<rect>` elements positioned using D3’s scale functions.

Aadapavaishnavi12
71% match