generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
291 lines (283 loc) · 11.2 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Visualizing Spotify Song Attributes</title>
<script src="js/d3.v6.1.1/d3.min.js"></script>
</head>
<body>
<h1 class="centered">Visualizing Spotify Song Attributes</h1>
<h3 class="centered">
Dean Frame, Adrianna Liu, Somya Prabhakar, Patrick Yoon
</h3>
<div class="section">
<h2>Motivation</h2>
Spotify has grown considerably over the past decade and has come up with
multiple music recommendation systems such as Discover Weekly and Release
Radar. However, users are given a strict list of songs for the week and do
not have a choice over the songs they are suggested. We want to make a
song recommendation visualization tool for music listeners that want to
take more control of the music they listen to. Users will be able to find
new songs based on their personal choices instead of being confined to an
algorithm. They can select the musical artists they are interested in, and
we will output a scatterplot that shows all of the songs that match the
search criteria. From there, users will be able to view the different
features that make up a certain song and learn more about their music
taste.
<br />
<br />
In addition, Spotify users can also mark down that they don’t like a
recommended song, but that doesn’t prevent them from getting recommended
more songs that they don’t like in the future. Using our tool, if users
“dislike” a song that is chosen for them, they also have the option of
disliking songs with similar features to the data point that was selected.
<br />
<br />
Finally, Spotify also creates suggested playlists for its users based on a
certain vibe, for example, Chill Mix. While some new music is introduced,
most of the time the songs chosen are music that the user already listens
to. So, another domain task we want to support is allowing users to curate
personal playlists filled with new music that all have the same “vibe,”
which can be determined by song features such as danceability and valence.
</div>
<div class="section">
<h2>Background</h2>
<h3>Data</h3>
We have chosen to link our data visualization tool with the Spotify API.
This library gives us access to an effectively endless amount of JSON
metadata about the music and artists available on Spotify, as well as
user-related data collected by the company playlists created by users as
well as listening history. However, we used the API to manually create a
database of ten thousand songs that we will use as the basis for our
visualization. These songs will evenly span the top one thousand artists
on Spotify so that users can discover new music across genres and musical
features. The link to the spotify web API can be found here:
https://api.spotify.com.
<br />
<br />
The data we are using was collected by Spotify under the user privacy and
data collection agreement that all users sign when creating a Spotify
account. As such, all user-related data seem to have been collected in an
ethical manner. However, it does not seem likely that users understand the
depth of data collected, nor what Spotify uses it for, other than the
customized playlists and summaries they surface to users. We believe it
would be more ethical for Spotify to be more easily understandable and
transparent about how they analyze and implement collected data, but the
methods of collection themselves are not inherently unethical.
<br />
<br />
Furthermore, it is difficult to identify potential sources of bias in the
data provided by Spotify. All music and artist data are fairly
objective—statistics such as artist popularity and number of streams are
easy to count and bias-free. Similarly, user listening history is simply a
queue of songs, so there is no way that collection and storage would
introduce bias into the data set.
<br />
<br />
Not much data cleaning is required when handling data received from the
Spotify API. This is because the Spotify API responds to requests very
efficiently, allowing data collection to be quite simple. In order to get
the data we want, we iterated through the top 1000 artists on Spotify and
got the top 10 tracks of each artist. Then, we requested the audio
features for each track. There was no bad data involved and thus data
cleaning was not a necessity.
<br />
<br />
Data can be downloaded <a href="track_data.csv">here</a>
<h3>Demo Video</h3>
<video width="960" height="540" controls>
<source src="./video/DS4200 Demo Video.mp4" type="video/mp4" />
<track
src="./video/Demo Video Captions.vtt"
kind="subtitles"
srclang="en"
label="English"
/>
</video>
<h3>Report</h3>
Our report can be found
<a
href="https://drive.google.com/file/d/1gKXY67nSFAk751QHXHD8nKScGnjw_oVg/view?usp=sharing"
>here</a
>
</div>
<div class="sectionBorder">
<h2>Visualization</h2>
<h3 class="centered">Discover New Music</h3>
<div class="centered">
Hover over a point to view the song title and the specific values for
the selected song features, or click on a point to view actions for the
selected song
</div>
<div class="container">
<div class="col1">
<br />
<br />
<br />
<br />
<br />
<br />
<div class="yAxis">
<label for="axisY">Song Feature</label>
<br />
<select name="axisY" id="axisY" onchange="updateScatterplot()">
<option value="popularity">Popularity</option>
<option value="danceability">Danceability</option>
<option value="energy">Energy</option>
<option value="speechiness">Speechiness</option>
<option value="instrumentalness">Instrumentalness</option>
<option value="loudness">Loudness</option>
<option value="acousticness">Acousticness</option>
<option value="liveness">Liveness</option>
<option value="valence">Valence</option>
</select>
</div>
<br />
<br />
<div id="dislike-box">
Disliked songs (these will not be displayed in the scatterplot):
<br />
<div id="dislike-list"></div>
</div>
</div>
<div class="col2">
<div id="vis1">
<div id="song-modal" class="modal">
<div id="song-info"></div>
<button
id="like-button"
class="styled-button"
onclick="likeSong()"
>
Like song</button
><br />
<button
id="dislike-button"
class="styled-button"
onclick="dislikeSong()"
>
Dislike song</button
><br />
<button
id="dislike-others-button"
class="styled-button"
onclick="dislikeSimilarSongs()"
>
Dislike similar songs
</button>
<br />
<div id="addSong">
<label for="addSongToPlaylist">Add song to playlist</label>
<select
name="addSongToPlaylist"
id="addSongToPlaylist"
></select>
<button class="styled-button" onclick="addSongToPlaylist()">
Add
</button>
</div>
</div>
</div>
<div class="dropdown2">
<label for="axisX">Song Feature</label>
<br />
<select name="axisX" id="axisX" onchange="updateScatterplot()">
<option value="popularity">Popularity</option>
<option value="danceability">Danceability</option>
<option value="energy">Energy</option>
<option value="speechiness">Speechiness</option>
<option value="instrumentalness">Instrumentalness</option>
<option value="loudness">Loudness</option>
<option value="acousticness">Acousticness</option>
<option value="liveness">Liveness</option>
<option value="valence">Valence</option>
</select>
</div>
</div>
</div>
<br />
<br />
<h3 class="centered">Analyze Your Playlist</h3>
<div class="centered">
Hover over a bar to see the average value of each song feature in your
playlist
</div>
<div class="container">
<div class="playlistCol">
<label for="playlistSelect">Choose a Playlist</label>
<br />
<select
name="playlistSelect"
id="playlistSelect"
onchange="updateBarChart()"
></select>
<br />
<br />
<br />
Songs in this playlist:
<br />
<div id="song-list"></div>
<br />
<br />
<br />
<label for="newPlaylistName">Add a New Playlist</label>
<br />
<input
name="newPlaylistName"
type="text"
id="newPlaylistName"
placeholder="Playlist name..."
/>
<button class="styled-button" onClick="addNewPlaylist()">
Add new playlist!
</button>
</div>
<div class="yAxisLabelCol">Value</div>
<div class="barChartCol">
<div id="vis2"></div>
</div>
</div>
</div>
<div class="section">
<h2>Acknowledgements</h2>
<ul>
<li>
<a href="https://www.statology.org/normalize-data-between-0-and-1/">
https://www.statology.org/normalize-data-between-0-and-1/
</a>
</li>
<li>
<a href="https://www.w3schools.com/tags/tag_select.asp">
https://www.w3schools.com/tags/tag_select.asp
</a>
</li>
<li>
<a
href="https://stackoverflow.com/questions/38918120/replace-old-content-d3"
>
https://stackoverflow.com/questions/38918120/replace-old-content-d3
</a>
</li>
<li>
<a
href="https://www.geeksforgeeks.org/how-to-get-selected-value-in-dropdown-list-using-javascript/"
>
https://www.geeksforgeeks.org/how-to-get-selected-value-in-dropdown-list-using-javascript/
</a>
</li>
<li>
<a href="https://www.d3indepth.com/axes/">
https://www.d3indepth.com/axes/
</a>
</li>
<li>
<a href="https://www.d3indepth.com/scales/">
https://www.d3indepth.com/scales/
</a>
</li>
</ul>
</div>
<script src="js/d3.v6.1.1/script.js"></script>
</body>
</html>