forked from WorldWindLabs/Quake-Hunter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
500 lines (471 loc) · 26.1 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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html>
<!--@version $Id: Shapefiles.html 3320 2015-07-15 20:53:05Z dcollins $-->
<html lang="en">
<head>
<!--NOTE: Most Web World Wind examples use jquery, Bootstrap and requirejs but those technologies are NOT-->
<!--required by Web World Wind. See SimplestExample.html for an example of using Web World Wind without them.-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--JQuery UI-->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<!--Local Stylesheet-->
<link rel="stylesheet" href="./stylesheet1.css"/>
<!--Perfect Scrollbar CSS-->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.12/css/perfect-scrollbar.min.css"/>
<!--Font Awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Quake Hunter</title>
</head>
<body>
<!--<body style="font-family: 'Helvetica' !important">-->
<ul class="tab"
style="z-index: 999; position: fixed; left: 0; height: 38px; width: 100%; background: rgba(46,74,110,1); overflow: visible">
<li><a class="tablinksLeft logo" onclick="openTabLeft(event, 'how-to')" title="Info"><strong>Quake
Hunter</strong></a></li>
<li>
<a class="tablinksLeft" onclick="openTabLeft(event, 'controls')" title="Controls">
<span class="glyphicon glyphicon-tasks"></span></a>
</li>
<li>
<a class="tablinksLeft" onclick="openTabLeft(event, 'options_div')" title="Globe Options">
<span class="glyphicon glyphicon-globe"></span></a>
</li>
<li>
<a class="tablinksLeft" onclick="openTabLeft(event, 'drawing')" title="Drawing Tools">
<span class="glyphicon glyphicon-pencil"></span></a>
</li>
<li>
<a class="tablinksLeft" id="reset" title="Reset">
<span class="glyphicon glyphicon-repeat"></span></a>
</li>
<li>
<a class="tablinksRight" onclick="openTabRight(event, 'information');"
style="position: fixed; right: 1%; width: 3%;" title="Stats">
<i class="fa fa-info" aria-hidden="true"></i></a>
</li>
<li>
<a class="tablinksRight" onclick="openTabRight(event, 'graphs')" style="position: fixed; right: 4%"
title="Graphs">
<i class="fa fa-bar-chart" aria-hidden="true"></i></a>
</li>
</ul>
<div class="container containerFont">
<div class="col-sm-8" id="globe" style="width: 100%; height: 100%; position: fixed; left: 0">
<canvas id="canvasOne" width="1920" height="1080" style="position: fixed; left: 0; width: 100%; height: 100%">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<!--<div class="row">-->
<div id="how-to" class="col-sm-2 tabcontentLeft leftTabPadding"
style="font-size: 12px !important; width: 25% !important;background: rgba(46,74,110,0.8)">
<br>
<div style="text-align: center">
<div><img src="./images/nasaWhite.png" style="width: 40%;height: 40%; padding-right: 3.5%">
<img src="./images/usgs-logo.svg" style="width: 45%;height: 45%; padding-left: 3.5%"></div>
</div>
<hr>
<p>
<h3 style="text-align:center;font-size: 20px !important;"><em><strong>Quake Hunter v0.3.2.2</strong></em></h3>
<p style="text-align: center; font-size: 10px;">
Developed at NASA Ames Research Center
<br> with the WorldWind Development Team.
<br> Powered by the USGS Earthquake API.
</p>
<p style="text-align: justify">
This is an earthquake visualization app built in NASA Web World Wind with support from the
<a href="http://geography.wr.usgs.gov/ICES/" style="color: #FFFFFF"> USGS Innovation
Center for Earth Science</a>. Given the wealth of USGS information on historic earthquakes, we designed
and built an app that can aggregate and display nearly 100 years of seismic data dynamically.
</p>
<p style="text-align: justify">
Quake Hunter is a valuable tool for understanding how tectonic plates interact with one another. Quake
Hunter visualizes any range of earthquake data from the USGS, in 3D, either on the whole planet or in a
user-defined geographically constrained area.
With powerful querying tools, this application provids exactly what the user wants to see in terms of
earthquake event data around the world.
</p>
<hr>
<h5><strong>Querying Earthquakes:</strong></h5>
<ul style="text-align: justify;padding-left:5%;">
<li style="padding-top: 8px">Tour the events using the bottom two arrow buttons. Change how you tour the
earthquakes, either by magnitude or time by selecting the color mode in the controls menu.
</li>
<li style="padding-top: 8px">Use the 'from' and 'to' calendar fill-ins to change the date range of the
earthquakes visualized (this can be done all the way back to 1925).
</li>
<li style="padding-top: 8px">The magnitude slider allows you to filter how large the earthquakes being
visualized are.
</li>
<li style="padding-top: 8px">Use the 'draw' function to draw rectangles or circles to geographically
constrain the query on earthquake events.
</li>
<li style="padding-top: 8px">Search a radius of a specific location. Try Kodiak, Alaska! (57.7900,
-152.4072)
</li>
<li style="padding-top: 8px">The app should automatically generate a visualization of earthquake event
hypocenters.
</li>
<li style="padding-top: 8px">The reset button reverts the earthquakes displayed to the initial query.
</li>
<li style="padding-top: 8px">Try a geographically constrained query along a subduction zone or fault line
(These are represented by the brown lines).
</li>
<li style="padding-top: 8px">Set a specific sector of the planet to query earthquakes within.</li>
<li style="padding-top: 8px">Visualize a longer period of earthquakes (>20 years) and within the magnitude
range M3-10.
</li>
<li style="padding-top: 8px">Use the canvas controls (in the bottom left-hand corner) to change the angle of
viewing. This should provide a great visualization of how the tectonic plates interact with one another,
whether in a subduction zone, transform fault,
rift zone, or a hotspot.
</li>
<li style="padding-top: 8px">Browse through the statistics of your query in the right hand side information
and graphs panel. Magnitude and depth histograms, as well an earthquake activity time series graphs are
all automatically generated from your query.
</li>
<li style="padding-top: 8px">You can download these graphs by clicking the camera button in the upper right
hand corner of the graph plot area.
</li>
</ul>
<br>
<h5><strong>Preformance Tips:</strong></h5>
<ul style="text-align: justify; padding-left: 5%;">
<li style="padding-top: 8px;">
If the earthquakes are not loading immediately after you enter search parameters, it may be loading.
Look in the "Globe Options" to see if the "earthquakes" layer is loading. If the search involves in
excess of 5000 earthquakes, the load may take a while.
</li>
<li style="padding-top: 8px;">
If you continually run into performance issues, consider using Google Chrome or Apple Safari to run the
web app.
</li>
<li style="padding-top: 8px;">
Try removing the tectonic plate layer for improved browsing speeds in the app.
</li>
<li style="padding-top: 8px;">
Consider limiting the earthquake event search to less than 2000 events for quicker load times
</li>
<li style="padding-top: 8px;">
For larger queries, the performance greatly improves if searches are geographically constrained. To do
this, use the drawing tool to limit where earthquakes are shown.
</li>
</ul>
<br>
<h5><strong>More:</strong></h5>
<p>
Please visit our sister apps also built on NASA World Wind!
</p>
<ul style="text-align: left; padding-left: 5%;">
<li style="padding-top: 8px;"><a href="http://worldwind.arc.nasa.gov/spacebirds" style="color: #FFFFFF">SpaceBirds:
a satellite tracker and orbit visualizer</a>
</li>
<li style="padding-top: 8px;"><a href="http://worldwind.arc.nasa.gov/worldweather" style="color: #FFFFFF">WorldWeather:
a GIS data aggregator and visualization tool</a>
</li>
</ul>
<hr>
<h5 style="text-align: center">
<a href="https://github.com/NASAWorldWindResearch/Quake-Hunter" style="color: #FFFFFF; padding-right: 2%">Source</a>
<a href="https://nasaworldwind.github.io/" style="color: #FFFFFF; padding-left: 2%">NASA World Wind</a>
</h5>
<h5 style="text-align:center; font-size: 10px;"><strong>App Developers:</strong>
<br>
<a href="https://github.com/Gagaus" style="color: #FFFFFF">Gabriel Militão</a>
& <a href="https://github.com/bench4ng" style="color: #FFFFFF">Benjamin Chang</a>
</h5>
<br>
<br>
</div>
<div id="controls" class="col-sm-2 tabcontentLeft leftTabPadding" style="font-size: 12px !important;">
<div class="smallRule">
<h4 style="text-align: center ">Search Options:</h4>
</div>
<h5 style="text-align: center;"><strong>Date Range:</strong></h5>
<div class="form-group">
<div class="row">
<div class="col-md-2 push-md-10">
<h5>From:</h5></div>
<div class="col-md-10 pull-md-2">
<input class="form-control" id="fromdatepicker" style="color:#000000; position: relative;
display: block">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 push-md-10">
<h5>To:</h5></div>
<div class="col-md-10 pull-md-2">
<input class="form-control" id="todatepicker" style="color:#000000; position: relative;
display: block">
</div>
</div>
</div>
<div class="list-group" id="annotationList" style="width: 100%; text-align: center;">
<div class="input-group" id="annotationBox" style="width: 100%;text-align: center;align-content: center;">
<div class="smallRule">
<h5><strong>Magnitude Range</strong></h5>
<div id="magSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
style="width: 100%;">
<div class="ui-slider-range ui-widget-header ui-corner-all"
style="left: 61.4286%; width: 38.5714%;"></div>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"
style="left: 75.7143%;"></span>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"
style="left: 100%;"></span>
<div class="ui-slider-range ui-widget-header ui-corner-all"
style="width: 24.2857%; left: 75.7143%;"></div>
</div>
<h5><span id="magSliderValue">5.3 to 7 Richter</span></h5>
</div>
<div class="smallRule">
<h5><strong>Depth Range</strong></h5>
<div id="depthSlider"
class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
style="width: 100%;">
<div class="ui-slider-range ui-widget-header ui-corner-all"
style="left: 61.4286%; width: 38.5714%;"></div>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"
style="left: 75.7143%;"></span>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"
style="left: 100%;"></span>
<div class="ui-slider-range ui-widget-header ui-corner-all"
style="width: 24.2857%; left: 75.7143%;"></div>
</div>
<h5><span id="depthSliderValue">0 to 1000 KM</span></h5>
</div>
<div style="color: #FFFFFF;">
<h5><strong>Surface Opacity</strong></h5>
<div id="opacitySlider"
class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
style="width: 100%;">
</div>
<h5><span id="opacitySliderValue">% opacity</span></h5>
</div>
</div>
<h5 style="text-align: left;">Color Mode:</h5>
<div class="form-group">
<select class="form-control" name="coloringMode" id="coloringMode" data-role="slider"
style="color: #000000">
<option value="time">Time</option>
<option value="magnitude">Magnitude</option>
</select>
</div>
<h5 style="text-align: left">Limit Displayed Events</h5>
<div class="input-group">
<input id="limit" maxlength="30" type="number" class="form-control" placeholder="e.g. '1000'">
<span class="input-group-btn">
<button id="limitSet" onclick="limitSet" class="btn btn-primary" type="button"><span
class="glyphicon glyphicon-eye-close"></span></button>
</span>
</div>
<br>
<br>
</div>
</div>
<div id="options_div" class="col-sm-2 tabcontentLeft leftTabPadding"
style="font-size: 12px !important; padding-bottom: 5% !important;">
<div class="smallRule">
<h4 style="text-align: center">Globe Options:</h4>
</div>
<h5>Projection</h5>
<div class="dropdown" id="projectionDropdown" style="height: 10px">
</div>
<hr>
<h5>Layers</h5>
<div class="list-group" id="layerList">
</div>
<hr>
<h5>Destination</h5>
<div class="input-group" id="searchBox">
<input id="searchText" type="text" class="form-control" placeholder="GoTo">
<span class="input-group-btn">
<button id="searchButton" class="btn btn-primary" type="button"><span
class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
<div id="drawing" class="col-sm-2 tabcontentLeft leftTabPadding" style="font-size: 12px !important;">
<div class="smallRule">
<h4 style="text-align: center">Drawing Mode:</h4>
</div>
<br>
<div class="form-group">
<select class="form-control" name="drawingSelection" id="drawingSelection" data-role="slider"
style="color: #000000">
<option value="off">Off</option>
<option value="circle">Circle</option>
<option value="rectangle">Rectangle</option>
</select>
</div>
<div>
<h4>How To:</h4>
<p style="text-align: justify;">
To use the drawing mode, choose from the drop down how you would like to select the earthquakes, and
double click on the globe to begin drawing. Double click again to end drawing.
</p>
<p>
To remove the outline of your drawing, go to "Globe Options" and remove the "Drawing" layer.
</p>
<p>
To clear the drawing, click the reset button on the navigation bar.
</p>
</div>
<hr>
<h4>Radius Search:</h4>
<p>
Right click on the globe or fill in.
</p>
<h5 style="text-align: left">Coordinates:</h5>
<div class="form-group">
<input id="coordSearch" onchange="checkNumber(this)" maxlength="30" type="text" class="form-control"
placeholder="e.g. '57.7900, -152.4072'">
</div>
<h5 style="text-align: left">Radius (km):</h5>
<div class="input-group">
<input id="radiusKMSearch" maxlength="30" type="text" class="form-control" placeholder="e.g. '300'">
<span class="input-group-btn">
<button id="searchRadius" class="btn btn-primary" type="button"><span class="glyphicon glyphicon-record" aria-hidden="true"></span></button>
</span>
</div>
<!-- <button id="searchRadius" class="btn btn-primary" type="button">GO!</button> -->
</div>
<div id="graphs" class="col-sm-2 tabcontentRight" style="width: 35% !important;">
<ul class="tab"
style="z-index: 999; position: fixed; width: auto; background: rgba(46,74,110,1); overflow: visible">
<li><a class="tablinksGraphs" onclick="openTabGraphs(event, 'magHistogram')" style="font-size: 16px">Magnitude</a>
</li>
<li><a class="tablinksGraphs" onclick="openTabGraphs(event, 'depthHistogram')"
style="font-size: 16px">Depth</a>
</li>
<li><a class="tablinksGraphs" onclick="openTabGraphs(event, 'TimeSeries')" style="font-size: 16px">Time
Series</a>
</li>
</ul>
<div class="tabcontentGraphs" id="magHistogram" style="display: initial;"></div>
<div class="tabcontentGraphs" id="depthHistogram"></div>
<div class="tabcontentGraphs" id="TimeSeries"></div>
</div>
<div id="information" class="col-sm-2 tabcontentRight" style="width: 25% !important;">
<ul class="tab"
style="z-index: 999; position: fixed; width: auto; background: rgba(46,74,110,1); overflow: visible">
<li><a class="tablinksInfo" onclick="openTabInfo(event, 'api_query_info');"
style="font-size: 16px">Overview</a>
</li>
<li><a class="tablinksInfo" onclick="openTabInfo(event, 'event_info')" style="font-size: 16px">Event</a>
</li>
<li><a class="tablinksInfo" onclick="openTabInfo(event, 'draw_info')" style="font-size: 16px">Drawn</a></li>
</ul>
<div id="api_query_info" class="col-sm-2 tabcontentInfo" style="display: initial">
<h4><strong>Search Summary</strong></h4>
<hr>
<p style="font-size: 12px"><strong>Number of Eathquakes: </strong><span id="eq_count"></span></p>
<p style="font-size: 12px"><strong>Start Date: </strong><span id="minDate"></span></p>
<p style="font-size: 12px"><strong>End Date: </strong><span id="maxDate"></span></p>
<p style="font-size: 12px"><strong>Min Magnitude: </strong><span id="minMagnitude"></span></p>
<p style="font-size: 12px"><strong>Max Magnitude: </strong><span id="maxMagnitude"></span></p>
<p style="font-size: 12px"><strong>Min Depth: </strong><span id="minDepth"></span> km</p>
<p style="font-size: 12px"><strong>Max Depth: </strong><span id="maxDepth"></span> km</p>
</div>
<div id="event_info" class="col-sm-2 tabcontentInfo">
<h4><strong>Earthquake Event Info</strong></h4>
<hr>
<p style="font-size: 12px"><strong>Magnitude: </strong><span id="magnitude"></span></p>
<p style="font-size: 12px"><strong>Location: </strong><span id="location"></span></p>
<p style="font-size: 12px"><strong>Date: </strong><span id="time"></span></p>
<p style="font-size: 12px"><strong>Latitude: </strong><span id="latitude"></span></p>
<p style="font-size: 12px"><strong>Longitude: </strong><span id="longitude"></span></p>
<p style="font-size: 12px"><strong>Depth (km): </strong><span id="depth"></span></p>
</div>
<div id="draw_info" class="col-sm-2 tabcontentInfo">
<h4><strong>Drawn Region Info</strong></h4>
<hr>
<p style="font-size: 12px"><strong>Drawn Min Latitude: </strong><span id="drawnMinLat"></span></p>
<p style="font-size: 12px"><strong>Drawn Max Latitude: </strong><span id="drawnMaxLat"></span></p>
<p style="font-size: 12px"><strong>Drawn Min Longitude: </strong><span id="drawnMinLong"></span></p>
<p style="font-size: 12px"><strong>Drawn Max Longitude: </strong><span id="drawnMaxLong"></span></p>
<hr>
<p style="font-size: 12px"><strong>Origin Latitude: </strong><span id="drawnRLat"></span></p>
<p style="font-size: 12px"><strong>Origin Longitude: </strong><span id="drawnRLong"></span></p>
<p style="font-size: 12px"><strong>Drawn Radius: </strong><span id="drawnRadius"></span></p>
</div>
</div>
<div>
<table id="ageLegendTable" class="tablesorter" style="border: 1px; font-size: 14px; position: fixed;bottom: 1%;right: 15%;width: 20%;">
<tr>
<td style="text-align:center">Magnitude</td>
<td style="text-align:center"><img src="./images/White.svg" width="20"/></td>
<td style="text-align:center"><img src="./images/White.svg" width="30"/></td>
<td style="text-align:center"><img src="./images/White.svg" width="40"/></td>
<td style="text-align:center"><img src="./images/White.svg" width="50"/></td>
</tr>
<tr>
<td style="text-align:center"> </td>
<td style="text-align:center"> 0 - 3</td>
<td style="text-align:center"> 3 - 5</td>
<td style="text-align:center"> 5 - 7</td>
<td style="text-align:center"> 7 - 10</td>
</tr>
<tr>
<td style="text-align:center">Age</td>
<td style="text-align:center; border:1px solid black" bgcolor="#FF0000"></td>
<td style="text-align:center; border:1px solid black" bgcolor="#FFA500"></td>
<td style="text-align:center; border:1px solid black" bgcolor="#FFFF00"></td>
<td style="text-align:center; border:1px solid black" bgcolor="#00FF00"></td>
</tr>
<tr>
<td style="text-align:center"> </td>
<td style="text-align:center"><span id="agerange0"> < 10% </span></td>
<td style="text-align:center"><span id="agerange1"> < 30% </span></td>
<td style="text-align:center"><span id="agerange2"> < 60% </span></td>
<td style="text-align:center"><span id="agerange3"> 100% </span></td>
<!-- <td style="text-align:center"><span id="agerange4"> Day </span></td> -->
</tr>
</table>
<table id="MagnitudeLegendTable" class="tablesorter" style="border: 1px; font-size: 14px; position: fixed;bottom: 1%;right: 15%;width: 15%; display: none">
<tr>
<td style="text-align:center">Magnitude</td>
<td style="text-align:center"><img src="./images/Green.svg" width="20"/></td>
<td style="text-align:center"><img src="./images/Yellow.svg" width="30"/></td>
<td style="text-align:center"><img src="./images/Orange.svg" width="40"/></td>
<td style="text-align:center"><img src="./images/Red.svg" width="50"/></td>
</tr>
<tr>
<td style="text-align:center"> </td>
<td style="text-align:center"> 0 - 3</td>
<td style="text-align:center"> 3 - 5</td>
<td style="text-align:center"> 5 - 7</td>
<td style="text-align:center"> 7 - 10</td>
</tr>
</table>
</div>
<div text align="center">
<button id="forward" class="btn btn-default tourButtonsUP"
onclick="openRightTabTour(event, 'information');openEventInfoTab(event)" type="button"><span
class="glyphicon glyphicon-menu-right"></span></button>
<button id="backward" class="btn btn-default tourButtonsDOWN"
onclick="openRightTabTour(event, 'information');openEventInfoTab(event)" type="button"><span
class="glyphicon glyphicon-menu-left"></span></button>
</div>
</div>
<!--Spin.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<!--JQuery and JQuery UI-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!--Perfect Scrollbar-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.12/js/perfect-scrollbar.jquery.js"></script>
<!--Plotly.js-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!--UI Controls-->
<script type="text/javascript" src="ui_controls.js"></script>
<!--Require.js and main app-->
<script data-main="Control" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
</body>
</html>