-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
297 lines (266 loc) · 15 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AgroSphere - NASA Web World Wind</title>
<link rel="icon" href="http://diylogodesigns.com/blog/wp-content/uploads/2016/06/Nasa-Logo-Transparent-Background-download.png">
<!--John's Plan -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!--Bootstrap JS-->
<script src="js/bootstrap.min.js"></script>
<!--Plotly-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!--Simple Statistics-->
<script src="https://unpkg.com/simple-statistics@4.1.0/dist/simple-statistics.min.js"></script>
<!--RequireJS-->
<script>
window.require = {
waitSeconds: 60
}
</script>
<script data-main="index" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
<!-- JS UI -->
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/78d4dc19c9.js"></script>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin|PT+Sans" rel="stylesheet">
</head>
<body>
<!-- loading screen -->
<figure>
<div id="loading_modal">
<img src="images/nasa.gif" />
<figcaption>Welcome to AgroSphere.<br>Loading...</figcaption>
</div>
</figure>
<!-- background image -->
<div class="fullscreen-bg">
<video loop muted autoplay poster="video/videoframe.png" class="fullscreen-bg__video">
<source src="video/milkyway.mp4" type="video/mp4">
</video>
</div>
<img id="nasalogo" src="images/nasalogo.png" data-toggle="modal" data-target="#appinfomodal">
<!-- Tutorial Modal -->
<div id="appinfomodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Application Information Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Application Information</h4>
</div>
<div class="modal-body">
<img id="info-img" src="images/nasalogo.png">
<p>This app is designed and developed by the 2017 NASA Web World Wind Intern Team at NASA Ames Research Center, which consists of
<b><a class="smallerfontsize" href="https://github.com/johnnguyen1997" target="_blank">John Nguyen,</a>
<a class="smallerfontsize" href="https://github.com/mdtang" target="_blank">Mingda Tang,</a>
<a class="smallerfontsize" href="https://github.com/staceychen" target="_blank">Stacey Chen,</a>
<a class="smallerfontsize" href="https://github.com/atreya-iyer" target="_blank">Atreya Iyer,</a>
and <a class="smallerfontsize" href="https://github.com/nar5093" target="_blank">Nick Rubel.</a></b>
<p>Link to our website: <a target="_blank" href="https://worldwind.arc.nasa.gov/agrosphere/about.html"><b>AgroSphere</b></a></p>
<p>Rights of country agriculture data goes to Food and Agriculture Organization of United Nations: <a target="_blank" href="http://www.fao.org/home/en/"><b>Source</b></a></p>
<p>Rights of atmosphere data goes to FluxNet: <a target="_blank" href="https://fluxnet.ornl.gov/"><b>Source</b></a></p>
<p>Rights of country border coordinates goes to Johan Sundström: <a target="_blank" href="https://github.com/johan/world.geo.json"><b>Source</b></a></p>
<p>Rights of country coordinates goes to Google Developers: <a target="_blank" href="https://developers.google.com/public-data/docs/canonical/countries_csv"><b>Source</b></a></p>
<p>Rights of background video goes to J Studio: <a target="_blank" href="https://www.youtube.com/channel/UCFSbaGR5uMeNX7kWAwdhUTg"><b>Source</b></a></p>
<p>Rights of background audio goes to Kishan Sheth: <a target="_blank" href="https://www.youtube.com/channel/UC5CxWJRuyID16s_XwADKI4A"><b>Source</b></a></p>
<p>Rights of flag images goes to GoSquared: <a target="_blank" href="https://github.com/gosquared/flags"><b>Source</b></a></p>
<p>Application Github Link: <a target="_blank" href="https://github.com/WorldWind-2017/AgroSphere" class="fa fa-github" id="github"></a></p>
<p>NASA World Wind: <a target="_blank" href="https://worldwind.arc.nasa.gov/"><b>World Wind</b></a></p>
<br>
<h5 class="fontsize"><b>Application Description</b></h5>
<p>NASA World Wind is a free, open-source API that provides the tools to create interactive visualizations of Earth in 4D. At Ames Research Center, the NASA WorldWind 2017 Intern team has designed an educational web application that visualizes
the effects of climate change on agriculture using a large collection of global agriculture and climate data and the Web World Wind Source Development Kit (SDK). </p>
<p>The team utilized technologies including HTML5, CSS, JavaScript, and jQuery to develop the application, incorporating and analyzing spatial data for agriculture and atmosphere. Data in various formats are organized, analyzed and visualized
on the globe. </p>
<p>This web app is intended for use in classrooms by teachers and students as well as citizens of the world. Children and adults alike will be able to learn about climate issues by visually experiencing the data according to their interests.
Users will learn about the effects of weather over time on agriculture, the impact to national economies, and much more.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="tutorial" data-toggle="modal" data-target="#tutorialmodal">Tutorial</button>
<!-- Tutorial Modal -->
<div id="tutorialmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Tutorial Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Application Tutorial</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/h66dFV3Qu5E" frameborder="0" allowfullscreen></iframe>
<div id="carousel-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item">
<img class="img-responsive" src="images/gif/plotGraph.gif" alt="...">
<div class="carousel-caption">
<p>You can plot individual graphs of datasets, and hide them.</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/gif/resizeGraph.gif" alt="...">
<div class="carousel-caption">
<p>Graphs resize automatically when the user interface is resized.</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/gif/combineGraph.gif" alt="...">
<div class="carousel-caption">
<p>'Add Graph' places this graph below existing graphs in the Data Graphs tab. 'Combine Graph' places this graph's points inside of all existing graphs in the Data Graphs tab.</p>
</div>
</div>
<div class="item active">
<img class="img-responsive" src="images/gif/geoComp1.gif" alt="...">
<div class="carousel-caption">
<p>Search for crop Geo-Comparison data and toggle the layers. Use time slider to control the year to be displayed. The legend is based on standard deviations and the z-score. The greener or redder the country color, the higher or lower
the crop production is for that country compared to the average of all of the available countries' production.
</p>
</div>
</div>
<div class="item ">
<img class="img-responsive" src="images/gif/geoComp2.gif" alt="...">
<div class="carousel-caption">
<p>Zoom into a country to view the specified amount of production in tons. Right click and hold to drag and tilt the globe.
</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/gif/searchWeather.gif" alt="...">
<div class="carousel-caption">
<p>Find current weather of a city, including temperature, pressure, humidity, sunrise, sunset, and etc.</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/gif/projections.gif" alt="...">
<div class="carousel-caption">
<p>Change projection type and use the search button to specific cities around the globe. Turn on the music with audio control. </p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/gif/draggable.gif" alt="...">
<div class="carousel-caption">
<p>The user interface is draggable, scrollable, and resizable vertically, horizontally, and diagonally.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- User Interface -->
<div class="col-xs-3 container">
<div class="tabs-left draggable">
<ul class="nav nav-tabs">
<li><a href="#layers" data-toggle="tab" data-tooltip="Available Layers" class="togglelayers"><span class="fa fa-map"></span></a></li>
<li><a href="#country" data-toggle="tab" data-tooltip="Country Details" class="togglecountry"><span class="glyphicon glyphicon-flag"></span></a></li>
<li><a href="#station" data-toggle="tab" data-tooltip="Weather Station Details" class="togglestation"><span class="glyphicon glyphicon-cloud"></span></a></li>
<li><a href="#graphs" data-toggle="tab" data-tooltip="Data Graphs" class="togglegraphs"><span class="fa fa-area-chart"></span></a></li>
<li><a href="#wms" data-toggle="tab" data-tooltip="Image Layers" class="togglewms"><span class="glyphicon glyphicon-globe"></span></a></li>
<li><a href="#comp" data-toggle="tab" data-tooltip="Geo-Comparison Data" class="togglecomp"><span class="glyphicon glyphicon-briefcase"></span></a></li>
<li><a href="#weather" data-toggle="tab" data-tooltip="Current Weather" class="toggleweather"><span class="fa fa-sun-o"></span></a></li>
<li><a href="#view" data-toggle="tab" data-tooltip="View Options" class="toggleview"><span class="glyphicon glyphicon-eye-open"></span></a></li>
</ul>
<div class="tab-content resizable">
<div class="tab-pane" id="layers">
<h4>Available Layers</h4>
<div class="list-group" id="layerList"></div>
</div>
<div class="tab-pane" id="wms">
<h4>Image Layers</h4></div>
<div class="tab-pane" id="country">
<h4>Country Details</h4>
<p>Please click on a flag to see data specific to a country or territory.</p>
<button class="btn-info"><a href="http://www.fao.org/faostat/en/#data/" target="_blank">Download Raw Agriculture Data</a></button>
</div>
<div class="tab-pane" id="station">
<h4>Weather Station Details</h4>
<p>Please click on a pin to see data specific to the weather station.</p>
<button class="btn-info"><a href="https://fluxnet.fluxdata.org/data/" target="_blank">Download Raw Atmosphere Data (FluxNet Account Required)</a></button>
</div>
<div class="tab-pane" id="graphs">
<h4>Data Graphs</h4>
<div id="almightyGraph">
<div id="multiGraph"></div>
<div id="manyGraph"></div>
</div>
</div>
<div class="tab-pane" id="comp">
<h4>Geo-Comparison Data (Amount of Crops Produced By Country)</h4>
<div id="legendtext">
<div>Note: The color scheme is based on other countries' data, so there is no numeric data. To clarify, for example, if USA has 5 and is the average, its color would be yellow. If China has 8, its color would be green.</div>
<br>
</div>
<div id="colour-legend">
</div>
<div id="travelArea">
</div>
</div>
<div class="tab-pane" id="weather">
<h4>Current Weather</h4>
</div>
<div class="tab-pane" id="view">
<h4>View Options</h4>
<h5>Projections</h5>
<div class="dropdown" id="projectionDropdown"></div>
<h5>Location Search</h5>
<div class="input-group" id="searchBox">
<input type="text" class="form-control" placeholder="GoTo" id="searchText" />
<span class="input-group-btn">
<button id="searchButton" class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<br>
<div>
<label for="stars-simulation"><h5>Simulate Stars!</h5></label>
<input id="stars-simulation" type="checkbox" />
</div>
<!-- audio -->
<h5>Audio Control</h5>
<audio controls loop>
<source src="audio/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<!-- /tab-content -->
</div>
<!-- /tabbable -->
</div>
<!-- /col -->
<!-- Geo-Comparison Legend -->
<img class="draggable" id="legend" src="./images/legend.png">
<!-- Web World Wind Globe-->
<div class="col-xs-9" id="globe">
<canvas id="canvasOne" width="1920" height="1080">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>