John Barber, Aditi Lohe, Keshav Sharma
Service-Learning Course Project as part of DS 4200 F20: Information Visualization, taught by Prof. Cody Dunne, Data Visualization @ Khoury, Northeastern University.
Our project is focused on working with ndoherty.design to work with their PlaylistNinja web app and help create visualizations to display user data. The overall project will consist of taking into account certain user metrics for personal music tastes (such as danceability, energy, valence, liveness, popularity, etc.), visualizing them in an easy to read graphic, and providing them with a set of visualizations that will allow them to understand and view patterns in their preferences. The idea behind this is to work off Spotify’s already existing algorithm of selecting new music for their users, but to add a new element of allowing people to see the trends in their saved songs and each of their playlists.
Below you will see a playlist bar, a mood bar, a table, a radar chart, and a collection of donut charts. All of these will help you to better understand the trends in your music.
Use the playlist bar and mood bar to select which set of songs you wish to see– the default is "Liked Songs". Once you hit a button, the table will display those set of songs and the radar chart will display the averaged metrics of all the songs in that playlist. Hover over a particular point in the radar map to see the exact metric value.
Filter further by selecting a specific mood to see or click on songs in the table to select them and view the metrics for them in particular. Click again to unselect or reclick the playlist button to completely reset. The current playlist being displayed can be noted by the label under the radar chart.
Below the table and radar chart, a collection of donut charts are displayed. These are here to help show the distribution of moods in each of your playlists. Hover over a particular color to see the number of songs you have for that specific mood, or view the default that shows the total number of songs present in each playlist.
Hope you enjoy!
Our visualizations consist of a table, a radar chart, and a collection of donut charts. All of these visualizations come together to create an informative experience that allows a user to better understand their personal music data. The table is accompanied by a playlist bar and a mood bar that allows the user to select which collection of songs they wish the table to display and whether or not they want to filter by mood. Once a playlist is selected, the table then shows all of the songs currently contained in that playlist. The table is scrollable and selectable. When no songs have been selected, the radar chart to the right of the table shows the metrics of the entire playlist averaged together. When a user starts to select songs, the radar chart changes to show only the metric averages of the highlighted songs instead. The label under the radar chart shows which playlist the table and the chart are currently displaying data for.
The radar chart allows for a user to better visualize the patterns in their music. The metrics the radar chart displays are a song’s danceability, valence, liveness, popularity, acousticness, spechiness, and energy. This radar chart is linked to the table. While nothing in the radar chart is selectable, it changes when the items in the table are selected. This allows for an easy and intuitive way for a user to view their playlist metrics. To view in more detail, you can hover over one of the points in the radar chart to view the exact percentage of that metric.
Our last visualization is a collection of donut charts below the other two visualizations. There is a separate donut chart for each playlist a user has. The purpose of these is to allow the user to visualize the mood distribution in all of the songs they have for each of their playlists. To gather more specific data, you can hover over any color in one chart to view the exact number of songs per mood. Otherwise, the default view shows the total number of songs contained in that particular playlist. There is a legend below the charts that shows what color represents each mood. We changed our initial approach of using pie charts to using donut charts instead because we believed that it allowed for more information to be conveyed at once. Now with the donut charts, we are able to display the number of songs automatically while still having an accurate display of the distribution of every mood present in a playlist.
The pie charts don’t link to the other two visualizations because we believed that this would create too much confusion. However, looking at all of the visualizations together, it becomes a very holistic and efficient way for a user to come and understand their personal music data at a glance. There is also enough flexibility, allowing users to choose which songs they wish to see the metrics of and what music moods they want the details of.
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.