Team Name: Viz Virtuosos
This repository creates interactive visualizations from daily collection time series of the Global Spotify Top 200 charts from January 1st, 2017 to December 31st, 2024. The visualizations include song, artist, and genre-level specifications for categories of solo vs. collaborative artists, helping users explore and understand the importance of how these factors may influence song popularity within an already popular demographic of songs (that is the Top 200).
Our team collected and preprocessed data from the external APIs and serivces to curate our datasets and improve artist identification with songs playback, artist and album images. Most of the features in our datasets took inspiration from the works of the MGD+ Dataset. The remaining visualizaitons used JavaScript libraries to format our visualizations and format its organization in the presentation.
NOTE: All data uses the same collection period as defined in the overview. Some visualizations may rely on different ways of grouping our data (e.g. by year or by day).
- [Song-level] Beeswarm Plot: Displays the Top 2000 songs on the Spotify Global Top 200 charts split by solo vs. collaborative artists. Each bubble corresponds to a song with sized proportional to its total streams, and positioned by its release date.
- [Song-level] Bar Chart Race: Animates the Top 15 most streamed songs on the Spotify Global Top 200 charts using daily increments. The bar chart highlights solo vs. collaborative songs via color encoding,allowing users to adjust the observing period, and plays audio for the day's top ranked song.
- [Artist-level] Artist Collaboration Network: Displays how artists are connected through their personalized networks among various years or across all years. Users can search for artists, and annotate up to 200 artists' bubbles which have the most streams for the specified time filter.
- [Genre-level] Genre Bar Charts: Displays how solo and collaborative artists fare, in proportion or absolute terms, within the top 10 genres. Users can filter by selected years to observe genre popularity and its relationships to the two groups of artists.
Beyond the main interactive visualizations, our project includes several subtle design features that enhance user experience and engagement:
- fullpage.js supports scroll, arrow key movement, pressing the space bar, or clicking on the right-aligned bubbles. For the aritst network visualization, certain interactions disabled scroll it is not the most feasible to use that to go through pages.
- Artist images float around the screen and react to cursor movement. Hovering scales them up slightly, while getting close causes them to move away from the mouse.
Each visualization provides dynamic tooltips to deliver deeper insight on hover:
- Beeswarm Plot: Displays the song name, artist (with release year), and total number of streams.
- Artist Collaboration Network: Shows artist name, stream-based rank, number of charting songs, and number of unique collaborators.
- Genre Bar Chart: Displays the selected year, genre, and the solo/collab percentage.
- The Artist Collaboration Network includes a toggle switch to alternate between:
- Artist View: Shows interactive artist bubbles with ranking and collaboration info.
- Instruction View: Provides a guide on how to navigate and interact with the network.
- To search artists by name, users can type in the top-left text field and navigate up and down populated suggestions from fuse.js with arrow keys. Users can also press ENTER to submit and modify the view to their liking
- The search history for arists follows more of a log format rather than a "search history". The histories are also specific to the filters we have (e.g. 2024 has a search history, 2023 has a distinct search history, etc.)
- The "x" button in the artist view removes the currently focused artist from the view and reverts the view to the default (with zoom-to-fit)
- d3.js (V7.8.2): Used to implement the majority of interactive visualization rendering across our various visualizations.
- fuse.js (V7.1.0): Used to implement a suggestive search feature for the aritst network.
- fullpage.js (V4.0.20): Used to create a convenient and intuitive layout for webpage interactions when transitioning between our visualizations.
NOTE: Only required files after preprocessing were kepts for the visualizations. If original sources were no longer needed, they have been deleted. The following include a process to our data collection pipeline.
- Spotify Charts Data: CSV downloads from the specified interval in the Global Top 200 according to Spotify Track IDs.
- Spotify Web SDK: Uploading playlists to Spotify, and downloading redirect URLs to artist display photos.
- Chosic Playlist Analyzer: Using the uploaded playlists from the Spotify Web SDK, Chosic analyzed these playlists to retrieve genre data where available for each song in each year group.
- iTunes Search API: Used to search for song previews by track name and artist. The API returns metadata including audio preview URLs which are then downloaded and stored locally.
We wrote all files in this repository as external libraries were imported via CDN links.