Week 7 - Spotify Songs (Top 100 by Year)

100%

Week 7 - Spotify Songs (Top 100 by Year)

✓ Published0🌍 Public

Last edited Oct 10, 2025

Created on Oct 10, 2025

Forked from Spotify Songs (Top 100 by Year)

This heatmap displays average song popularity across music genres and years from 2010 to 2019, using a light-to-dark blue sequential color scale. It loads Spotify data from a CSV file, groups entries by genre and year, and computes mean popularity values with d3.group and d3.mean. The visualization uses d3.scaleBand for axes, d3.scaleSequential with interpolateYlGnBu for color encoding, and d3.axisBottom and d3.axisLeft for labels. Hover interactions reveal exact values via a dynamic tooltip.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Spotify Songs (Top 100 by Year)

The visualization displays the Top 100 Spotify songs from 2010–2019, parsed from a CSV file using `d3.csvParse`. It initially shows a loading state, then renders the raw data as JSON in a `<pre>` element after fetching, showcasing the song attributes like energy, danceability, and popularity. The code uses `d3.select` and `selectAll` to manage the DOM, with a state-based rendering loop for asynchronous loading.

VVinayak Revankar

80% match

Loading thumbnail…

Week 9 - Spotify data

This scatter plot maps music tracks by their danceability and energy levels, with each point’s size encoding popularity and color representing genre. A sidebar of checkboxes lets users toggle which genres appear, filtering the visualization to compare overlapping categories. Built with React and D3 v7, the chart uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for genre colors, and D3’s `join` operator to update SVG circles and legends as selections change.

VVinayak Revankar

80% match

Loading thumbnail…

Yearly Top Genre Trend and Artist with Music Signature

This interactive scatter plot explores how the top 20 Spotify songs in the U.S. vary by year from 2010–2019. A slider selects the year, while dropdown menus choose which musical features (Tempo, Energy, Loudness, etc.) map to the x- and y-axes and whether points are colored by top genre or artist. Users can hover over the color legend to highlight a specific category or hover over a point to see its song details. The visualization is built with React and D3 v5, using SVG scales like `scaleLinear` and `scaleOrdinal` and components for axes, marks, and dropdowns. Data comes from a CSV hosted on GitHub.

ZZiyang Gao

79% match

Loading thumbnail…

Fork of Yearly Top Genre Trend and Artist with Music Signature

This interactive scatter plot explores the top 20 Spotify songs in the U.S. from 2010 to 2019, showing relationships between musical attributes like Tempo, Energy, and Loudness. Users can adjust the X and Y axes via dropdown menus, filter by year, and toggle color encoding between top genre and artist. Hovering over legend items highlights matching points, while hovering over a circle reveals the song’s title, artist, and genre. Built with React and d3.v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles for marks. Data originates from a public Spotify dataset.

SSandyWu7179290504

78% match

Loading thumbnail…

Fork of Yearly Top Genre Trend and Artist with Music Signature

This interactive scatterplot visualizes the top 20 Spotify songs in the U.S. for each year from 2010 to 2019, letting users explore musical attributes like tempo, energy, and danceability across different genres and artists. A year slider filters songs, while dropdown menus select the x-axis, y-axis, and color encoding for artist or genre, with a hovering legend highlighting specific categories. The visualization uses D3 v5 scales for positioning and color, React for state management, and renders SVG circles with hover tooltips showing song details from the yearly_music_trend dataset.

SSandyWu7179290504

77% match

Loading thumbnail…

Yearly Music Trend Signature

This visualization shows yearly music trends from 2010 to 2019, plotting the average scores of top Spotify tracks across different musical signature types. Circles encode the standard deviation of each category through size, while lines connect yearly means to reveal temporal patterns. Built with vega-lite-api and d3.v5, the chart uses mouseover selection to dynamically highlight points, display tooltips, and show value labels. Data originates from preprocessed averages and standard deviations of Spotify’s top 10 tracks per year, sourced from Observable, with a custom config for dark-themed readability.

ZZiyang Gao

77% match

Loading thumbnail…

Interactions - Spotify Peak Position Scatter Plot

This interactive scatter plot visualizes Spotify’s top 10,000 songs, aggregated by artist to show the relationship between an artist’s number of songs in the dataset and their peak chart position, peak streams, or total streams. Dropdown menus allow switching between different y-axis metrics and filtering the dataset size. Hovering over a point reveals a tooltip with artist-specific details, while an interactive color legend highlights artists by their number of songs at max position. The visualization uses D3 v7 with logarithmic scales, `scaleOrdinal` for color encoding, and `.on('mouseover')` events for tooltips, built with modular ES6 imports.

Fflanagancarlie@gmail.com

76% match

Loading thumbnail…

Data

This example presents an interactive scatter plot of Spotify song attributes, allowing users to compare musical features such as Tempo, Energy, and Danceability across tracks from 2010 to 2020. A year slider filters the dataset, while dropdown menus let users select which attributes to plot on the x- and y-axes and which categorical field, either Top Genre or Artist, to use for color encoding. The visualization is built with React, using D3 v6 and v5 APIs including `scaleLinear` and `scaleOrdinal` for axes and color, alongside ReactDropdown for menu selection, and it renders SVG circles with native tooltips. Data is loaded via `d3.csv` from a GitHub gist containing the yearly music trend dataset.

Nnikki81140

76% match