generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
198 lines (165 loc) · 10.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Spotify Recs</title>
<!-- add javascript -->
<script src="js/d3.v6.1.1/d3.min.js" charset=utf-8></script>
</head>
<body>
<!-- Webage Header -->
<h1>Spotify Music Suggestions</h1>
<div>
<!-- Motivation Section -->
<h2>Motivation</h2>
<p>Music preferences are subjective and with the magnitude of content on streaming platforms, finding new music can be a challenge.
For our project, we want to focus on exploring new music through similar songs using Spotify's API.
The domain tasks that our visualizations will support include exploring and comparing musical attributes from a dataset of songs along with supporting song recommendation and the discovery of new music.
Users should be able to identify musical attributes of songs that they enjoy to find similarly structured music that could appeal to them.
Our visualization simplifies this discovery by depicting the distribution of songs in a digestible scatter plot format for users to navigate and explore.
Finding which musical attributes characterize a particular song (danceability, energy, etc.) is useful for helping users expand on their music taste, and our visualization allows users to filter on these attributes to create the x and y axes.
Songs that have similar attributes are grouped together through their position on our graph. Our target user for this visualization is anyone who is interested in learning more about their music preferences and wants to find more songs they would like to listen to, and we provide a tooltip for our users when they hover over a point on a graph that tells them the song information
</p>
</div>
<div>
<!-- Background Section -->
<h2>Background</h2>
<h4>Data <a href="https://www.kaggle.com/datasets/a63964c0b3cc0a9b70b77c198678bb770f1ed41f6f6c6543f80ccee40d5ddaa1?resource=download">(Link)</a></h4>
<div>
<p>The creator of the dataset we used made a query to gather data from the Spotify API to help them identify what factors make up a song released on Spotiy. The query was run and data was collected from the Spotify API on 12/8/2020, using a query for every letter of the alphabet.
The original dataset contained 46 columns and over 10,000 rows. For the purposes of this assignment, a random subset of 2,000 rows was selected using a python script.
In terms of biases and ethical considerations, one facet is the columns that were collected. Since our study is reliant on a query written by another party, there may have been a bias in the song selection process that is unknown to our team or a bias in writing this query.
For example, popularity is an attribute that can only be gauged through the information present at a specific moment in time. Popularity is likely pulled based on the number of streams in that moment, and external factors that may cause a song to be streamed frequently at a time are not clear.
Additionally, a consideration might be the bias present in Spotify's assignment of characteristics like valence (the "mood" of a song), which is more subjective and difficult to quantify. Ethical considerations might include the manner in which Spotify is gathering/storing data from users and artists.
To clean the data, we first removed all columns that were not relevant to our analysis. For example, there was a lot of API data that were added as columns so these were deleted (i.e. album.external_urls.spotify, external_ids.isrc, external_urls.spotify). Additionally, columns that had data that was not unique, unuseful or repetitive for differentiating tracks were removed (i.e. time signature, track number, disc number).
Next, we changed the 'key' column to include the actual key string (derived from the data dictionary in Spotify's API documentation) rather than the key id. Then, we replaced the album release date column data to just include the release year as some rows only included the year rather than the full date. Finally, we removed rows that contained missing values and renamed the column headers to be more readable.
At this stage, changes that we have made since our initial proposal sketch include: using a two axes grid rather than a four-quadrant grid for our scatterplot, our channel of color will now depict how long ago a song was released instead of encoding the same attribute twice (position and color for grouping), and our loudness attribute was converted to a positive scale instead of a negative scale for standardization purposes.
</p>
</div>
<div>
<h4>Demo Video</h4>
<video width="500" height="300" controls>
<source type="video/mp4" src="video/DemoVideo.mp4">
<track src="video/Subtitles.vtt" label="English" kind="captions" srclang="en" default>
</video>
</div>
<div>
<h4>Report</h4>
<a href="./report/Report.pdf">Open PDF file</a>
</div>
</div>
<div>
<!-- Visualizaiton Section -->
<h2>Visualization</h2>
<!-- div for the visualzations -->
<div class="visualizations">
<!-- scatter graph div -->
<div class="scatter">
<!-- scatter title -->
<h4 id="vis1-title">Spotify Song Attributes</h4>
<!-- scatter legend -->
<div id="legend">
<p id="color-key-min">Min Album Release Date (1945)</p>
<img src="images/Greens.png" alt="color_bar" id="color-key"><p></p>
<p id="color-key-max">Max Album Release Date (2020)</p>
</div>
</div>
<div>
<!-- bar graph title -->
<h4 id="vis1-title">Count of Songs in Top 30 Available Countries</h4>
<!-- bar graph div -->
<div class="bar">
<!-- bar legend -->
<div id="legend2">
<p id="active-markets">Available in the Market (on hovering over scatter points)</p>
<p id="inactive-markets">Not Available in the Market (on hover over scatter points)</p>
</div>
</div>
</div>
<div>
<!-- Country codes data dictionary for bar graph x axis -->
<h5>Country Codes</h5>
<ul id="country-codes">
<li>US: United States</li>
<li>CA: Canada</li>
<li>MX: Mexico</li>
<li>CR: Costa Rica</li>
<li>AR: Argentina</li>
<li>BO: Bolivia</li>
<li>BR: Brazil</li>
<li>CL: Chile</li>
<li>PE: Peru</li>
<li>PY: Paraguay</li>
<li>EC: Ecuador</li>
<li>SV: El Salvador</li>
<li>GT: Guatemala</li>
<li>HN: Honduras</li>
<li>NI: Nicaragua</li>
<li>CO: Colombia</li>
<li>PA: Panama</li>
<li>ZA: South Africa</li>
<li>DO: Dominican Republic</li>
<li>HU: Hungary</li>
<li>PT: Portugal</li>
<li>TR: Turkey</li>
<li>CZ: Czech Republic</li>
<li>ES: Spain</li>
<li>SK: Slovakia</li>
<li>SI: Slovenia</li>
<li>EE: Estonia</li>
<li>GR: Greece</li>
<li>IL: Israel</li>
<li>LT: Lithuania</li>
</ul>
</div>
</div>
<div class = "click-point">
<!--dropdowns for choosing x and y attributes-->
<div>
<label>Select X Axes:</label>
<select form="show-pt" id="x">
<option value="Energy">Energy</option>
<option value="Danceability" selected>Danceability</option>
<option value="Instrumentalness">Instrumentalness</option>
<option value="Liveness">Liveness</option>
<option value="Loudness">Loudness</option>
<option value="Tempo">Tempo</option>
<option value="Valence">Valence</option>
</select>
</div>
<br>
<div>
<label>Select Y Axes:</label>
<select form="show-pt" id="y">
<option value="Energy">Energy</option>
<option value="Danceability">Danceability</option>
<option value="Instrumentalness">Instrumentalness</option>
<option value="Liveness">Liveness</option>
<option value="Loudness" selected>Loudness</option>
<option value="Tempo">Tempo</option>
<option value="Valence">Valence</option>
</select>
</div>
<div>
<!-- button for submitting with new x and y attributes-->
<button type="button" onClick = "changeAttributes()" id="create-pt">Create</button>
</div>
</div>
<!-- Acknowledgements section -->
<div class="acknowledgements">
<h2>Acknowledgements</h2>
<div>
<ul>
<li><a href="https://d3-graph-gallery.com/graph/interactivity_brush.html">Source 1</a> </li>
<li><a href="https://www.d3indepth.com/zoom-and-pan/">Source 2</a></li>
<li><a href="https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/">Source 3</a></li>
<li><a href="https://www.happyscribe.com/subtitle-tools/convert-srt-to-vtt">Source 4</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Source 5</a></li>
</ul>
</div>
</div>
<!-- connect webpage to Javascript file -->
<script src="js/d3.v6.1.1/main.js"></script>
</body>
</html>