🌍 Public
SPOTIFY - Scatter Plot
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 descriptionSpotify Habits — Interactive Scatter (D3)
Design highlights
- Dropdown selectors for X & Y axes
- Color =
Mood_Score(continuous legend) - Size =
New_Artists_Discovered(size legend) - Hover tooltip + focus ring
- Gridlines + soft, light theme
- Robust CSV loader that fixes a single-line CSV
Switch axes from the top-right selectors. To change
defaults, edit xCol and yCol in index.js.
If you later format the CSV with one row per line, the loader still works.
MIT Licensed
Comments
Sign in to join the discussion.