-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
105 lines (104 loc) · 5.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Visual Analytics Project</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="dark_style.css">
<link rel="stylesheet" href="autoComplete.02.min.css">
<script src="lib\d3.v7.min.js"></script>
<script src="lib\d3-selection-multi.v1.min.js"></script>
<script src="lib\autoComplete.min.js"></script>
<script defer src="lib\pca.js"></script>
<script defer src="utils.js"></script>
<script defer src="styles.js"></script>
<script defer src="show_stats.js"></script>
<script defer src="histogram_filter.js"></script>
<script defer src="Scatter_plot.js"></script>
<script defer src="search.js"></script>
<script defer src="boxplot.js"></script>
<script defer src="radial_plot.js"></script> <!-- the defer attribute lets the script load but waits for the DOM to be ready before executing it -->
<script defer src="main.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<img id="dark-mode-toggle" src="images/dark-mode.png" alt="Toggle for dark or light mode">
<div id="filter-bar-container" class="block">
<h3 class="title">Filters</h3>
<div id="filter-bar">
</div>
</div>
<div id="scatter-plots" class="block">
<form id="search-form">
<input type="search" id="search-input" placeholder="Search...">
<!--<button type="submit">Search</button>-->
</form>
<div id="scatter-plot-container">
<div id="scatter-plot-and-name-container-1" class="scatter-plot-and-name-container">
<div class="scatter-plot-header">
<div>
<h3 class="scatter-plot-title">Songs</h3>
</div>
<h4 class="color-key" id="songs-color-key">Color key <img class="question-mark" src="images/question-mark-on-a-circular-black-background.png" alt="Question Mark Icon"></h4>
</div>
<div id="scatter-plot-1" class="scatter-plot"></div>
</div>
<div class="scatter-plot-and-name-container">
<div class="scatter-plot-header">
<div>
<h3 class="scatter-plot-title">Artists</h3>
</div>
<h4 class="color-key" id="artists-color-key">Color key <img class="question-mark" src="images/question-mark-on-a-circular-black-background.png" alt="Question Mark Icon"></h4>
</div>
<div id="scatter-plot-2" class="scatter-plot"></div>
</div>
</div>
</div>
<div id="stats-bar" class="block">
<div id="stats-bar-header">
<h3 id="stats-h3" class="title">Stats <img class="question-mark" src="images/question-mark-on-a-circular-black-background.png" alt="Question Mark Icon"></h3>
<img id="color-hierarchy" src="images/selected_and_hierarchy.jpg" alt="Color hierarchy description">
</div>
<div id="stats-container">
<div class="stats-and-bar">
<div id="main-stats-color-bar"class="stats-color-bar"></div>
<div id="main-stats" class="stats"></div>
</div>
<div class="stats-and-bar">
<div id="1-stats-color-bar" class="stats-color-bar"></div>
<div id="1-stats" class="stats"></div>
</div>
<div class="stats-and-bar">
<div id="2-stats-color-bar" class="stats-color-bar"></div>
<div id="2-stats" class="stats"></div>
</div>
<div class="stats-and-bar">
<div id="3-stats-color-bar" class="stats-color-bar"></div>
<div id="3-stats" class="stats"></div>
</div>
<div class="stats-and-bar">
<div id="4-stats-color-bar" class="stats-color-bar"></div>
<div id="4-stats" class="stats"></div>
</div>
<div class="stats-and-bar">
<div id="5-stats-color-bar" class="stats-color-bar"></div>
<div id="5-stats" class="stats"></div>
</div>
</div>
</div>
<div id="graphs" class="block">
<div id="radial-graph-container">
<h3 class="title"><span id="radial-h3">Radial Plot <img class="question-mark" src="images/question-mark-on-a-circular-black-background.png" alt="Question Mark Icon"></span></h3>
<div id="radial-graph"></div>
</div>
<div id="other-graph-container">
<h3 class="title"><span id="box-h3">Box Plot <img class="question-mark" src="images/question-mark-on-a-circular-black-background.png" alt="Question Mark Icon"></span></h3>
<div id="other-graph"></div>
</div>
</div>
</div>
</body>
</html>