generated from NEU-DS-4200-F20-Staff/Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (202 loc) · 13.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>Project Team 16: Spotify Music Mood Recommendation</title>
<!-- CSS Styling -->
<link rel='stylesheet' href='style.css'>
<!-- Favicons -->
<link rel='apple-touch-icon' sizes='180x180' href='favicons/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicons/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicons/favicon-16x16.png'>
<link rel='manifest' href='favicons/site.webmanifest'>
<link rel='shortcut icon' href='favicons/favicon.ico'>
<meta name='msapplication-TileColor' content='#da532c'>
<meta name='msapplication-config' content='favicons/browserconfig.xml'>
<meta name='theme-color' content='#ffffff'>
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id='forkongithub'><a href='https://github.com/NEU-DS-4200-F20/project-group-16-spotify-recommendation'>Fork me on GitHub</a></span>
<!-- Writeup -->
<h1 style="padding-bottom : 0px; max-width: 700px">Project Team 16: Spotify Music Mood Recommendation</h1>
<div class='content-column'>
<div class='bio'>
<p><strong>John Barber</strong>, <strong>Aditi Lohe</strong>, <strong>Keshav Sharma</strong></p>
<p>Service-Learning Course Project as part of
<a href='https://canvas.instructure.com/courses/1781732'>DS 4200 F20: Information Visualization</a>,
taught by <a href='https://cody.khoury.northeastern.edu/'>Prof. Cody Dunne</a>,
<a href='https://visualization.khoury.northeastern.edu/'>Data Visualization @ Khoury</a>,
<a href='https://www.khoury.northeastern.edu/'>Northeastern University</a>.</p>
</div>
<div class='abstract'>
<h1 style="padding : 10px; text-align: left">Abstract</h1>
<p>
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.
</p>
</div>
<div class='visualizationUse'>
<h3 style="padding : 10px; text-align: left">How to use our Visualization</h3>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>Hope you enjoy!</p>
</div>
</div>
<h1 style='text-align:center;'>Your Playlist Attributes</h1>
<div class='playlist-buttons-holder'>
<button id='liked-button' onclick="update('data/john_liked_songs.csv','all'); document.getElementById('current-playlist').innerHTML = 'Liked Songs'; buttonSelection('Liked Songs', 'none')">Liked Songs</button>
<button id='hosting-button' onclick="update('data/john_hosting_2020.csv','all'); document.getElementById('current-playlist').innerHTML = 'Hosting 2020'; buttonSelection('Hosting 2020', 'none')">Hosting 2020</button>
<button id='alt-button' onclick="update('data/john_alt_2020.csv','all'); document.getElementById('current-playlist').innerHTML = 'No Other Alternatives'; buttonSelection('No Other Alternatives', 'none')">No Other Alternatives</button>
<button id='acoustic-button' onclick="update('data/john_accoustics_2020.csv','all'); document.getElementById('current-playlist').innerHTML = 'Midnight Acoustics'; buttonSelection('Midnight Acoustics', 'none')">Midnight Acoustics</button>
</div>
<div class='mood-buttons-holder'>
<button id='happy-button' onclick="update(document.getElementById('current-playlist').textContent,'happy'); buttonSelection(document.getElementById('current-playlist').textContent, 'Happy')">Happy</button>
<button id='gloomy-button' onclick="update(document.getElementById('current-playlist').textContent, 'gloomy'); buttonSelection(document.getElementById('current-playlist').textContent, 'Gloomy')">Gloomy</button>
<button id='bops-button' onclick="update(document.getElementById('current-playlist').textContent,'bops'); buttonSelection(document.getElementById('current-playlist').textContent, 'Bops')">Bops</button>
<button id='dance-button' onclick="update(document.getElementById('current-playlist').textContent,'dance'); buttonSelection(document.getElementById('current-playlist').textContent, 'Dance')">Dance</button>
<button id='study-button' onclick="update(document.getElementById('current-playlist').textContent,'study'); buttonSelection(document.getElementById('current-playlist').textContent, 'Study')">Study</button>
</div>
<!-- <div class='radar abstract'>
<h3 style="text-align: left">How to use the radar map</h3>
<p>
Selecting a playlist from the options above displays the mean attributes of that playlist in the radar map.
Selecting one song from the table displays the attributes of just that song.
Upon selecting multiple songs from the table, the radar map displays the mean attributes of your selection. Click on something again to unselect it or click on a button to reset all selections.
</p>
</div> -->
<div class='table-radar-holder'>
<!-- TABLE -->
<!-- Added code to make text highlighting disabled -->
<div class='table-holder' id='table' style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;"> </div>
<!-- RADAR CHART -->
<div class='radar-and-title'>
<div class='radar-holder' id='radar'> </div>
<h3 id="current-playlist">Liked Songs</h3>
</div>
</div>
<h1>Your Playlist Mood Breakdown</h1>
<div class='piechart-holder'>
<!-- Change viewbox to whatever you want, e.g., '0 0 1000 6000' This determines your aspect ratio and coordinate system -->
<!-- Delete all the sample SVG code below after the viewbox to before the closing tag. Populate this part of the SVG with D3. -->
<div id='piechartLiked'></div>
<div id='piechartHosting'> </div>
<div id='piechartAlternative'> </div>
<div id='piechartAccoustic'> </div>
<!-- <div class='piechart-holder' id='piecharts'></div> -->
<!-- <div class='piechartlegend-holder' id='piechartlegend'></div> -->
</div>
<div class='piechartlegend-holder'>
<svg id='piechartLegend' height=100 width=700></svg>
</div>
<!-- Further writeup -->
<div class = 'content-column2'>
<h1>Demo Video</h1>
<video id = 'demo-video' controls width='100%'>
<source src='data/demo_video.mp4' type='video/mp4'>
<p>Your browser doesn't support HTML5 video. Here is
a <a href='data/demo_video.mp4'>link to the video</a> instead.</p>
</video>
<h1>Visualization explanation</h1>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p><a href='https://docs.google.com/presentation/d/1XSr41ZIq_0qIlHw9R1enu7kIf7J96fm3NfXDujFPHnQ/edit?usp=sharing'>Google Slides Presentation</a></p>
<h1>Acknowledgments</h1>
<p>
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
</p>
<ul>
<li><a href='https://d3js.org/'>
D3: Data-Driven Documents</a>
by Mike Bostock is used for manipulating the DOM to create visualizations.
</li>
<li><a href='https://codepo8.github.io/css-fork-on-github-ribbon/#'>
Pure CSS responsive 'Fork me on GitHub' ribbon</a>
by Chris Heilmann is used to create the banner that links back to the source code repository.
</li>
<li><a href=' https://developer.spotify.com/documentation/web-api/'>
The Spotify Web API</a>
was used to gather and understand our personal music data and view the metrics.
</li>
<li><a href='https://github.com/plamere/spotipy'>
SpotiPy Library</a>
is a Python library used to help analyze data from the Spotify Web API.
</li>
<li><a href='http://bl.ocks.org/nbremer/6506614'>
Radar Chart Example</a>
by Nadieh Bremer was used to understand how to create the radar chart.
</li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src='lib/d3.v6.1.1/d3.min.js'></script>
<script src='js/piechartlegend.js'></script>
<script src='js/visualization.js'></script>
<script src='js/piechartLiked.js'></script>
<script src='js/piechartHosting.js'></script>
<script src='js/piechartAlternative.js'></script>
<script src='js/piechartAccoustic.js'></script>
<script src='js/table.js'></script>
<script src='js/evaluationMethods.js'></script>
<!-- Keshav test scripts -->
<script src='js/radarmapLiked.js'></script>
<script src='js/radarscript.js'></script>
<!-- Keshav test scripts end -->
</body>
</html>