generated from DS4200-Sec2-F22/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
213 lines (161 loc) · 10.1 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" type="text/css" href="style.css">
<script src='js/d3.v6.1.1/d3.min.js'></script>
<title>Visualizing a Music Recommendation Algorithm</title>
</head>
<body>
<div class="intro">
<h1>Visualization of a Music Recommendation Algorithm</h1>
<div class="arrows">
<a>
<div class="arrow"></div>
</a>
</div>
</div>
<div id="motivation" class="panel">
<h2 class="animate-charcter"> Motivation</h2>
<h1 class="text">
We are an entire team of music lovers. Beyond music though, we're particularly passionate about
understanding and
visualizing recommendation algorithms in order to understand how they work. Our motivation for this project
brings these
two passions together. Our project is involved in the area of recommendation systems and algorithms. We want
to allow
our users to be able to find song recommendations, as well as understand what makes the songs similar in
order to make
on the spot judgements to create a creative linking throughout the work.
<br>
<br>
<br>
<br>
Our tool has two primary use cases for this domain area and problem: playlist development for hobbyists or
producers and
live DJing for hobbyist or professional DJs. Producers of playlists or albums need to create a track
ordering that tells
a story or creates a seamless flow. To do this, they need to understand the similarity between songs and
what drives
that similarity in order to create an effective ordering. Alternatively, the role of a DJ is to make these
judgements on
the fly. Without an AI tool or automation, the DJ needs to rely on his own awareness of song options and
understanding
of their dynamics from memory. With our visualization tool, a DJ would be able to link songs together over
time, make
snap judgement decisions on which song to choose next, and see what trajectory his performance has taken
over time.
</h1>
</div>
<div id="background" class="panel">
<h2 class="animate-charcter"> Background</h2>
<h1 class="text">
The original dataset was collected from the Free Musical Archive ("FMA"). FMA offers free access to open
licensed,
original music by independent artists around the world. Our tool visualizes different song tracks and
recommended
songs based on similarity of different attributes like valence, tempo and danceability. We used Python to
clean and
prepare our data. In order to find the similarity between songs, we decided to use the Euclidean distance
method via
Scikit-Learn to obtain an adjacency matrix for all nodes/songs. We then found top 6 matches and converted
the data
to a json file.
</h1>
<div id="data-subsection" class="subsection">
<h2 class="animate-charcter-2">Data</h2>
<div class="indent">
<h1 class="text">
Original Data link:
<a href="https://github.com/mdeff/fma"> https://github.com/mdeff/fma</a>
</h1>
<br>
<h1 class="text">
The following are potential issues with our dataset. Data sampling might not be accurate for our population,
presenting biases as only independent artists who are willing to upload their music for free. As a result,
the bias
is that any music that is privatized will not be present. Some data quality issues are that some tracks do
not have
genres associated with them and there are multiple tracks with the same names. There are also some erroneous
lines
in the csv file that had to be removed. To correct this, we had to manually delete such rows from the csv
files.
Moreover, outliers in the data consist of six songs that are shorter than two seconds.
</h1>
</div>
<div id="demo-link-subsection" class="subsection">
<h2 class="animate-charcter-2">Demo Video</h2>
<div class="indent">
<div>
<video width="640" height="480" controls>
<source src="DS4200FINALLLLLL.mp4" type="video/mp4">
<source src="DS4200FINALLLLLL.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div id="final-report-link-subsection" class="subsection-last">
<h2 class="animate-charcter-2">Report</h2>
<div class="indent">
<h1 class="text"><a href="https://northeastern.sharepoint.com/:b:/s/DS4200-TeamJEST/Edl3DZ-2R9ZGvaipVkRNZ3IBMsxqSB3eZy7pWt1IJDCenA?e=CCdmaq">Final Report Link</a></h1>
</div>
</div>
<div id="visualization" class="panel">
<h2 class="animate-charcter"> Visualization</h2>
<h1 class="text">
Explanation: To start engaging with our visualization, please follow these instructions:
<ol>
<li>Add a song using the search bar (see below for songs to start with, alternatively you can search for a song using on freemusicarchive.org)</li>
<li>Add neighboring songs to the graph by clicking your node, this click also adds the clicked node and its neighbors to the spider graph</li>
<li>You can also hover over an individual node to highlight it and its neighbors</li>
<li>When you're ready to start over, click the reset button</li>
</ol>
Sample song titles are as follows:
<ul>
<li>Electric Ave</li>
<li>Love</li>
<li>Food</li>
<li>Freeway</li>
</ul>
</h1>
<div class="navbar">
<h3 class="text">Enter Song Title!</h3>
<div class="enterSong">
<input id="information" label="id">
<button id="button"> Submit </button>
<button id="reset"> Reset </button>
</div>
<h3 class="text" id="songTitle">Song Title: </h3>
</div>
<div class="column">
<div id="column1">
<div id="vis1"></div>
</div>
<div id="column2">
<div id="vis2"></div>
</div>
</div>
</div>
<div id="resources">
<h2 class="animate-charcter">Resources</h2>
<h1 class="text">
<ul>
<li> <a href=" https://d3-graph-gallery.com/graph/scatter_basic.html">https://d3-graph-gallery.com/graph/scatter_basic.html</a></li>
<li> <a href="https://d3-graph-gallery.com/graph/barplot_basic.html">https://d3-graph-gallery.com/graph/barplot_basic.html</a></li>
<li><a href="https://observablehq.com/@philippkoytek/d3-part-3-brushing-and-linking">https://observablehq.com/@philippkoytek/d3-part-3-brushing-and-linking</a></li>
<li><a href="https://d3-graph-gallery.com/spider">https://d3-graph-gallery.com/spider</a></li></li>
<li><a href="https://observablehq.com/@mbostock/d3-force-directed-graph">https://observablehq.com/@mbostock/d3-force-directed-graph</a></li>
<li><a href="https://medium.com/ninjaconcept/interactive-dynamic-force-directed-graphs-with-d3-da720c6d7811">https://medium.com/ninjaconcept/interactive-dynamic-force-directed-graphs-with-d3-da720c6d7811</a></li>
<li><a href="https://www.d3indepth.com/force-layout">https://www.d3indepth.com/force-layout/</a></li>
<li> <a href="https://observablehq.com/@brunolaranjeira/d3-v6-force-directed-graph-with-directional-straight-arrow">https://observablehq.com/@brunolaranjeira/d3-v6-force-directed-graph-with-directional-straight-arrow</a></li>
<li><a href="https://freefrontend.com/css-scroll-effects/">https://freefrontend.com/css-scroll-effects/</a></li>
<li><a href="https://codepen.io/argyleink/pen/wvMxEXM">https://codepen.io/argyleink/pen/wvMxEXM</a></li>
<li><a href="https://alvarotrigo.com/blog/css-text-animations/">https://alvarotrigo.com/blog/css-text-animations/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size">https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size</a></li>
</ul>
</h1>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>