Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SPOTIFY - Scatter Plot

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

ec9cbb4fa3a24406b7d457e0842924b6

Open

SPOTIFY - Scatter Plot

0 stars0🌍 Public
Cchandanamahesh0215@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025

This interactive scatter plot visualizes Spotify listening habits, mapping metrics like average listening time, total songs played, and mood score. Users switch X and Y axes via dropdown selectors, while circle color encodes Mood_Score through d3.interpolateTurbo, and size encodes New_Artists_Discovered via d3.scaleSqrt. Hovering reveals a tooltip and focus ring. The D3 v7 SVG chart includes gridlines, axes, transitions on points, and a custom CSV loader that flattens single-line data.

AI-generated description

Spotify Habits — Scatter Plot (D3)

This VizHub shows a reusable D3 scatter plot driven by spotify_habits_full.csv.

  • X: Avg_Listening_Time (minutes)
  • Y: Total_Songs_Played
  • Color: Mood_Score
  • Size: New_Artists_Discovered

Files

  • index.html — minimal page shell
  • index.js — loads CSV, configures accessors, renders plot
  • scatterPlot.js — reusable chart with a fluent API
  • styles.css — dark theme styling

Data

CSV is loaded directly from your Gist URL.

If you want different axes or encodings, update the accessors in index.js.