Skip to main content
SimilarExport ZIP
100%

Yearly Top Genre Trend and Artist with Music Signature

✓ Published3🌍 Public
ZZiyang Gao
Last edited Nov 4, 2020
Created on Nov 4, 2020

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.

AI-generated description

This viz shows the change of top genre of Spotify in the U.S. The top 20 songs of each year from 2010 to 2019 are selected foR this analysis. The slider of Year makes it possible to either focusing on a particular year or comparing over years. The color scale can be selected to show the artist or top genre. X and Y axis can be set to the features of interest. To see a specific Top Genre/Artist, just move mouse on the figure legend to hover one. To know the song of each data point, move your mouse over the point on the scatter plot, it will show the title, artist and top genre of that song.

MIT Licensed

Similar vizzes

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
95% 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
94% match
Loading thumbnail…

test2

This interactive scatterplot explores the top 20 Spotify songs per year in the U.S. from 2010 to 2019, plotting musical attributes like tempo and energy against each other. Users can switch the color encoding between top genre and artist, and hover over legend items to highlight specific categories while tooltips reveal song details. The visualization uses React with D3 v5 scales for positioning and color, rendering as SVG circles with dropdown menus for axis and color selections.

SSandyWu7179290504
86% 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
86% 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
85% match
Loading thumbnail…

Yearly Music Trend Signature

This visualization tracks the average values of musical attributes, such as energy or danceability, across the top 10 Spotify songs each year from 2010 to 2019. A multi-line chart displays these trends, using color to distinguish each musical signature, with tooltips revealing the standard deviation of each attribute. The visualization is built with D3.js, Vega-Lite, and the Vega-Lite API, pulling pre-calculated mean and standard deviation data from a CSV file on GitHub.

ZZiyang Gao
84% match
Loading thumbnail…

Yearly Music Trend Signature

This visualization displays yearly music trend signatures from 2010 to 2019, plotting the average scores of musical attributes for top Spotify tracks with lines colored by attribute type. Circle sizes encode standard deviation, showing variability across years for each category. Built with vega-lite-api and d3.v5, the chart uses layered marks for lines, circles, and interactive hover selections via `vl.selectSingle()`. Data was preprocessed in RStudio, deriving means and standard deviations from the original Spotify dataset, with an interactive tooltip provided by vega-tooltip.

NNita
83% match
Loading thumbnail…

Yearly Music Trend Signature

This visualization displays yearly music trends from 2010 to 2019, showing the average scores for different musical components (such as energy or danceability) as colored lines, with circle sizes encoding standard deviation. Using the vega-lite-api library with d3.csv for data loading, the view layers line and circle marks, adds interactivity through mouseover selections that filter data points and display tooltips, and renders axis labels with custom styling via a config object.

ZZiyang Gao
81% match