generated from com-480-data-visualization/com-480-project-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (103 loc) · 4.88 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Visualization Project - Spotify</title>
<meta name="author" content="vizBrains team">
<link type="text/css" rel="stylesheet" href="viz/styles/style.css">
</head>
<body>
<div class="topnav">
<ul>
<a href="index.html"><h1>Music Trends</h1></a>
<a href="about.html">About</a>
<a href="https://github.com/com-480-data-visualization/data-visualization-project-2021-vizbrains">Our repository</a>
</ul>
</div>
<div>
<div class="overview">
<h2 class="title">Overview</h2>
<h4>
Since the 1920s, music has changed dramatically. The 20th century is actually often described as the “age of musical diversity”.
<br>
Nowadays streaming platforms dominate the industry, and allow us to bring together all these musical works.
</h4>
<p>
<img class="to_left" src="img/jazz.png"/>
<text>
On this website, you will discover many aspects of this evolution through three distinct visualizations.
<br>
• The first one shows the most popular track of each year since 1992, and includes track samples.
<br>
• The second visualization compares different interesting features of the tracks between two distinct years.
<br>
• The last one analyzes the popularity of main genres of music through time.
</text>
<img class="to_right" src="img/rap.png"/>
</p>
</div>
<div>
<h2 class="title">Timeline</h2>
<h4>
What were the most popular songs throughout the years and how actually popular were they ? On the timeline below, we selected for each year the most popular song according to Spotify statistics.
</h4>
<p>
Feel free to navigate on the timeline and listen to the samples.
<br>
• Scroll on the graph to zoom in or out. The more you zoom in, the more years will be visible.
<br>
• Navigate through the timeline with the horizontal scroll bar, or by dragging the cursor directly on the graph.
</p>
<svg id="timeline" viewBox="0 0 1000 600" width ="80%" height="100%"></svg>
<p>
Obviously, people on Spotify today tend to listen to recent tracks, hence old songs appear as less popular than new ones.
<br>
According to you, what's the period of time that had the coolest popular tracks? To us it's obviously the 90's!
</p>
</div>
<div id="year_comparator_div">
<h2 class="title">Year Comparator</h2>
<h4>
Was music happier in the 1950s or in the 2000s? Was it easier to find music to dance along in the 1930s or in the 1980s?
</h4>
<p>
In this next visualisation, you can find out exactly this!
<br>
Hover over the attribute names to get a short description of what they measure, and change the years dynamically using the 2 sliders below.
<br>
If needed, you can find more information on the features <a href="https://developer.spotify.com/documentation/web-api/reference/#object-audiofeaturesobject">here</a>.
</p>
<div class="slider_container"></div>
<svg id="year_comparator" viewBox="0 0 800 500" width="75%" height="100%"></svg>
<p>
It seems like music only got explicit very recently. Is that surprising to you?
<br>
Also, do you see how similar 1987 and 2008 look, even though there are 20 years apart?
Perhaps by using all the features we could gather a better picture, but the graph would be more crowded.
<br>
Note that the feature values (here in %) are calculated as the mean over the top tracks in each year.
</p>
</div>
<div id="bar_chart_comparator_div">
<h2 class="title">Popular Genres</h2>
<h4>
What did the generation of our great-grandparents listen to? What about our parents and grand-parents?
When was the golden age of Jazz? When did Hip Hop emerge in the mainstream?
</h4>
<p>
The following visualization gives answers to such questions by clearly depicting the evolution of musical tastes over the last century.
<br>
For instance, if we take a close look at what happens from 1955 to 1980, we can see that Jazz, R&B and Soul gradually give way to Rock and Pop. We can also situate the emergence of Hip Hop in the 90's.
<br><br>
• Choose whether you want the graph to be ordered or not by ticking the box.
<br>
• Choose which year's genres you want to look at using the slider. This will display a nice musical-wave-like transition.
</p>
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="viz/timeline.js"></script>
<script src="viz/year_comparator.js"></script>
<script src="viz/bar_chart_comparator.js"></script>
</body>
</html>