-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
166 lines (139 loc) · 7.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Required for Bootstrap selectpicker -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<link rel='stylesheet' href='stylesheets/style.css'>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Required for Bootstrap selectpicker -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<script src="https://d3js.org/d3-color.v2.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v2.min.js"></script>
<title>VAST 2019 MC-2</title>
</head>
<body>
<!-- Modal for visualizing sensor readings on region click -->
<div class="modal fade" id="sensorReadingsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width:90%;">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="exampleModalLongTitle"></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- <div id="sensorproximity-svg-div"></div> -->
<svg class="staticSensorLineChart"></svg>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal for visualizing sensor readings on static sensor dropdown click -->
<div class="modal fade" id="staticSensorProximityReadingsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width:90%;">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="exampleModalLongTitle"></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="sensorproximity-svg-div"></div>
<!-- <svg class="sensorProximity VASTMC2"></svg> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: black !important;">
<a class="navbar-brand" href="#" style="font-size: 1.1rem;">VAST-2019 MC-2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<select class="selectpicker mobile-select-picker dropdown show-tick" data-live-search="true" title="Mobile Sensors" data-style="btn-sm btn-primary" data-width="fit" data-size="4" id="mobile-sensor-id" name="mobile-sensor-picker"></select>
<select class="selectpicker static-select-picker dropdown show-tick" data-live-search="true" title="Static Sensors" data-style="btn-sm btn-primary" data-width="fit" data-size="4" id="static-sensor-id" name="static-sensor-picker"></select>
<!-- <select class="selectpicker region-select-picker dropdown show-tick" data-live-search="true" title="St. Himark Regions" data-style="btn-sm btn-primary" data-width="fit" data-size="4" id="region-id" name="region-picker"></select> -->
<select class="selectpicker date-select-picker dropdown show-tick" data-live-search="true" title="Select Date" data-style="btn-sm btn-primary" data-width="fit" data-size="4" id="date-select-id" name="date-select-picker">
<option value="clear-date"> Clear Date</option>
<option value="04/06/2020">04/06/2020</option>
<option value="04/07/2020">04/07/2020</option>
<option value="04/08/2020">04/08/2020</option>
<option value="04/09/2020">04/09/2020</option>
<option value="04/10/2020">04/10/2020</option>
</select>
</div>
</nav>
<br/>
<!-- Grid for choropleth and pipe chart -->
<div class="container-fluid" style="width:100%;">
<div class="row no-gutters">
<div class="col-sm">
<div class="card" style="width: 610px; height: 600px;">
<span class="map-header"> <h5 class="card-header">St. Himark Map</h5> </span>
<div class="card-body">
<div id="map-svg-div"></div>
<!-- <svg class="map VASTMC2"></svg> -->
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 630px; height: 600px;">
<span> <h5 class="card-header">Innovative View Leaf Chart <button type="button" class="btn btn-sm btn-dark" id="show-leaves" style="border-radius: 25px;">Show All </button> </h5> </span>
<div class="card-body">
<div id="barchart-svg-div"></div>
<!-- <svg class="barChart VASTMC2"></svg> -->
</div>
</div>
</div>
</div>
</div>
<hr/>
<center>
<div class="card" style="width: 500px; height: 550px;">
<span class="heat-chart-header"> <h5 class="card-header">Circular Heat Chart </h5> </span>
<div class="card-body">
<!-- <div id="heat-svg-div"></div> -->
<svg class="heat"></svg>
</div>
</div>
</center>
<hr/>
<!-- <div id="mobileproximity-svg-div"></div> -->
<!-- <svg class="mobileSensorProximity VASTMC2"></svg> -->
<center>
<div class="card" style="width: 1264px; height: 850px;">
<span class="mobile-sensor-proximity-chart-header"> <h5 class="card-header">Mobile Sensor Proximity </h5> </span>
<div class="card-body">
<!-- <svg class="mobileSensorProximity"></svg> -->
<div id="mobileproximity-svg-div"></div>
</div>
</div>
</center>
</body>
<script src="src/mobileSensorProximity.js"></script>
<script src="src/sensorProximity.js"></script>
<script src="src/lineChart.js"></script>
<script src="src/barChart.js"></script>
<script src="src/mobileSensorTrajectories.js"></script>
<script src="src/circularHeatChart.js"></script>
<script src="src/index.js"></script>
</html>