-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (152 loc) · 7.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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>InfoVis - Group7</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--d3-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!--css-->
<link rel="stylesheet" href="css/legend.css">
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--css-->
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<!--tabbed menu-->
<div class="container-fluid">
<h4>Satellite Tracker</h4>
<h5>Tracks 1738 artificial satellites currently orbiting Earth</h5>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Satellite Information</a></li>
<li><a data-toggle="tab" href="#tab2">Orbits and Orbit types</a></li>
<li><a data-toggle="tab" href="#tab3">Users and Purposes</a></li>
</ul>
<div class="tab-content">
<!--tab1 SATELLITE MASS, POSITIONS, MOTION AND DESCRIPTIONS-->
<div id="tab1" class="tab-pane fade in active">
<!--How satellites revolve-->
<div id="svg" class="col-md-12">
<div class="col-md-2" style="color:white;">*You can drag the whole satellite system by single click and zoom on it by pan zooming.<br>The red stroke depicts the boundary of the satellite itself, whereas the white stroke depicts satellite's orbit</div>
</div>
</div>
<!--tab2 ORBITS-->
<div id="tab2" class="tab-pane fade">
<div class="row">
<br>
<div class="col-sm-6">
<div id="Selection1" class="pull-right text-right ">
Select Country:
<select id="Country" onchange="select()">
<option value="USA">USA</option>
<option value="Russia">Russia</option>
<option value="China">China</option>
<option value="South Korea">South Korea</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Norway">Norway</option>
<option value="All" selected="selected">All</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div id="Selection2" class="float-left text-left">
Select Users:
<select id="Users" onchange="select()">
<option value="Civil">Civil</option>
<option value="Military">Military</option>
<option value="Commercial">Commercial</option>
<option value="Government">Government</option>
<option value="All" selected="selected">All</option>
</select>
</div>
</div>
<div class="col-sm-4 text-center">Legend: Class of Orbits
<div class="col-sm-1"> <p><span class="key-dot leo"></span>LEO</p> </div>
<div class="col-sm-1"> <p ><span class="key-dot meo"></span>MEO</p> </div>
<div class="col-sm-1"> <p ><span class="key-dot geo"></span>GEO</p> </div>
<div class="col-sm-1"> <p ><span class="key-dot heo"></span>HEO</p> </div>
</div>
</div>
<br>
<div id="containerEllipses" class="col-sm-7">
<svg id="ellipsesvg"></svg>
</div>
<div class="col-sm-5 text-center" id="zoomableScatter">
<svg id="scattersvg"></svg>
Note: In the above scatterplot, select an area to zoomin and double click to zoomout.
</div>
<div class="col-sm-5" id="radarchart"></div>
</div>
<!--tab3 USAGE AND PURPOSE OF SATELLITES-->
<div id="tab3" class="tab-pane fade">
<div class="row">
<br>
<div class="col-sm-6">
<div id="Selection3" class= "pull-right text-right">
Select Purpose:
<select id="Purpose" onchange="select3()">
<option value="Communications">Communications</option>
<option value="Earth Observation">Earth Observation</option>
<option value="Technology Development">Technology Development</option>
<option value="Technology Demonstration">Technology Demonstration</option>
<option value="Space Science">Space Science</option>
<option value="Earth Science">Earth Science</option>
<option value="Navigation/Regional Positioning">Navigation/Regional Positioning</option>
<option value="Navigation/Global Positioning">Navigation/Global Positioning</option>
<option value="All" selected="selected">All</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div id="Selection4" class= "float-left text-left">
Select Users:
<select id="Users1" onchange="select3()">
<option value="Civil">Civil</option>
<option value="Military">Military</option>
<option value="Commercial">Commercial</option>
<option value="Government">Government</option>
<option value="All" selected="selected">All</option>
</select>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<div id="country_count" class="col-sm-6">
<svg id="cc"></svg>
</div>
<div id="year_count" class="col-sm-6">
<svg id="yc"></svg>
</div>
</div>
</div>
</div>
<!--Our Script files-->
<script src="js/satellite.js"></script> <!--data-->
<script src="js/helper_function.js"></script> <!--helps in moving satellites-->
<script src="js/gradients.js"></script>
<script src="js/main.js"></script> <!--moving satellites-->
<script src="js/ellipses.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script> <!--these work with d3 version4-->
<script src="js/zoomablescatter.js"></script>
<script src="js/satellite.js"></script> <!--data-->
<script src="js/tab3_2.js"></script>
<script src="js/tab3_1.js"></script>
<script src="js/tab3_2.js"></script>
<!--boilerplate code-->
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
href="https://browsehappy.com/">upgrade
your browser</a> to improve your experience and security.</p>
<![endif]-->
</body>
</html>