Skip to main content
SimilarExport ZIP
100%

Spotify Songs (Top 100 by Year)

✓ Published3🌍 Public
VVinayak Revankar
Last edited Sep 4, 2025
Created on Sep 1, 2025
Forked from Loading Data

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.

AI-generated description

Spotify Top Songs (2010–2019)

This dataset contains information about the Top 100 Spotify songs for each year between 2010 and 2019.
It includes metadata such as song title, artist, genre, and a variety of musical/audio features such as tempo, danceability, and popularity.

Attribute Descriptions (VAD Framework)

Attribute Type Description
index Quantitative Row index (unique ID for each record)
title Categorical Title of the song
artist Categorical Performing artist
top_genre Categorical Main genre of the song
year Ordered (Time) Release year (2010–2019)
nrgy Quantitative Energy score (0–100), higher = more energetic
dnce Quantitative Danceability score (0–100), higher = easier to dance to
dB Quantitative Loudness in decibels (negative values, closer to 0 = louder)
val Quantitative Valence score (0–100), higher = more positive/happy mood
dur Quantitative Duration in seconds
pop Quantitative Popularity score (0–100), higher = more popular

Why This Dataset?

This dataset is interesting because it allows us to explore:

  • Trends in popular music across the decade
  • How audio features (energy, danceability, valence, acousticness) vary by year and genre
  • Correlations between tempo, mood, and popularity
  • Which artists or genres dominated specific years
MIT Licensed

Similar vizzes

Loading thumbnail…

Spotify Top 10000 Songs

This example displays the raw contents of a Spotify top 10,000 songs dataset as a JSON-formatted text dump. It uses D3 v7’s `csvParse` to load and parse a remote CSV file from a GitHub gist, then presents the resulting array of objects directly in a `<pre>` element. The visualization demonstrates a minimal data-loading workflow, with state management to show a “LOADING” placeholder before the fetched data appears. No charts or graphical encodings are rendered; the focus is purely on data ingestion and display.

Fflanagancarlie@gmail.com
82% match
Loading thumbnail…

Week 7 - 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.

VVinayak Revankar
80% match
Loading thumbnail…

Spotify Top 10,000 Most Streamed

This visualization displays the Spotify Top 10,000 Most Streamed songs dataset, highlighting the distribution of total stream counts across all tracks. It uses d3.bin to create histograms of stream totals and demonstrates data loading through d3.csvParse, fetching the dataset from a GitHub-hosted CSV file. The visualization initially shows raw JSON data in a pre element, with d3.select and d3.join handling the DOM updates. The interface relies on a state management system that transitions from undefined to LOADING to the parsed dataset array.

Jjjlaber
79% match
Loading thumbnail…

Loading data "Top 50 Spotify music from 2010 to 2019" by Enze Liu

This example demonstrates loading a CSV dataset of the top 50 Spotify songs from 2010 to 2019, reporting its size in kilobytes, row count, and column count. The visualization uses D3 v5’s `d3.csv` method to fetch and parse the data, then updates a large text element with the statistics. The dataset, sourced from Kaggle via a GitHub Gist, contains 603 rows and 14 columns. An alternative asynchronous approach using `fetch` and `d3.csvParse` is also shown in commented code.

Rrioto9858
78% match
Loading thumbnail…

Loading and Parsing CSV Data the top 50 music of the U.S. in Spotify since 2010.

This example demonstrates how to load and summarize CSV data from the top 50 U.S. Spotify songs since 2010, displaying the file size, row count, and column count in large text. The code uses `d3.csv` to fetch and parse the remote CSV file, then `d3.csvFormat` measures the raw data size, while `data.length` and `data.columns.length` report rows and columns. An alternative commented-out approach shows `fetch`, `async/await`, and `d3.csvParse` for the same task. The visualization is minimal, focusing on parsing mechanics rather than graphical output.

ZZiyang Gao
77% 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
Loading thumbnail…

Stylized Bar Chart - Top 100 Songs Of Spotify

This visualization displays the danceability scores of the top 100 Spotify songs from 2018, ranked by artist as horizontal bars. Each bar’s length encodes the numeric danceability value using d3.scaleLinear, while artist names are positioned along the y-axis with d3.scaleBand. The React components render SVG elements, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded via d3.csv from a GitHub-hosted dataset, and tooltips appear on hover using native SVG title elements.

Ssamemurk21
76% match
Loading thumbnail…

Data Visualization viz

The visualization loads a CSV sample of songs and presents a data summary with row and column counts, then renders an SVG scatter plot of Year versus Energy, with circle size encoding popularity. Hovering reveals artist, song, year, energy, and popularity details. The code uses D3 v7's `d3.csv` to fetch and parse data with type inference, and `d3.select` to build the chart. A preview shows the first five rows formatted as JSON. The dark-themed interface includes KPI cards and a source link to the raw dataset.

Ssakethpapareddy@gmail.com
76% match