generated from com-480-data-visualization/com-480-project-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
137 lines (124 loc) · 6.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trends in Music History</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet" />
<!-- D3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default bg-blackgray">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Trends in Music History</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a class="float-lg-right float-left mb-lg-0 mb-1" href="#">Home</a></li>
<li><a class="float-lg-right float-left mb-lg-0 mb-1" href="#viz1">The Most Popular Tracks per Year</a></li>
<li><a class="float-lg-right float-left mb-lg-0 mb-1" href="#viz2">Evolution of Genres and Music Production</a></li>
<li><a class="float-lg-right float-left mb-lg-0 mb-1" href="#viz3">Audio Features of Genres</a></li>
<li>
<a class="float-lg-right float-left mb-lg-3" href="https://github.com/com-480-data-visualization/data-visualization-project-2021-vizir">Github Repository</a>
</li>
</ul>
</div>
</nav>
<!-- Introduction -->
<div class="container-fluid bg-green text-center">
<div class="row">
<div class="col-12">
Explore the trends in music history through the years!<br>
In this visualization, you will be able to discover the best trending songs over the years and listen to them.
See the evolutions of genres and audio features using our three visualizations. Get started!
</div>
</div>
</div>
<!-- Visualization 1 -->
<div class="container-fluid bg-white text-center" id="viz1">
<h3 class="margin">The Most Popular Tracks per Year</h3>
<p>
Let's explore the most popular tracks that are considered a symbol of their publishing year according to Spotify.
In this visualization, we show the popularity of the best tracks and features such as danceability and energy.
Some interesting trends are visible such as an increase in energy average and a decrease in acousticness through time.
The bar above the chart displays the genres of each track using a unique color per genre.
This visualization allows to compare the tracks and selecting the time interval. Move the mouse pointer over an element to interact.<br>
The songs are playable using the Spotify play <a href="#play">button</a>.</p>
<!-- Initialize a select button -->
<select id="selectButton"></select>
<i id="info_circle" class="fa fa-info-circle infoFeatures"></i>
<p><br></p>
<script type="text/javascript" src='js/tracks_popularity.js'></script>
<p><br></p>
<p>
Listen to the most popular songs from 1923 to 2021 while enjoying the visualizations!
</p>
<iframe id="play" src="https://open.spotify.com/embed/playlist/4jHDjaezKKPJm2xAxytok4" width="400" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
<!-- Visualization 2 -->
<div class="container-fluid bg-green text-center padding-xe years">
<h3 class="margin">Evolution of Genres and Music Production</h3>
<div class="row">
<div class="col-12 col-lg-8 bg-blackgray rounded-lg">
<div class="row">
<div class="col-lg-10 col-12" id="viz2"></div>
<div class="col-lg-2 col-12 mt-5 pb-md-5" id="toggle_viz2"></div>
</div>
</div>
<div class="col-12 offset-0 col-lg-3 offset-lg-1 bg-blackgray rounded-lg text-justify px-4 py-4 my-4 my-lg-0">
<p> Hoping that you are now maybe listening to an old good song from the 60's, let's take a look at the evolution of the genres and the music production over the years.
As you can see, this evolution is represented by the mean number of tracks that came out during each decade for each genre.
</p>
<p>
You will be able to see the growth in music production over the year for each given year as well as compare multiple genre at the same time.
Feel free to play with the buttons to display different combination of genres.
</p>
<p>
Check out the genres that you think may be less productive today than before or that may have grown in productivity a lot ! You may be suprised !
Please don't forget to take into account the fact that, overall, more songs come out today than a hundred years ago.
</p>
</div>
</div>
</div>
<!-- Visualization 3 -->
<div class="container-fluid bg-white text-center" id="viz3">
<h3 class="margin">Audio Features of Genres</h3>
<div class="row">
<div class="col-12">
Finally, you can explore and compare the characteristics of the different genres over the years.
Select the audio feature and add the genres that interest you to make them appear in the chart below !
This data shows for instance that rap and R&B are among the most danceable genres, and that classical music has the least energy and valence.
It also shows that acousticness has steadily decreased over the past century, or that blues had a peak of liveness in the late '70s.
</div>
</div>
<br />
<select id="selectFeature"></select>
<i id="info_circle_af" class="fa fa-info-circle infoFeatures"></i>
<br /><br />
<div class="row">
<div id="checkbox-af" class="btn-group-toggle col-sm-12" data-toggle="buttons">
</div>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-blackgray text-center">
<h3>Authors</h3>
<p>Alessandro Tempia Calvino, Alexandre Hutter, Florian Singer</p>
</footer>
<!-- Bootstrap and JQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Custom JS scripts -->
<script type="text/javascript" src='js/genres_years_bars.js'></script>
<script type="text/javascript" src='js/audio_features.js'></script>
<!-- Font Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- D3 chromatic scale -->
<script src="https://d3js.org/d3-scale-chromatic.v2.min.js"></script>
</body>
</html>