Team Members: Hannah Bish, Steven Stetzler
The Musical Wayfinder dashboard. A scatter plot of user library songs (a) and the genres that the library is composedof (b) are the main views of the data. Dropdown menus (c) allow the user to select the axes of the two scatter plots. A timeline(d) of the user's library allows the user to see when they added songs to their library. A legend (e) shows the color mapping ofthe umbrella genres that each song and genre are classified into. Bars show the relative abundances of those umbrella genresin the user's library. A brush filter can be used to select a time range in the time line. This interaction updates the songs andgenres shown in the scatter plots as well as the size of the bars in the legend to reflect the library composition over the selected time range.
Please find more information about our visualization through our paper here and our poster here.
Abstract
We present the Musical Wayfinder, an interactive visualization intended to bridge that gap between us and our music. This tool allows the user to track their musical tastes through time, investigate the musical attributes of > 3,000 genres catalogued by Spotify, and discover where their personal library falls within that vast musical landscape. We discuss the development and implementation of this tool, and the insights it can provide.
Interactions
Scatter Plots
Hover over a point on either scatter plot to see information about an individual song or genre.
Select which axes to plot by clicking on the "X-Axis" and "Y-Axis" dropdown menus and selecting an option.
Click on a point to embed a preview of a song or an entire playlist representing a genre.
Control+Click / Command+Click on a point to select/deselect it. Performing this action on a song will show you when you added it to your library in the timeline and all of the genres it belongs to in the genre plot. Performing this action on a genre will show you when you added songs from that genre in the timeline and all of the songs that belong to it.
Timeline
Click and drag over a region in the timeline to have the visualization reflect your library in a certain time range.
Click and drag on the ends of a time selection to resize your selection.
Legend
Hover over an umbrella genre to highlight it in the timeline.
Click on an umbrella genre to remove / add it back into the data under consideration.
My Genres / All Genres
Click on either the "My Genres" or the "All Genres" button to toggle displaying either just the genres in your library / your current selection, or displaying all of the genres that Spotify catalogues.
Top Tracks / Artists
Click on a track or artist in the lists to select/deselect to make a selection on them. If a track or arist does not appear, it may not be in your saved tracks on Spotify.
Lost?
Click on the reset button to reset all plots to their default view.
Example interaction
By brushing on the timeline, users can gain insight into how their library has evolved over time. Selecting a region early in time reveals the genres that the user was initially exposed to (left). Selecting a more recent region at the end of the timeline reveals that the genres the user is adding to their library have become more varied (middle). A user can gain discoverwhat new genres that have added by hovering over them (a). A tooltip shows the name of the genre, its average song attribute values, and the number of songs of that genre in the current time selection. Clicking on the genre (b) produces a playlist created by Spotify that represent that genre (right).
Running Instructions
The Musical Wayfinder is built to work with any user's Spotify library, however you can find an example here that uses the library of one of the authors. When viewing the visualization, please zoom in or out to resize your page so that it looks approximately like what is shown in the image above. We also provide a web application that allows you to give us permission, with authentication through Spotify, to scrape your library data and generate a visualization for you. You can find that application here.
Additionally, you can download and run the application yourself by cloning our GitHub repository and starting
the application locally. You will need to run the following commands in a bash shell that has a Python 3 executable
accesible to it with Flask installed. You can obtain Flask by running python3 -m pip install flask.
$ git clone https://github.com/cse512-19s/FP-Musical-Wayfinder.git
$ cd FP-Musical-Wayfinder/dev/spotify-app
$ export BASE_URL=http://127.0.0.1
$ export PORT=5000
$ export FLASK_APP=main.py
$ flask run
You can then access the log-in page at http://127.0.0.1:5000.