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)

759c441c7fd64e6eb4bb235998808a42

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 Characteristics Explorer

An interactive scatter plot visualization of Spotify music characteristics with dynamic axis selection.

Features

  • Dynamic Axes: Select from 9 different audio features for X and Y axes

    • 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

  • Responsive Legend: Automatically updates to show current color and size mappings

Interactions

  • Click circles to view detailed track information (artist, year, streams, etc.)
  • 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 on right side for selected track

Data

The visualization includes 50,000+ Spotify tracks with comprehensive audio features including:

  • Energy (0-1 scale): 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
  • And more...

Technical Stack

  • D3.js v7: Data visualization
  • Unidirectional Data Flow: State management pattern
  • CSV Data: Popular Spotify Songs dataset

Usage

  1. Open index.html in a modern web browser
  2. Wait for data to load
  3. Use dropdown controls to explore different data dimensions
  4. Click circles to inspect individual tracks
  5. Check the details panel for comprehensive track metrics