-
Notifications
You must be signed in to change notification settings - Fork 7
/
about.html
executable file
·669 lines (627 loc) · 39.8 KB
/
about.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
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>AgroSphere - About Page</title>
<link rel="icon" href="http://diylogodesigns.com/blog/wp-content/uploads/2016/06/Nasa-Logo-Transparent-Background-download.png">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:600,700,600italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:600,100,300,700' rel='stylesheet' type='text/css'>
<!-- Theme CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/WebsiteStyle.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">AgroSphere</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">Introduction</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Documentation</a>
</li>
<li>
<a class="page-scroll" href="#timeline">Timeline</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#outreach">Outreach</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<img src="images/nasalogo.png" class="img-responsive img-centered" alt="" height="100" width="100"><br>
<div class="intro-heading" style="font:32px;">AgroSphere</div>
<a style="margin-bottom:30px;" href="https://worldwind.arc.nasa.gov/agrosphere/" id="startbutton" class="btn btn-xl">Start Application</a><br>
<a style="margin-bottom:30px;" href="https://github.com/NASAWorldWindResearch/AgroSphere" id="startbutton" class="btn btn-xl" target="_blank">Source Code</a><br>
<a style="margin-bottom:30px;" href="#services" class="page-scroll btn btn-xl">Tell Me More</a><br>
</div>
</div>
</header>
<!-- Intro Section -->
<section id="services">
<div class="container">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Introduction</h2>
<h3 class="section-subheading text-muted">This is our video tutorial for AgroSphere. More information can also be found in the tutorial section of the app, or on our Github page.</h3>
<iframe width="560" height="315" class="extraBigMargins" src="https://www.youtube.com/embed/h66dFV3Qu5E" frameborder="0" allowfullscreen></iframe>
<h2 class="section-heading extraSmallMargins">Mobile Demo</h2>
<h3 class="section-subheading text-muted">This is AgroSphere running on mobile. All of the functionalities of the app are available in your hands!</h3>
<iframe width="560" height="315" class="extraBigMargins" src="https://www.youtube.com/embed/6Js36zha2Ps" frameborder="0" allowfullscreen></iframe>
<h2 class="section-heading" class="extraSmallMargins">Lesson Plan</h2>
<h3 class="section-subheading text-muted extraSmallMargins">For a guide on how this app may be used in the classroom, click the button below. This lesson plan focuses on the use of the app in a larger unit on climate change. It is based on 90-minute classes.</h3>
<a href="AgroSphere_LessonPlan.pdf" id="startbutton" class="btn btn-xl" target="_blank">Link to the Lesson Plan</a><br><br><br>
<h2 class="section-heading" class="extraSmallMargins">Abstract</h2>
<h3 class="section-subheading text-muted extraSmallMargins">The AgroSphere team wrote a project abstract, which further explains the functionalities and process of making it.</h3>
<a href="AgroSphere_Abstract.docx" id="startbutton" class="btn btn-xl">Download Abstract</a>
</div>
</div>
</section>
<!-- Documentation Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Documentation</h2>
<h3 class="section-subheading text-muted">Examples of our application in action.</h3>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-12 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/documentation/geoComp.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Geo-Comparison Data</h4>
<p class="text-muted">Interactive Global Agriculture Data</p>
</div>
</div>
<div class="col-md-3 col-xs-12 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/documentation/graph.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Historical Country and Weather Data</h4>
<p class="text-muted">Crops, Livestock, Pesticides, Emissions, and more</p>
</div>
</div>
<div class="col-md-3 col-xs-12 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/documentation/wms.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Global Image Layers</h4>
<p class="text-muted">And Finding Current Weather</p>
</div>
</div>
<div class="col-md-3 col-xs-12 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/flowcharts/geocomparison.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Data Workflow</h4>
<p class="text-muted">And Technologies Used</p>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section id="timeline">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Timeline</h2>
<h3 class="section-subheading text-muted">Timeline for our project.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="images/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>JUNE 5, 2017</h4>
<h4 class="subheading">First Day</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The World Wind 2017 summer interns arrived at the orientation! They familiarized themselves with the WorldWind SDK and began exploring ideas for a project.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="images/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>JUNE 10, 2017</h4>
<h4 class="subheading">Brainstorming for the Application</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The interns came up with the idea of researching the effect of climate on agriculture!</p>
<p class="text-muted">They worked on wireframing and prototyping possible scenarios for the app. Additionally, they researched what types of data would be accurate indicators of climate change and its effects.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="images/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>JUNE 2017</h4>
<h4 class="subheading">Scavenging for Data</h4>
</div>
<div class="timeline-body">
<p class="text-muted">They began researching for relevant datasets and making data visible on the 3D globe using the Web World Wind SDK. Development on the project began during this period.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="images/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2017</h4>
<h4 class="subheading">Transition to Development</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The web app was finessed: the interns added features such as geocomparison, opacity/time sliders, country-specific data, and improved aesthetics. This period was mostly focused on adding functionality to the project.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="images/about/5.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>August 7, 2017</h4>
<h4 class="subheading">Deployment</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The interns deployed the finished project and its informational website online, and submitted the project to the NASA Europa Challenge.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">The Team</h2>
<h3 class="section-subheading text-muted">NASA WorldWind 2017 Interns</h3>
</div>
</div>
<div class="row">
<div class="col-md-5ths col-ss-12">
<div class="team-member">
<a href="https://github.com/johnnguyen1997" target="_blank"><img src="images/team/john.JPG" class="img-responsive img-circle" alt=""></a>
<h4>John Nguyen</h4>
<p class="text-muted">University of Queensland</p>
<ul class="list-inline social-buttons">
<li><a href="https://github.com/johnnguyen1997" target="_blank"><i class="fa fa-github"></i></a>
</li>
<li><a href="https://www.linkedin.com/in/john-nguyen-38478bb6/" target="_blank"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-md-5ths col-ss-12">
<div class="team-member">
<a href="https://github.com/mdtang" target="_blank"><img src="images/team/mingda.jpg" class="img-responsive img-circle" alt=""></a>
<h4>Mingda Tang</h4>
<p class="text-muted">University of Michigan</p>
<ul class="list-inline social-buttons">
<li><a href="https://github.com/mdtang" target="_blank"><i class="fa fa-github"></i></a>
</li>
<li><a href="https://mdtang.github.io/" target="_blank"><i class="fa fa-globe"></i></a>
</li>
<li><a href="https://www.linkedin.com/in/mdtang/" target="_blank"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-md-5ths col-ss-12">
<div class="team-member">
<a href="https://github.com/staceychen" target="_blank"><img src="images/team/stacey.JPG" class="img-responsive img-circle" alt=""></a>
<h4>Stacey Chen</h4>
<p class="text-muted">Saratoga High School</p>
<ul class="list-inline social-buttons">
<li><a href="https://github.com/staceychen" target="_blank"><i class="fa fa-github"></i></a>
</li>
<li><a href="https://www.linkedin.com/in/stacey-chen-419149142" target="_blank"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-md-5ths col-ss-12">
<div class="team-member">
<a href="https://github.com/atreya-iyer" target="_blank"><img src="images/team/atreya.jpg" class="img-responsive img-circle" alt=""></a>
<h4>Atreya Iyer</h4>
<p class="text-muted">Menlo School</p>
<ul class="list-inline social-buttons">
<li><a href="https://github.com/atreya-iyer" target="_blank"><i class="fa fa-github"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-md-5ths col-ss-12">
<div class="team-member">
<a href="https://github.com/nar5093" target="_blank"><img src="images/team/nick.jpg" class="img-responsive img-circle" alt=""></a>
<h4>Nick Rubel</h4>
<p class="text-muted">University of Texas - Arlington</p>
<ul class="list-inline social-buttons">
<li><a href="https://github.com/nar5093" target="_blank"><i class="fa fa-github"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Outreach Section -->
<section id = "outreach">
<aside class="clients">
<div class="container">
<div class="row">
<h2 class="section-heading" style="text-align:center;">Outreach</h2>
<div class="col-xs-4">
<a href="https://www.nasa.gov/" target="_blank">
<img src="images/logos/NASA_logo.png" class="img-responsive img-centered" alt="" height="220" width="220">
</a>
</div>
<div class="col-xs-4">
<a href="http://star-web.cosam.calpoly.edu/" target="_blank">
<img src="images/logos/STAR_official.png" class="img-responsive img-centered" alt="" height="280" width="280">
</a>
</div>
<div class="col-xs-4">
<a href="https://www.umich.edu/" target="_blank">
<img src="images/logos/Michigan.png" class="img-responsive img-centered" alt="" height="280" width="280">
</a>
</div>
<div class="col-md-6 col-xs-12">
<a href="https://www.uq.edu.au/" target="_blank">
<img src="images/logos/University-of-Queensland.png" class="img-responsive img-centered" alt="" height="330" width="330">
</a>
</div>
<div class="col-md-6 col-xs-12">
<a href="http://www.upenn.edu/" target="_blank">
<img src="images/logos/UPenn_logo.png" class="img-responsive img-centered" alt="" height="280" width="280">
</a>
</div>
<div class="col-xs-7 col-xs-12">
<a href="https://www.saratogahigh.org/" target="_blank">
<img src="images/logos/saratoga.gif" style="width:60%" class="img-responsive img-centered" alt="" height="200" width="150">
</a>
</div>
<div class="col-xs-4 col-xs-12">
<a href="https://www.menloschool.org/" target="_blank">
<img src="images/logos/menlo.jpeg" class="img-responsive img-centered" alt="" height="250" width="250">
</a>
</div>
</div>
</div>
</aside>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading alignCenter" id="whitefont">We discussed our web app and work-in-progress with Martin C. Heller
from the Center for Sustainable Systems at University of Michigan. He offered us critiques from a researcher's
point of view. One suggestion was to add more data that would be more relevant for a researcher's point of view.
We also tested our app on NASA interns from the STEM Teacher and Researcher (STAR) program to
receive suggestions from an educational perspective.</h3>
<h3 class="section-subheading alignCenter" id="whitefont">In addition, a STAR Teacher suggested a way to use the app
in the classroom. An alumni from the University of Pennsylvania commented on the app's user interface design and
changes were made accordingly. Finally, the app was tested with members of the educational institutes that each
intern was affiliated with.</h3>
</div>
</div>
<div class="row">
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © NASA WorldWind 2017</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><a href="https://worldwind.arc.nasa.gov/" target="_blank"><i class="fa fa-info-circle"></i></a>
</li>
<li><a href="https://github.com/NASAWorldWindResearch/AgroSphere" target="_blank"><i class="fa fa-github"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Documentation Modals -->
<!-- Documentation Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h3>Geo-Comparison Data</h3>
<p>The Geo-Comparison Buttons allows you to visualise agricultural data on the
globe where you can compare countries' crop production data side by side.
To use, first set the desired year that you want to be compared using the
slider. Next is to select what crop you want to view. You can do this by
either scrolling through the selections or typing in the desired crop
in the search bar. Finally, click on the Geo-Comparison button and
the globe will be colourized accordingly.</p>
<img src="images/gif/geoComp1.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<img src="images/gif/geoComp2.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<h5>What the colours mean</h5>
<p>There are 2 main colours with shades in between.
These two colours are red and green. Red represents a low production value
of a particular crop at a particular year. Green represents a high production
value for that particular crop at a particular year for that particular country.
Yellow and orange represents above average and below average productions
respectively. No colour means no data is avaliable. Black color means that the
colored country is the sole producer of the crop you have chosen.</p>
<h6>Technical Details</h6>
<p>The colours are generated based on a country's z-score. For instance a
country that produces a crop that is siginficantly above the average will
have a sharp green. While a country that only does this at a slightly above
average production may get a yellow or light green colour. This also applies
to the colour red in which the country produces a crop siginficantly below
average in comparison to other countries. As a result, the colours are based
on a country's value in comparison to other countries. To view actual
production amount, you need to zoom in to the flags.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Tab</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Documentation Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h3>Historical Country and Weather Data</h3>
<p>The main feature of AgroSphere is the ability to view agricultural data by
country using an interactive globe. To view a country's data, first select
a flag. A menu should appear listing the types of data that are avaliable.
Select a data type, for example the agriculture production dataset. A collection of
buttons and input text areas should then appear. A similar event will happen
when clicking on the yellow pins which represent weather stations.</p>
<img src="images/gif/countryFlags.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<h5>Searching through the data</h5>
<p>The data can be filtered by typing in the particular desired field. It can
also be filtered by sorting by name (alphabetical order) or by average
(descending order). Sorting by average means the field with the largest average
production over the avaliable years.</p>
<img src="images/gif/searchGraph.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<h5>Plotting graphs</h5>
<p>There are 3 buttons associated with plotting: plot, combine and add.</p>
<p>'Plot Graph' is plotting the data on the given active tab.</p>
<img src="images/gif/plotGraph.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<p>'Add Graph' places the graph in the data-graphs tabs. This
allows users to view multiple graphs from multiple countries side by side.</p>
<img src="images/gif/addGraph.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<p>'Combine Graph' graphs multiple data sets on the same graph on the same
scale.</p>
<img src="images/gif/combineGraph.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<p>To remove a graph from the plot button, press the hide button that will
appear after plotting. To remove a graph from the data-graphs section,
simply press the remove all graphs button.</p>
<img src="images/gif/resizeGraph.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<p>Graphs resize automatically as the user interface is resized.</p>
<h5>Plotting specified number of datasets</h5>
<p>The Graph # of X button allows the user to see the top number of fields on
a year by year basis. Additionally the percentange the top X contributes is
also shown. To modify the amount seen, type in the number of fields
wanted. Note that bad-values or the default value is 5. Once a number is chosen, press the graph specified button.</p>
<img src="images/gif/plotStack.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Tab</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Documentation Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h3>Using Web Map Service (WMS) Layers</h3>
<p>The Web Map Service layers we have available allow you to view a global image layer and see how it varies with time.
First, choose a layer that you want to see. Once it has been clicked, a set of options
and controls will appear. First is the opacity slider. To change the opacity
of the layer, simply slide it to the desired value. Next is the associated
legend of the layer if avaliable which tells you the values of the colours.
Next is the time scale. Slide to the desired time that you want to
see the data type. For instance, slide to May 31st, 2001 if you want to see
data at that particular time.</p>
<img src="images/gif/wmsLayer.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<h3>Finding current weather</h3>
<p>The current weather can be found by selecting the Current Weather tab. First
type in the desired city and select the country code. Run the Search Weather
button and the resulting weather details shall be displayed.</p>
<img src="images/gif/searchWeather.gif" class="img-responsive img-centered" alt="" height="280" width="600">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Tab</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Documentation Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h3>Technologies Used</h3>
<div class="extraSmallMargins">
<a class="techlinks" href="https://jquery.com/" target="_blank">JQuery,</a>
<a class="techlinks" href="https://jqueryui.com/" target="_blank">JQuery UI,</a>
<a class="techlinks" href="https://github.com/evanplaice/jquery-csv" target="_blank">JQuery CSV,</a>
<a class="techlinks" href="http://getbootstrap.com/" target="_blank">Bootstrap,</a>
<a class="techlinks" href="https://plot.ly/javascript/" target="_blank">Plotly,</a>
<a class="techlinks" href="https://simplestatistics.org/" target="_blank">Simple-Statistics,</a>
and <a class="techlinks" href="https://github.com/procurios/ResizeSensor" target="_blank">ResizeSensor.</a>
</div>
<h3>Data Sources Used</h3>
<div class="extraSmallMargins">
<a class="techlinks" href="https://fluxnet.fluxdata.org/data/" target="_blank">Climate Data,</a>
<a class="techlinks" href="http://www.fao.org/faostat/en/#data/" target="_blank">Agriculture Data,</a>
<a class="techlinks" href="https://github.com/johan/world.geo.json" target="_blank">GeoJSON Border Data,</a>
and <a class="techlinks" href="https://developers.google.com/public-data/docs/canonical/countries_csv" target="_blank">Country Coordinates.</a>
</div>
<h3>Data Workflow</h3>
<br>
<h4>Geo-Comparison</h4>
<img src="images/flowcharts/geocomparison.png" style="width:80%" class="img-responsive img-centered extraBigMargins" alt="" height="280" width="600">
<br>
<h4>Web Map Service Layers</h4>
<img src="images/flowcharts/wmst.png" style="width:80%" class="img-responsive img-centered extraBigMargins" alt="" height="280" width="600">
<br>
<h4>Stacked Bar Graphs</h4>
<img src="images/flowcharts/stackedbar.png" class="img-responsive img-centered extraBigMargins" alt="" height="280" width="600">
<br>
<h4>Agricultural Data</h4>
<img src="images/flowcharts/agricdata.png" style="width:110%" class="img-responsive img-centered extraBigMargins" alt="" height="280" width="600">
<br>
<h4>Current Weather</h4>
<img src="images/flowcharts/weather.png" style="width:40%" class="img-responsive img-centered extraBigMargins" alt="" height="280" width="600">
<br>
<h4>Data Type Format</h4>
<img src="images/flowcharts/datatypeformat.png" class="img-responsive img-centered extraBigMargins" alt="" height="280" width="600">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Tab</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery-3.2.1.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"></script>
<!-- Theme JavaScript -->
<script src="js/agency.min.js"></script>
</body>
</html>