Skip to main content
SimilarExport ZIP
100%

NUR PLATTEN

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
83% match
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
80% match
Loading thumbnail…

Spotify User Behaviour Analysis

This multi-page dashboard visualizes Spotify user behavior, including subscription adoption, device preferences, and user interests across age groups. The home page displays a word cloud and narrative insights, while a dedicated subscription page loads a dataset from `spotify_data.csv` and prepares an SVG chart. Built with D3.js version 4 and 7, the project uses `d3.select` and `d3.csv` to render interactive visualizations, though the primary chart logic remains incomplete.

Aamrutha185
69% match
Loading thumbnail…

Spotify Data #HAW

An interactive SVG bar chart visualizes Spotify artists and their albums, sorted by monthly listeners, with each artist bar expanding into individual album rows. Clicking an artist opens an animated info panel displaying their total streams, listener counts, and album details. Built with React 19 and D3.js v7, the visualization uses staggered entry transitions, gradient fills, and hover effects. Data is loaded from a CSV file and processed into a hierarchical artist-album structure before being rendered.

Mmaya.cylkowski@gmail.com
67% 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
67% match
Loading thumbnail…

Spotify_Vertical Stylized Bar Chart

This visualization uses a Spotify track dataset to show the distribution of audio features and popularity across acoustic tracks. A histogram display counts tracks binned by user-selected attributes (like tempo, energy, or danceability), with bars colored in blue to represent frequency. An orange line overlay traces the average track popularity within each bin, while a small box plot on the right summarizes the overall spread of the selected attribute. The React app uses d3.histogram, scaleLinear, and scaleBand to compute and position marks, with dropdown menus for attribute and bin selection.

Sstephanie0215
67% match
Loading thumbnail…

Data

This example presents an interactive scatter plot of Spotify song attributes, allowing users to compare musical features such as Tempo, Energy, and Danceability across tracks from 2010 to 2020. A year slider filters the dataset, while dropdown menus let users select which attributes to plot on the x- and y-axes and which categorical field, either Top Genre or Artist, to use for color encoding. The visualization is built with React, using D3 v6 and v5 APIs including `scaleLinear` and `scaleOrdinal` for axes and color, alongside ReactDropdown for menu selection, and it renders SVG circles with native tooltips. Data is loaded via `d3.csv` from a GitHub gist containing the yearly music trend dataset.

Nnikki81140
67% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes Spotify music attributes, plotting selected features against each other. The visualization uses React with hooks for state management and D3 scales to map data values to screen positions, rendering marks as SVG circles with tooltips. The example includes dropdown menus to switch between attributes, though the current implementation shows temperature and wind labels. Data loads via D3's tsv parser from a GitHub-hosted dataset, while axes are generated using custom React components that leverage D3's tick generation capabilities.

Pprint("Ayush")
66% match