-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (270 loc) · 11.7 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
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="hi" />
<meta name="data visualization project" content="Version 1" />
<title>Spotify Song Analysis</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Load Custom CSS files -->
<link href="css/main.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- <script type="module">
import { Toast } from "bootstrap.esm.min.js";
Array.from(document.querySelectorAll(".toast")).forEach(
(toastNode) => new Toast(toastNode)
);
</script> -->
<!-- Own script -->
<!-- <script src="js/graph1.js"></script> -->
<!-- <script src="js/graph4.js"></script> -->
</head>
<body class="d-flex h-100 text-center text-black">
<div class="overlay"></div>
<div class="spanner">
<div class="loader"></div>
</div>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Interactive Dashboard</h3>
<nav class="nav nav-masthead justify-content-center float-md-end" id="nav-tab" role="tablist">
<!-- <div class="nav nav-tabs" id="nav-tab" role="tablist"> -->
<div class="nav" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-tab-1" data-toggle="tab" href="#nav-page1" role="tab">Page1</a>
<a class="nav-link" id="nav-tab-2" data-toggle="tab" href="#nav-page2" role="tab">Page2</a>
<a class="nav-link" id="nav-tab-3" data-toggle="tab" href="#nav-page3" role="tab">Page3</a>
</div>
</nav>
</div>
</header>
<main class="px-3">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-page1" role="tabpanel">
<div class="container-fluid">
<div class="row text-center">
<!-- PAGE 1 : HOME PAGE/Popular Songs-->
<h1>All Time Popular Song Name</h1>
<p class="lead">
Song names with highest popularity across the year presented in animated transition.
<br>
Tracks details and their relationships are visualized in the motion graph below.
<br>
Scroll down or navigate to another page to explore more interesting graphs.
</p>
</div>
<!-- <div class="row">
<div class="col-sm text-center">Word Cloud</div>
</div> -->
<div class="row">
<!-- VIZUALISATION 1: WORD CLOUD -->
<div id="chart-area1" class="col-sm text-center" style="height: 70vh">
Word Cloud
</div>
</div>
<div class="row">
<!-- VISUALISATION 2: MOVING SCATTER -->
<!-- Content here -->
<div class="row text-center">
<!-- PAGE 2 : SONG ANALYSIS -->
<h1>Spotify All Time Popular Tracks</h1>
<p class="lead">
Explore the pattern and relationship between different song aspects among the top tracks.
</p>
</div>
<!-- <div class="row">
<div class="col-sm text-center">Scatter Plot</div>
</div>
<div class="row">
<div class="col-sm text-center">MOVING SCATTER Spotify 2020 Top Tracks</div>
</div> -->
<div id="header">
<button id="artist" class="active btn btn-outline-success">Artist</button>
<button id="year" class="btn btn-outline-success">Year</button>
<button id="explicit" class="btn btn-outline-success">Explicit?</button>
<!-- <button id="album" class="btn btn-outline-success">Album</button> -->
<button id="energy" class="btn btn-outline-success">Energy</button>
<button id="danceability" class="btn btn-outline-success">Danceability</button>
<button id="valence" class="btn btn-outline-success">Valence</button>
<button id="speechiness" class="btn btn-outline-success">Speechiness</button>
<button id="acousticness" class="btn btn-outline-success">Acousticness</button>
<div id="chart-area2" class="col-sm text-center" style="height: 70vh"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show" id="nav-page2" role="tabpanel">
<div class="container-fluid">
<div class="row text-center">
<!-- PAGE 2 : SONG ANALYSIS -->
<h1>Music Analysis</h1>
<p class="lead">
Discover the aspects of popular music with in a specified range of year with radar chart (left).
<br>
Explore the collaboration relationship between artist for the desired year.
<br>
Narrow down the network graph (right) by using a higher number of collaborators.
<br>
Interact with the graphs by zooming and hovering over the nodes.
</p>
</div>
<div class="row">
<div class="col-sm text-center">
<p id='radar-chart-title'>Title: Popular song aspects</p>
<div class="col-sm">
<div id="slider-range"></div>
</div>
</div>
<div class="col-sm text-center">
<p id='network-graph-title'>Title: Network Graph</p>
<label>Year:</label>
<select id='year_selector'></select>
<label>Number of Collaborator:</label>
<select id='layer_selector'></select>
</div>
</div>
<div class="row">
<!-- VIZUALISATION 3: Radar Chart -->
<div id="chart-area3" class="col-sm text-center" style="height: 70vh">
Radar Chart
</div>
<!-- VISUALISATION 4: Network Graph -->
<div id="chart-area4" class="col-sm text-center" style="height: 70vh">
<!-- Content here -->
Network Graph
</div>
</div>
</div>
</div>
<div class="tab-pane fade show" id="nav-page3" role="tabpanel">
<div class="container-fluid">
<div class="row text-center">
<!-- PAGE 3 : Song Timeline -->
<h1>Music Timeline</h1>
<p class="lead">
Discover the flow of music characteristic throughout the centuary using multiple timeline chart (left).
<br>
Uncover the pop music trends over the years using the scatter plot (right).
<br>
Tune the animation speed and replay the animation by clicking on the button.
</p>
</div>
<div class="row">
<div class="col-sm text-center">
<p id='line-graph-title'>Title: Line Graph</p>
<div id="line-speed">
<input type="radio" name="line-radio" value="slow"> Slow
<input type="radio" name="line-radio" value="medium" checked> Medium
<input type="radio" name="line-radio" value="fast"> Fast
<button id='play-line-animation'>Replay Line Animation</button>
</div>
</div>
<div class="col-sm text-center">
<p id='Scatter-plot-title'>Title: Scatter Plot</p>
<div id="scatter-speed">
<input type="radio" name="scatter-radio" value="slow"> Slow
<input type="radio" name="scatter-radio" value="medium" checked> Medium
<input type="radio" name="scatter-radio" value="fast"> Fast
<button id='play-scatter-animation'>Replay Scatter Animation</button>
</div>
</div>
</div>
<div class="row">
<!-- VIZUALISATION 5: Radar Chart -->
<div id="chart-area5" class="col-sm text-center" style="height: 70vh">
Line Graph
</div>
<!-- VISUALISATION 6: Network Graph -->
<div id="chart-area6" class="col-sm text-center" style="height: 70vh">
<!-- Content here -->
Scatter plot
</div>
</div>
</div>
</div>
</div>
<!-- <p class="lead">
<a
href="#"
class="btn btn-lg btn-secondary fw-bold border-white bg-white"
>Learn more</a
>
</p> -->
</main>
<footer class="mt-auto text-black-50">
<p>Data Visualization Project</p>
</footer>
</div>
<!-- Javascript lib -->
<!-- <script src="js/lib/jquery-3.5.1.js"></script>
<script src="js/lib/bootstrap.bundle.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <script src="js/lib/jquery-3.5.1.slim.min.js"></script> -->
<script src="js/lib/bootstrap.bundle.min.js"></script>
<!-- d3 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<!-- d3 tip -->
<script src="js/lib/d3-tip.js"></script>
<!-- d3 collection -->
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<!-- d3 array -->
<!-- <script src="https://d3js.org/d3-array.v2.min.js"></script> -->
<!-- word cloud -->
<!-- <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script> -->
<script src="js/lib/d3.layout.cloud.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script> -->
<!-- Slider source -->
<script src="https://unpkg.com/d3-simple-slider"></script>
<!-- Range slider code -->
<!-- <script src="https://cdn.rawgit.com/RasmusFonseca/d3RangeSlider/master/d3RangeSlider.js"></script> -->
<!-- Range slider style -->
<!-- <link href="https://cdn.rawgit.com/RasmusFonseca/d3RangeSlider/master/d3RangeSlider.css" rel="stylesheet"> -->
<script>
$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
$.ajaxSetup({
// Disable caching of AJAX responses
// Used when debugging
cache: false,
});
$.getScript("js/global.js");
$.getScript("js/graph1.js");
$.getScript("js/graph2.js");
$("#nav-tab-1").click(function () {
// $('html').find('script').filter(function(){
// console.log($(this).attr('src'),"aaaaaa")
// return !$(this).attr('src')
// }).remove();
// d3.map = undefined
// $.getScript("https://d3js.org/d3-array.v2.js");
$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
$.getScript("js/graph1.js");
// $.getScript("https://d3js.org/d3-collection.v1.min.js");
$.getScript("js/graph2.js");
});
</script>
<script>
$("#nav-tab-2").click(function () {
$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
$.getScript("js/graph3.js");
$.getScript("js/graph4.js");
});
</script>
<script>
$("#nav-tab-3").click(function () {
$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
// $.getScript("https://d3js.org/d3-array.v2.js");
$.getScript("js/graph5.js");
$.getScript("js/graph6.js");
});
</script>
</body>
</html>