Skip to main content
SimilarExport ZIP
100%

Fork of Fork of CV: Loading CSV Data

✓ Published1🌍 Public
Wwdn616@haw-hamburg.de
Last edited Jan 16, 2026
Created on Jan 16, 2026
Forked from pyramide

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

NUR PLATTEN

This dark-themed dashboard displays Spotify Premium subscription price increases from 2024 to 2025 across four plans: Student, Individual, Duo, and Family. Each plan is shown in a card with the absolute euro increase and the percentage change. The React app maps over hardcoded data, computing the difference between “vorher” and “nachher” values, and renders the results in a responsive CSS grid. Styling uses Tailwind-like classes, while no D3 charting functions are invoked.

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

NUR BARS

The visualization compares Spotify Premium subscription prices before and after the 2024/2025 price increase across four plan tiers (Student, Individual, Duo, Family). Two grouped bars per model show the price change, rendered as an SVG using D3 v7’s `scaleBand` and `scaleLinear` scales. Hovering over a bar reveals a tooltip with the exact price via D3 event handlers. The chart is built with React and D3’s `select` and `axisBottom`/`axisLeft` APIs.

Wwdn616@haw-hamburg.de
80% 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…

Fork of ICE6_TASK_3

This visualization displays a multi-series line chart and a combined bar-plus-line chart exploring Spotify churn data, showing songs played per day by age across subscription types and average listening time against churn rate. The React-based example uses D3 v7 to load CSV data and render SVG charts, with modular helper functions handling axes, scales, and responsive dimensions via a `ResizeObserver`. The first chart bins ages into five-year groups with `d3.rollups` for aggregation, while the second combines bar and line encodings to compare listening metrics with churn outcomes.

Ssahasrakaturi91@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This interactive bar chart visualizes Amazon Basic subscription costs across twelve countries, using SVG rectangles scaled with d3.scaleLinear and d3.scaleBand. The React component loads CSV data via d3.csv, then renders axis ticks and gridlines manually with SVG lines and text. Colors highlight the varying monthly prices, while the chart updates dynamically when new data arrives. The visualization uses D3 v5 selection methods to draw all marks within a translated SVG group, with a fixed width and height that accommodates a horizontal layout with labeled countries.

Aajaysonu
75% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart shows monthly Amazon Music subscription costs across different countries, ranking the first twelve countries from a Spotify dataset. The visualization uses React hooks to load and manage CSV data, while D3 v5’s `scaleBand` and `scaleLinear` handle positioning and scaling. SVG rectangles encode each country’s cost, with red gridlines and tick labels generated manually via `xScale.ticks()`. Data is fetched through D3’s `csv` function from a GitHub gist, and the chart is rendered entirely as SVG within a React component.

Aadapavaishnavi12
75% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays the cost per month for basic streaming subscriptions across twelve countries, loaded from a CSV file and rendered as an SVG. The React-based application uses D3.js functions such as `csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis, with gridlines and labels drawn using D3's `axisLeft` and `axisBottom` logic. The bars are drawn as SVG rectangles within a transformed group, and the visualization uses a red gridline to emphasize tick values.

Cchandanagandla
75% 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
75% match