-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
605 lines (501 loc) · 26.9 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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>CS 424 - Project 3</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> -->
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
--> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,700,300|Inconsolata' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">CS424 - Project 3</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#team">The Team</a>
</li>
<li>
<a class="page-scroll" href="#app">The App</a>
</li>
<li>
<a class="page-scroll" href="#howto">How To</a>
</li>
<li>
<a class="page-scroll" href="#data">Data</a>
</li>
<li>
<a class="page-scroll" href="#source">Source Code</a>
</li>
<li>
<a class="page-scroll" href="#findings">Findings</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header style="height: 700px;">
<div class="container">
<div class="intro-text">
<h2 class="intro-heading" style="display: inline; color: #fec503;">Rave On</h2>
</div>
</div>
</header>
<!-- Team Section -->
<section id="team" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Amazing Team</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/filippo.jpg" class="img-responsive img-circle" alt="">
<h4>Filippo Pellolio</h4>
<p class="text-muted">Application Layout and Map</p>
<ul class="list-inline social-buttons">
<li><a href="https://www.linkedin.com/in/filippo-pellolio-6b8585108/en"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/me.jpg" class="img-responsive img-circle" alt="">
<h4>Umberto Di Fabrizio</h4>
<p class="text-muted">Data collection and Assembling</p>
<ul class="list-inline social-buttons">
<li><a href="https://it.linkedin.com/in/umbertodifabrizio"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/manu.jpg" class="img-responsive img-circle" alt="">
<h4>Manuel Tanzi</h4>
<p class="text-muted">Force Layout</p>
<ul class="list-inline social-buttons">
<li><a href="https://it.linkedin.com/in/manueltanzi"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="team-member">
<img src="img/team/jack.jpg" class="img-responsive img-circle" alt="">
<h4>Giacomo Scolari</h4>
<p class="text-muted">Data Manager and Timeline</p>
<ul class="list-inline social-buttons">
</ul>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
</div>
<div class="col-md-4">
<a href="./teamProgress.html"
class="page-scroll btn btn-xl">Project Report</a>
</div>
</div>
</div>
</section>
<!-- App Section -->
<section id="app" class="bg-light-gray">
<div class="col-lg-12 text-center">
<h2 class="section-heading">The app</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-4">
</div>
<div class="col-md-4">
<a href="./app"
class="page-scroll btn btn-xl">App</a>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</section>
<!-- how to Section -->
<section id="howto" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">How to use</h2>
<h3 class="section-subheading text-muted">What can you do?</h3>
</div>
</div>
<div class="row text-center">
<h3 style="margin-bottom:10px">Video Tutorial</h3>
<iframe width="900" height="480" src="//www.youtube.com/embed/UX_mJgXvPJ8" frameborder="0" allowfullscreen></iframe>
</div><br>
<div class="row">
<div class="col-md-8">
<div class="team-member">
<img src="img/screen.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-4">
<div class="team-member">
<h4 style="color: purple;">Overview:</h4><h4 style="text-align: left;">The app is divided into three main parts: on the sides there are the users controls, the center part of the screen is splitted into 3 subparts, on top the timeline for genres and artist, on the bottom left the map graph showing the positions of artists and finally on the bottom right a force graph connecting similar artists accordingly to genres. It is worthed to notice that each of the graph can be extended to fill the all center part, so the app perfectly adapts to large screens where the power of a large graph can be exploited.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/timeline.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Top genres:</h4><h4 style="text-align: left;"> The timeline on the left shows the best genres for each year from 1940 to 2010. When the user hover on the genres he gets some extra information as shown in the next image.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/elvis.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Artist: Elvis</h4><h4 style="text-align: left;"> The curious user hovered over an artist which was very famous in the 1960s, Elvis, so on the too right corner he can see which year he selected and the popularity of the artist during that year.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/rock.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Genre: Rock</h4><h4 style="text-align: left;"> The same concepts applies to genres so the user can select a special genre ad see all the diffusion of it during time, getting to know when it started, when it ended and which were the best and worst period for the genre.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/rock2.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Let's go deeper:</h4><h4 style="text-align: left;"> If one wants to know really in depth the evolution
of rock during the years, the timeline can be enlarged to fit the whole screen and get insights from the visualization.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2 portfolio-item">
<div class="team-member">
<img src="img/decades.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Decades:</h4><h4 style="text-align: left;"> The decade control buttons is used to select a particular decade, in this case (1970s) the map and force graph show only those artist that were famous in that decade and the timeline highligth them as well, or if the visualiation is switched the best genres of the decade are shown.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2 portfolio-item">
<div class="team-member">
<img src="img/adele.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Chosen artist:</h4><h4 style="text-align: left;">By clicking on the buttons on the lower part of the screen the user can access the explore area where he can select any user or genre. The result on the left shows the screen when Adele is clicked: on top there is the timeline of the artist's popularity (in 2008 and 2011 Adele published her albums: '19' and '21'), on the lower left the map shows the nationality on the artist on the map and finally the artist is inserted on the force graph on the right and connected to her genres.
</h4> <h4 >
Because the blue user selected Adele as his favorite artist he get some suggested artists on the lower part of his interface, in this case the most connected to Adele is Joss Stone. The user can click on the suggested artists and add them to the explore view.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2 portfolio-item">
<div class="team-member">
<img src="img/shared.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Shared Space:</h4><h4 style="text-align: left;"> The central space of the application is shared, in the image we can see that because both the user selected Beirut the timeline of the artist is filled with stripes of both red and blue colors to convey the idea that the preference about the artist is shared. On the countrary the independetly selected The Kooks and Arcade Fire as other favorite artist so each of them is filled with the same color of the only user who selected it. The same concept applies to the map and the force graph infact the circle representing Beirut is half red and half blue.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2 portfolio-item">
<div class="team-member">
<img src="img/force.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="color: purple;">Force Graph:</h4><h4 style="text-align: left;"> The force graph connectes artists that share one or more genres, the user can interact with the graph by clicking on genres and all the subgenres get highlighted with the same color. In the figure on the side when the user clicks on Rock also country rock, roots rock and piano rock get coloured with blue.
</h4>
</div>
</div>
</div>
</div>
</section>
<!-- data to Section -->
<section id="data" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Data</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/data2.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="text-align: left;">The data used is taken from <a href="http://the.echonest.com/">
the Echonest API</a> <br>
We wrote some <a href="https://github.com/VanBronckhorst/VizProject3/tree/master/app/script">Python</a>and <a href="https://github.com/VanBronckhorst/VizProject3/tree/master/app/Rscripts">R</a> in order to <span style="text-decoration: underline;">pre-process</span> data and create the static data that we needed. We also took data from Billboard in order to compute the popularity of the best artists for each year from 1940 and 2010, the result about 2010 is shown in the figure on the left.
The way we computed the popularity of an artist is given by the formula:</h4><h4 style="text-align: left;">
Score = CH + (T_10 / CH) * 10 + W_HG_POS / HG_POS
</h4><h4 style="text-align: left;">
where
CH = Total weeks on chart, T_10 = Weeks in top 10, W_HG_POS = Weeks at highest position, HG_POS = Highest position reached and 10 is a multiplication factor to reward artists the lasted long in the Top 10.
<br/>
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/data1.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="text-align: left;">
Then we used those popularities to infer which were the best genres for each year, this approach let us build a 'continuous' graph on the years instead of raw data about just decades. For each artist of a given year we added to their main genre a score equal to their popularity so that if an artist was popular than also his genre was popular. This choice seemed reasonable to us and lead to good results by manual inspection. On the left we have the best genres of 2010.
</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/data3.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="team-member">
<h4 style="text-align: left;">
Finally we grouped the data into decades both for genres and artists so that we are ready to process requests such as: "Which were the best artists of 1960s?", in the image on the left it is shown the non-surprising answer.
</h4>
</div>
</div>
</div>
</div>
</section>
<!--source Section -->
<section id="source" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Source Code</h2>
<h3 class="section-subheading text-muted"> </h3>
</div>
</div>
<div class="row text-center">
<div class="team-member">
<h4 style="text-align: left;">
The code is available at <a href="https://github.com/VanBronckhorst/VizProject3"> this </a> repo.
Just in case you want to download it right away there's a zip at the bottom of this section;)<br> </h4>
<h2>Run it</h2>
<h4 style="text-align: left;">
Oh don't forget to install WAMP, LAMP or anything like that to set up your local server.<br>
Once you're done with it just copy the app folder in the web server folder access the url localhost:8888/index.html on your browser and voila.<br><br>
In case you want something even faster you can quickly set-up a web server with python.
To run the application on your local machine just unpack the archive in a folder.
Go in that folder with a terminal and type:
python -m SimpleHTTPServer 8888
In order to to so you must have python installed. <a href="https://www.python.org/downloads/">Python Download</a>
<br>Then just open a web browser (an updated version of Chrome is highly recommended) and visit the url localhost:8888/index.html
</h4>
<br><br>
<div class="row text-center">
<div class="col-md-4">
</div>
<div class="col-md-4">
<a href="./app.rar" download="Project3_CS424.zip" class="page-scroll btn btn-xl">Source Code</a>
</div>
</div>
<br>
<h2 >External libraries</h2>
<h4 style="text-align: left;">The web application has been written in plain javascript, CSS3 an HTML5. Few external libraries have employed: </h4><br>
<h4 style="text-align: left;"><a href="http://d3js.org/">D3.js</a> a nice library for data visualization</h4>
<h4 style="text-align: left;"><a href="https://http://leafletjs.com/">Leaflet</a> A great library for dealing with maps in javascript</h4>
<h4 style="text-align: left;"><a href="https://jquery.com/">JQuery</a> Famous library to manipulate the DOM</h4>
<h4>We found extremely useful several music API that we exploit throughout our application:</h4>
<h4 style="text-align: left;"><a href="http://the.echonest.com/">Echonest</a> "Our music intelligence platform synthesizes billions of data points and transforms it into musical understanding"</h4>
<h4 style="text-align: left;"><a href="https://developer.spotify.com/">Spotify</a> The famous digital music service that gives you access to millions of songs is also very nice and provides developers with a quick API to lookup artists and their music, they even let you download a preview of any song.</h4>
<h4 style="text-align: left;"><a href="http://www.billboard.com/">Billboard</a> it is not really a library or an API, but if you want to find something about music, well, it is where you want to search.</h4>
</div>
</div>
</div>
</section>
<section id="findings" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Findings</h2>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/disco.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-5">
<div class="team-member">
<h4 style="color: purple;">Disco Fever:</h4>
<h4 style="text-align: left;">
Nothing mind-blowing here, but useful to prove that our data is plausible. This is the graph for the Disco music genre, and it looks as it should: Disco was big from mid-70s to 90s, and it disappeared after that.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/grunge.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-5">
<div class="team-member">
<h4 style="color: purple;">Grunge:</h4>
<h4 style="text-align: left;">
Another reasonable thing we found out using our application, when you select grunge, all the artist in the map will be pretty much overlapping around the Seattle area, place of birth (and death) of grunge. <br/>
A little fun fact: Nirvana are not listed in the top 10 artists for grunge in the Echonest API.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/topMap.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-5">
<div class="team-member">
<h4 style="color: purple;">Where are the best?</h4>
<h4 style="text-align: left;">
This is the map of the location of the top 10 artist for all the decades from 1940, not surprisingly as you can see all of them come from english-speaking countries.<br/>
Here's the lesson: if you wanna be a hit, you better start studying English.
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-6 portfolio-item">
<div class="team-member">
<img src="img/acDc.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-5">
<div class="team-member">
<h4 style="color: purple;">Is it a long way to the top if you wanna Rock&Roll?</h4>
<h4 style="text-align: left;">
This is the timeline for the AC/DC popularity, they formed in 1973 and they were already pretty big in 1975, so i guess it's not really such a long way to the top like <a href="https://www.youtube.com/watch?v=ZDCs7ijNUVM">they said</a>. Well, at least if your name is AC/DC.<br/>
Also, how many of you knew they come from Australia? We certainly didn't.
</h4>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Template at
<a href="http://startbootstrap.com/template-overviews/agency/" style="color:black; text-decoration:underline">Bootstrap</a>
</span>
</div>
</div>
</div>
</footer>
</body>
</html>