Skip to main content
SimilarExport ZIP
100%

SPOTIFY - Scatter Plot

✓ Published0🌍 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 — 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

Similar vizzes

Loading thumbnail…

SPOTIFY - Scatter Plot

This scatter plot visualizes Spotify listening habits by plotting numeric columns from a CSV dataset, with axes automatically selected based on the most complete fields. The visualization loads data via `d3.csv` and uses reusable `d3.scaleLinear` scales, `d3.axisLeft` and `d3.axisBottom` for axes, and SVG circles for marks. It responsively redraws on window resize, applying custom margins and labels. The chart highlights relationships between behavioral metrics like newly discovered artists and mood scores, rendered with the D3 v6 library.

Cchandanamahesh0215@gmail.com
93% match
Loading thumbnail…

Spotify_D3ScatterPlot

This animated scatter plot visualizes Spotify listening habits, showing the relationship between total songs played and several rotating attributes including average listening time, new artists discovered, skipped songs, and mood score. Built with D3.js 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a CSV file loaded via `csv()`. The visualization cycles through four x-axis variables every two seconds using `setInterval`, redrawing circles with updated `cx` positions as the x-axis changes.

Cchandanamahesh0215@gmail.com
91% match
Loading thumbnail…

SCATTER-PLOT

This example visualizes listening time versus songs played from a Spotify habits dataset, plotting each week as a circle where size reflects artists discovered and color indicates mood score. It uses D3.js’s `scaleLinear`, `scaleSequential`, `interpolateTurbo`, `axisLeft`, and `axisBottom` to construct the scatter plot. The data loads from a GitHub Gist CSV file, and the reusable `scatterPlot` module renders SVG circles with hover tooltips.

Cchandanamahesh0215@gmail.com
88% match
Loading thumbnail…

Spotify

This interactive scatterplot visualizes a dataset of Spotify tracks, plotting pairs of audio features such as acousticness, energy, and valence on x- and y-axes. Users select features from two dropdown menus, and the visualization updates the axes and data points accordingly. Rendered as an SVG using D3.js version 5, the chart uses `d3.scaleLinear` for both axes and draws semi-transparent circles to indicate track distributions. The code reads from a local CSV file and updates the chart dynamically via a polling function that checks selector changes.

Gginnyching
86% match
Loading thumbnail…

Spotify_Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes a Spotify song dataset, mapping selected audio features like danceability, energy, and popularity against each other on the X and Y axes. A color legend and dropdown menus allow users to switch the categories and attributes being compared, while hovering over legend items fades unrelated data points. The visualization is built with React and D3 v7, using SVG for rendering, and includes filtering capabilities to narrow the data by a popularity range.

Sstephanie0215
84% match
Loading thumbnail…

310553047-HW1

This interactive scatter plot visualizes a Spotify dataset, allowing users to compare any two musical attributes by selecting them from dropdown menus for the x- and y-axes. The visualization shows how the chosen variables correlate across tracks, with each data point represented as a semi-transparent blue circle. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` APIs to load data, render the SVG, and update the chart dynamically. Axis labels and gridlines are included, and the plot refreshes whenever the user changes the selected attributes.

Yyujun12689
84% match
Loading thumbnail…

areaChart-spotify

This area chart visualizes Spotify listening habits, showing total songs played per week. The visualization combines a filled area with a line overlay and circular data points, using steelblue for the area and line with tomato-colored points. Tooltips provide exact values on hover. Built with D3 v7, the chart employs `scaleLinear`, `axisBottom`, `axisLeft`, `area()`, and `line()` with `curveMonotoneX` smoothing. Data comes from a Gist-hosted CSV file displayed in an SVG rendered at 900×520 pixels.

Cchandanamahesh0215@gmail.com
83% match
Loading thumbnail…

music vis

This interactive scatterplot maps Spotify track attributes against one another, letting users select any two numeric columns from the dataset to compare on the x- and y-axes. The visualization updates dynamically through D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering circles positioned by the chosen metrics. The code assigns CSS classes to each point based on a track genre field, although the dataset’s example rows lack a genre column, so the legend and color-coding rely on that optional data. The SVG plot includes labeled axes and a title reflecting the current variable pair.

Aa15923647
83% match