forked from kapil40/Olympics-Dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (98 loc) · 4.33 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
<!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.0">
<title>Final Project</title>
<script src="//unpkg.com/d3@5/dist/d3.min.js"></script>
<script>
var d3v5 = window.d3;
window.d3 = null;
</script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var d3v3 = window.d3;
window.d3 = null;
</script>
<script src="d3.v7.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.css">
<script src="//unpkg.com/topojson@3/dist/topojson.min.js"></script>
<script src=".//olympics/d3-geomap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script> -->
<script src="https://unpkg.com/[email protected]/build/d3-v6-tip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="slider-section">
<div class="slider"></div>
<!-- <select class="dropdown"></select> -->
<div class="toggle">
<form id="form" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-warning active">
<input type="radio" name="controlHeatmapType" value="Summer" checked>Summer<br>
</label>
<label class="btn btn-primary">
<input type="radio" name="controlHeatmapType" value="Winter">Winter<br>
</label>
</form>
</div>
</div>
<div class="top-section">
<div class="d3-geomap" id="geomap"></div>
<!-- <h5 class="map-title"></h5> -->
<div id="barchart"></div>
<!-- <h5 class="bar-title"></h5> -->
</div>
<div class="bottom-section">
<div class="pcp"></div>
<!-- <h5 class="pcp-title"></h5> -->
<div class="pca"></div>
<!-- <h5 class="pca-title"></h5> -->
<div class="pie"></div>
<!-- <h5 class="pie-title"></h5> -->
<!-- <div class="refresh">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-refresh"></span>Refresh
</button>
</div> -->
</div>
<!-- <nav>
<ul>
<li class="dropdown">
<button class="dropbtn" id="dropbtn">Screeplot</button>
</li>
<li class="dropdown1">
<button class="dropbtn1" id="dropbtn1">Scatterplot Matrix</button>
</li>
<li class="dropdown2">
<button class="dropbtn2" id="dropbtn2">Biplot</button>
</li>
<li class="dropdown3">
<button class="dropbtn3" id="dropbtn3">K-Means Screeplot</button>
</li>
</ul>
</nav>
<p class= "intrinsic">
</p>
<div class = "details">
<h3>Top 4 Attributes as per the sum of square loadings</h3>
<table id="myTable">
</table>
</div>
<p id="title">
</p>
-->
</body>
<!-- <script src="olympics/treemap.js"></script> -->
<script src="olympics/chloropeth.js"></script>
</html>