Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SPOTIFY DATA

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

86aef05dac8d4272a0cd403638694c8c

Open

SPOTIFY DATA

0 stars0🌍 Public
Wwdn616@haw-hamburg.de
Last edited Dec 11, 2025
Created on Dec 10, 2025
Forked from Clickable Circles

A dot-density plot visualizes global income inequality by clustering colored dots for each salary bracket, from under $5,000 to over $5 million, with the width and density of each cluster reflecting population size. The visualization uses matplotlib's `scatter` with jittered positions, a dark theme with high-contrast green dots, and a yellow dashed `axhline` marking the minimum wage threshold, accompanied by a German-language annotation. Data comes from hardcoded income category counts in a configuration file, with a Python script generating the plot via NumPy's random uniform distribution for jitter.

AI-generated description

Spotify Music Explorer

An interactive visualization platform for exploring Spotify music data with two main views:

  1. Scatter Plot: Analyze music characteristics with dynamic axes
  2. Artist Rankings: See the most popular artists by total streams

Features

Scatter Plot View

  • Dynamic Axes: Select from 9 different audio features
    • Energy, Danceability, Valence, Popularity, Tempo, Acousticness, Instrumentalness, Liveness, Speechiness
  • Customizable Colors: Change the color mapping to any audio feature
  • Adjustable Sizes: Control circle size with popularity, streams, or tempo
  • Interactive Details:
    • Click any circle to see comprehensive track information
    • Hover over circles to highlight them
    • Track details panel shows 7 key metrics

Artist Rankings View

  • Top 50 Artists: Ranked by total streams across all their tracks
  • Visual Stream Comparison: Bar charts show relative stream volumes
  • Track Count: See how many tracks each artist has in the dataset
  • Spotify Green Theme: Uses Spotify's signature color for emphasis

Interactions

Scatter Plot

  • Click circles to view detailed track information
  • Hover over circles to highlight them
  • Use dropdowns to change X-axis, Y-axis, color, and size mappings
  • Click background to deselect current track
  • View statistics panel for selected track

Rankings

  • Toggle between views using the view mode buttons
  • Hover over artist names to see the full name (if truncated)
  • Visual bars show relative popularity at a glance

Data

The visualization includes 50,000+ Spotify tracks with comprehensive metrics:

Track Features

  • Energy (0-1): Intensity and activity
  • Danceability (0-1): How suitable for dancing
  • Valence (0-1): Musical positivity/mood
  • Popularity (0-100): Track popularity
  • Tempo (BPM): Speed of the track
  • Acousticness (0-1): Acoustic vs produced
  • Instrumentalness (0-1): Presence of vocals
  • Liveness (0-1): Live performance feel
  • Speechiness (0-1): Presence of spoken words

Artist Aggregations

  • Total Streams: Sum of all track streams
  • Track Count: Number of tracks in dataset
  • Average Popularity: Mean popularity score

Technical Stack

  • D3.js v7: Data visualization
  • Unidirectional Data Flow: State management pattern
  • CSV Data: Popular Spotify Songs dataset
  • ES Modules: Modern JavaScript module system

Usage

  1. Open index.html in a modern web browser
  2. Wait for data to load
  3. Scatter Plot: Use dropdown controls to explore different data dimensions
  4. Rankings: Click "Rankings" button to see top artists by streams
  5. Click circles in scatter plot to inspect individual tracks
  6. Toggle views using the buttons in the title area

Browser Support

Requires a modern browser with ES Module support (Chrome, Firefox, Safari, Edge)