-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
650 lines (531 loc) · 38 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
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
<!DOCTYPE html>
<html>
<title>NatCap Viz</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="images/natcap.jpg" style="width:45%;" class="w3-round"><br><br>
<h4><b>NatCap Viz</b></h4>
<!--<p class="w3-text-grey">
<p style="font-style: italic; font-color: grey;">"Men build too many walls and not enough bridges."</p>
Isaac Newton.</p>-->
<p class="w3-text-grey">Here, you will find examples and resources to facilitate synthetizing, visualizing and communicating Ecosystem Services Data</p>
</div>
<div class="w3-bar-block">
<a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-text-teal"><i class="fa fa-th-large fa-fw w3-margin-right"></i>INSPIRATION</a>
<a href="#viewerTemp" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-desktop fa-fw w3-margin-right"></i>VIEWER TEMPLATE</a>
<a href="#toolbox" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-clone fa-fw w3-margin-right"></i>RESOURCES</a>
<!--<a href="#viewerTemp" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>VIEWER TEMPLATE</a>-->
</div>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<header id="portfolio">
<span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
<div class="w3-container">
<h1><b>Natural Capital Data Viz</b></h1>
<div class="w3-section w3-bottombar w3-padding-16">
<span class="w3-margin-right">Filter:</span>
<button class="w3-button w3-black" onclick="filterSelection('all')">ALL</button>
<!-- button class="w3-button w3-white" onclick="filterSelection('natcaps')"><i class="fa fa-diamond w3-margin-right"></i>NatCap's</button>
<button class="w3-button w3-white w3-hide-small" onclick="filterSelection('webmaps')"><i class="fa fa-photo w3-margin-right"></i>Webmaps</button>
<button class="w3-button w3-white w3-hide-small" onclick="filterSelection('art')"><i class="fa fa-map-pin w3-margin-right"></i>Art</button> -->
</div>
</div>
</header>
<!-- Testing writing html in js here
<div id="theDiv">
<div class="w3-third w3-container w3-margin-bottom filterDiv art webmaps">
<a href='https://arcg.is/0XGrDO' target='_blank'>
<img src="images/nomadic.png"
alt="Image" style="width:100%" class="w3-hover-opacity">
</a>
<div class="w3-container w3-white">
</div>
</div>
</div>-->
<!-- First Inspiration Grid-->
<div class="w3-row-padding filterDiv natcaps webmaps">
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://www.worldwildlife.org/pages/taking-stock-of-myanmar-s-natural-capital' target='_blank'><img src="/images/myanmar.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Myanmar's Natural Capital</b></p>
<p>Myanmar's Natural Capital website presents interactively an assessment led by World Wide Fund for Nature, at the request of the Government of Myanmar, will help Myanmar make those connections. The assessment includes information about where the country’s natural capital is located, what ecosystem services it provides to people, and how those services will change under different climate change and development scenarios. See <a href='https://www.worldwildlife.org/pages/taking-stock-of-myanmar-s-natural-capital' target='_blank'><i>Explore Ecosystem Services</i></a> for interactive maps of Myanmar's natural assets—land, water, soil, plants, wildlife and air—that provides benefits to people.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://global-web-viewer-srfv5ztfda-uc.a.run.app/' target='_blank'><img src="images/protoViewer.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Prototype Natural Capital World Viewer</b></p>
<p>Nature is critical to human wellbeing. Ecosystems provide people with crucial benefits, from clean water to nourishing food. Nature helps us adapt to a changing climate, provides us with materials to build our homes, and boosts human health. But human development activities are destroying the ecosystems that support and sustain us. How can we maintain human prosperity while safeguarding and regenerating the natural environment on which it depends? The Natural Capital World Viewer is designed to make nature’s diverse benefits to people easily accessible and understandable. This viewer allows users to explore several of the most important benefits nature provides to people.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://arteries.blue/' target='_blank'><img src="images/Mekong.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>I Am Mekong</b></p>
<p>Rising sea levels, accelerated land degradation, and reduced sediment supply is hurting the Mekong. But it doesn’t have to be that way. In a basin where decision-making is deeply fractured and development strategies are politically complicated, a major shift of some form is required if the Mekong is to survive. Determining what that shift looks like is the answer to an existential question for one of the most productive regions in Asia.</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding w3-margin-bottom filterDiv natcaps webmaps">
<div class="w3-third w3-container w3-margin-bottom">
<a href='http://viz.naturalcapitalproject.stanford.edu/pro-agua/' target='_blank'><img src="images/proagua.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Natural Resilience in the Amazon</b></p>
<p>The PRO Agua project (<i>Proyecto Resiliencia y Ordenamiento Territorial del Agua</i>) takes place in the tri-national area where Bolivia, Brazil and Peru meet and where watersheds are affected by floods, and pollution from illegal mining. This collaborative endeavour ambitions to demonstrate the benefits of ecosystem services and integrated watershed management for the health and well-being of the growing population.
<span class="light"> [¡En Español!] By Charlotte Weil & team </span>
</p>
</div>
</div>
<div class="w3-third w3-container">
<a href='http://viz.naturalcapitalproject.stanford.edu/ipbes/' target='_blank'><img src="images/natureforpeople.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Nature's Contributions to People, worldwide</b></p>
<p>As part of UN's <a href='https://www.ipbes.net/' target='_blank'>IPBES</a> Global Assessment, we mapped key ecosystem services worldwide at a fine resolution, under future scenarios (Chaplin-Kramer, in press). Where does nature contributes to people the most today, and where will people be most at risk in the future? This interactive viewer helps to explore these dense maps and facilitates comparisons across different regions, services, scenarios. Informing science-based policies, with the right maps in the right hands!
<span class="light"> By Charlotte Weil, Anna Hääg & team</span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://charlottegiseleweil.github.io/NatCapTraining/' target='_blank'><img src="images/training.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>NatCap Training Program</b></p>
<p>NatCap offers a wide range of courses to help people learn about approaches and tools to use ecosystem services to inform decisions. Including on-line course, webinars, regional workshops, hands-on practice and tools in remote courses and seminars, customized workshops, and a the “training track” at the Natural Capital Symposium. <a href='https://naturalcapitalproject.stanford.edu/training-program/' target-='_blank'>Learn more!</a>
<span class="light">By D. Tekin & team</span></p>
</div>
</div>
</div>
<!-- Third Examples Row -->
<div class="w3-row-padding w3-margin-bottom filterDiv natcaps webmaps invest">
<div class="w3-third w3-container">
<a href='http://viz.naturalcapitalproject.stanford.edu/GreenGrowthBook' target='_blank'><img src="images/gg.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Green Growth That Works</b></p>
<p>This book provides detailed examples of Natural Capital Policy and Finance Mechanisms around the World.
<span class="light">By Charlotte Weil, Gunes Yurdakul & Cyril Van Schreven </span> </p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://joannalcy.github.io/hra-dashboard/' target='_blank'><img src="images/hra.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>InVEST Viewer: HRA Model</b></p>
<p>Prototyping the next phase of NatCap's Platform, this dashboard supports visualizing InVEST Habitat Risk Assessment results. It is intended to give users a quick glance on how much risk do stressors cause to the habitats, and what are the areas of high, medium or low risks.<a href='http://data.naturalcapitalproject.org/nightly-build/invest-users-guide/html/habitat_risk_assessment.html' target='_blank'> More about InVEST HRA model.</a>
<span class="light"> By Joanna Lin </span></p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='https://beescape.psu.edu/app/' target='_blank'><img src="images/beescape.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Beescape</b></p>
<p>Get a bee's eye view of your landscape - This tool will help you understand how the landscape surrounding managed honey bee hives placed in an apiary, garden, or farm stacks up in terms of floral resources bees can find, the insecticides they encounter, and for wild bees, the nesting sites that are available.
<span class="light"> Work led by Eric Lonsdorf. </span>
</p>
</div>
</div>
</div>
<!-- Fourth Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container">
<a href='https://trumancfy.github.io/Data_Viz_2018/' target='_blank'><img src="images/swy.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>InVEST Viewer: Seasonal Water Yield</b></p>
<p>Still at a prototype stage, this proposed InVEST dashboards explores Seasonal Water Yield model results, focusing on Baseflow and Quickflow, in Myanmar.<a href='http://data.naturalcapitalproject.org/nightly-build/invest-users-guide/html/seasonal_water_yield.html' target='_blank'> More about InVEST SWY model.</a>
<span class="light"> By Fengyu Cai & team </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='http://viz.naturalcapitalproject.stanford.edu/rangelands' target='_blank'><img src="images/rangelands.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>NatCap's Rangelands model</b></p>
<p>The Rangelands Dashboards displays sample outputs of NatCap’s Rangeland Production Model, in the Gobi desert, Mongolia.
<span class="light"> By Ginger Kowal</span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='http://hydrolab.io/ffr/#6/25.904/15.795/FFR-CNT-NME-CNN-LKE' target='_blank'><img src="images/f.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Mapping the world's free flowing rivers</b></p>
<p>Understanding the many factors impacting river ecosystems is crucial to understand which rivers should be prioritized for conservation or restoration <a href='https://www.worldwildlife.org/pages/free-flowing-rivers' target='_blank'>(Read more)</a>. This website provides a visualization for the status and pressures on the world’s river from Grill et al. (2019) <a href='https://www.nature.com/articles/s41586-019-1111-9' target='_blank'> Mapping the world's free-flowing rivers</a>.
</p>
</div>
</div>
</div>
<!-- Random Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://charlottegiseleweil.github.io/webviz_natcap/index.html' target='_blank'><img src="images/tana.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Multi-Objective Optimization Viewer</b></p>
<p><a href='https://charlottegiseleweil.github.io/webviz_natcap/intro.html' target='_blank'>The Upper-Tana Nairobi Water Fund</a> has a triple objective: to maximize water yield, minimize sediment export and soil erosion. This dahsboard helps understanding the trade-offs - a key to a optimize between competing objectives.
<span class="light"> By Charlotte Weil </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='https://www.nationalgeographic.com/animals/article/endangered-species-in-every-us-state-interactive-map' target='_blank'><img src="images/natgeo_species.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>US Endangered Species Map</b></p>
<p>This National Geographic’s interactive map highlights lesser-known endangered species across America.
<span class="light"> By Soren Walljasper </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='http://www.pik-potsdam.de/~bodirsky/demand_scenarios/#page1' target='_blank'><img src="images/fooddemand.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Future Food Demand</b></p>
<p>Interactive Infogrpahics of global future food demand scenarios for the 21st century.
<span class="light"> By Kai Schefferski </span>
</p>
</div>
</div>
</div>
<!-- VESL Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container filterDiv webmaps">
<a href='http://www.impactlab.org/map/#usmeas=absolute&usyear=1981-2010&gmeas=absolute&gyear=2080-2099&tab=global&grcp=rcp85' target='_blank'><img src="images/climateimpactlab.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Climate Impact Map</b></p>
<p>* This map shows historical and projected temperature data.
<span class="light"> By Climate Impact Lab </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='https://vesl.jpl.nasa.gov/ice-sheets/greenland-ice-retreat/' target='_blank'><img src="images/nasa_c.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Coastline Retreat From Sea-Rise</b></p>
<p>This interactive simulation shows the retreat of the Southwestern portion of the Greenland ice sheet over the last 12,000 years.
<span class="light"> By NASA Virtual Earth System Laboratory </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='https://vesl.jpl.nasa.gov/sea-level/slr-eustatic/' target='_blank'><img src="images/nasa_i.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Greenland Ice Retreat Simulation</b></p>
<p>This interactive simulation ties grounded ice loss in Antarctica and Greenland to coastline retreat in Florida, the Gulf Coast, and California.
<span class="light"> By NASA Virtual Earth System Laboratory </span>
</p>
</div>
</div>
</div>
<!-- Fifth Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container filterDiv webmaps">
<a href='https://vesl.jpl.nasa.gov/' target='_blank'><img src="images/nasa.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>NASA VESL Gallery</b></p>
<p>More simulations related to glaciers, ice sheets, sea level, and solid earth.
<span class="light"> By NASA Virtual Earth System Laboratory </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='http://cons.scienceontheweb.net/belize/' target='_blank'><img src="images/belize1.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Belize Coastal Mgm't Portal</b></p>
<p>This map portal displays Belize's Integrated Coastal Management Plan.
<span class="light"> By Gregg Verutes </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='http://viz.naturalcapitalproject.stanford.edu/caracol/' target='_blank'><img src="images/caracol.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Sustainable Development in Caracol, Belize</b></p>
<p>In the Caracol-Chiquibul-Mountain Pine Ridge (CMCC) region of Belize, improvement of the road to Caracol are expected, with potential benefits and concerns. Proactive planning had led to conduct state-of-the-art ecosystem services mapping and analysis.
<span class="light"> By NatCap CMCC Team </span>
</p>
</div>
</div>
</div>
<br>
<!-- Sixth Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom filterDiv webmaps">
<a href='https://dopa-explorer.jrc.ec.europa.eu/globe/1' target='_blank'><img src="images/dopaExplorer.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Digital Observatory for Protected Areas (DOPA) Explorer 4</b></p>
<p>Welcome to DOPA Explorer, the Joint Research Centre’s web based information system on the world's protected areas, which helps the European Commission and other users to assess the state of and the pressure on protected areas at multiple scales.
<span class="light"> By the Joint Research Centre of the European Commission</span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='http://msp.naturalcapitalproject.org/msp_concierge_master/' target='_blank'><img src="images/mp.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Marine Planning Concierge</b></p>
<p>The NatCap Marine Planning Concierge is designed to make it easier to learn about, get inspired by, and implement marine spatial planning. It builds upon coastal InVEST models and other NatCap's marine tools.
<span class="light"> By Gregg Verutes </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='http://marineapps.naturalcapitalproject.org/bahamas/' target='_blank'><img src="images/baha.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Bahamas Hazard Viewer</b></p>
<p>This interactive dashboard displays InVEST Costal Vulnerability model results, in the Bahamas. <a href='https://naturalcapitalproject.stanford.edu/training-program/' target-='_blank'>Learn more!</a>
<span class="light"> By Gregg Verutes </span>
</p>
</div>
</div>
</div>
<!-- Seventh Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container filterDiv webmaps">
<a href='https://coastalresilience.org/tools/apps/#apps_id%7Cassess-risk%7C1' target='_blank'><img src="images/tnc.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>TNC's Coastal Resilience Apps</b></p>
<p>The Nature Conservancy has developped its own suite of visualization apps specific to case studies around the world.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv art">
<a href='http://www.awavenavr.com/' target='_blank'><img src="images/vra.jpg" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Virtual Reality Journey in the Amazon</b></p>
<p>Awavena tells a story of nature and its cultural and spiritual benefits featuring the Yawanawa people who have protected 200,000 hectares of rainforest from mining and destruction. This immersive experience integrates the role that plants play in the identity and cultural heritage of indigenous people. The data displayed in the movie was collected and modeled from Lidar and 3D imaging technologies.
<span class="light"> By Lynette Wallworth in collaboration with the Yawanawa people</span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<a href='https://formisfunction.io/' target='_blank'><img src="images/stephen.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Intuitively sensed Natural Capital</b></p>
<p>Californian wildfires in 2018 were the deadliest and most destructive on record, with a total of 8,527 fires burning an area of 1,893,913 acres (766,439 ha). Digital artist Stephen Standridge created this piece from the forest, right the fires erupted, sensing the dryness...
<span class="light"> By Stephen Standridge </span></p>
</div>
</div>
</div>
<!-- Eight Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container">
<a href='https://store.steampowered.com/app/409020/The_Stanford_Ocean_Acidification_Experience/' target='_blank'><img src="images/vro.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Ocean Acification in Virtual Reality</b></p>
<p>Using latest Virtual Reality technology, Stanford researchers have produced a virtual underwater ecosystem to allow you to observe firsthand what coral reefs are expected to look like by the end of the century if we do not curb our CO2 emissions.
<span class="light"> By Anna Muller & team </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='https://phawthorne.github.io/mc-vis/' target='_blank'><img src="images/peter.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Trade-Offs Curves Dashboard</b></p>
<p>This simple dashboard displays trade-offs curves and the corresponding land use management maps, for 2 specific landscapes optimized for 3 specific ecosystem services.
<span class="light"> By Peter Hawthorne </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv natcaps webmaps">
<a href='http://viz.naturalcapitalproject.stanford.edu/gobiTraining' target='_blank'><img src="images/gobi.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Gobi Training Viewer</b></p>
<p>Bringing Natural Capital Knowledge to Mongolia’s Gobi Steppe
This four-day virtual event will introduce participants to the Natural Capital Approach and give teams of participants hands-on experience with three ecosystem services models.
<span class="light"> By NatCap </span>
</p>
</div>
</div>
<!-- 9th Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom filterDiv art webmaps">
<a href='https://arcg.is/0XGrDO' target='_blank'><img src="images/nomadic.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Making Pastoralists Count</b></p>
<p>This beautiful ArcGIS-based storymap presents Geospatial methods for the health surveillance of nomadic populations, with a very rich multi-media approach.
<span class="light"> By Stace Maples & Hannah Binzen Wild</span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv">
<a href='https://maps.coastalresilience.org/gulfmex/' target='_blank'><img src="images/coastalTNC.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Coastal Defense App </b></p>
<p>One of TNC's Coastal Resilience apps, the Coastal Defense app examines how coastal habitats such as oyster reefs, coral reefs, tidal marshes, mangroves, beach dunes, and seagrass help protect coastal areas by reducing wave energy hitting the shore. This app is being used in <a href='https://maps.coastalresilience.org/seflorida/' target='_blank'>Southeast Florida</a> and <a href='https://maps.coastalresilience.org/gulfmex/' target='_blank'>Gulf of Mexico</a>.
<span class="light"> By The Nature Conservancy </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv">
<a href='raster_weights_dashboard.html' target='_blank'><img src="images/justin.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Spatial Priotization Viewer in Python</b></p>
<p>This tools allows users to see how they could combine multiple ecosystem services into a single indicator via specifying different "weights" for each ecosystem service. It also illustrates a working example that implements how to do raster math on the client side within an html/js file. <a href='http://pebat.umn.edu' target='_blank'>More information</a>
<span class="light"> By Justin Johnson</span>
</p>
</div>
</div>
</div>
<!-- 10th Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom filterDiv webmaps">
<a href='https://resourcewatch.org/data/explore' target='_blank'><img src="images/resourceWatch.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Resource Watch </b></p>
<p> Resource Watch features hundreds of data sets all in one place on the state of the planet’s resources and citizens. Users can visualize challenges facing people and the planet, from climate change to poverty, water risk to state instability, air pollution to human migration, and more.
<span class="light"> By WRI </span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom filterDiv webmaps">
<a href='https://www.prepdata.org/explore' target='_blank'><img src="images/prep.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Partnership for Resilience and Preparedness (PREP) explorer</b></p>
<p>PREPdata is a map-based, open data online platform that allows users to access and visualize spatial data reflecting past and future climate, as well as the physical and socioeconomic landscape for climate adaptation and resilience planning. The platform is continuing to evolve through the input of PREP partners and PREPdata users. It is a flexible tool for climate adaptation planning, designed to address many of the gaps and challenges adaptation practitioners face.
<span class="light"> By PREP </span>
</p>
</div>
</div>
<div class="w3-third w3-container">
<a href='https://ecoparis.github.io/' target='_blank'><img src="images/ecoparis.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>EcoParis: Ecosystem Services in Paris</b></p>
<p>EcoParis is an interactive visualization of map data of ecosystem services in urban and peri-urban areas in the Ile-de-France region from the IDEFESE project.
<span class="light"> By A. Ferragni, K. Sinnathamby, R. Liautaud </span>
</p>
</div>
</div>
</div>
<!-- 11th Examples Row -->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom filterDiv webmaps">
<a href='https://foodsystemsdashboard.org/compareandanalyze' target='_blank'><img src="images/foodSystems.png" alt="Image" style="width:100%" class="w3-hover-opacity"></a>
<div class="w3-container w3-white">
<p><b>Food Systems Dashboard</b></p>
<p>The Food Systems Dashboard combines data from multiple sources to give users a complete view of food systems. Users can compare components of food systems across countries and regions. They can also identify and prioritize ways to sustainably improve diets and nutrition in their food systems.
<span class="light"> By Johns Hopkins University and The Global Alliance for Improved Nutrition</span>
</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/boo.png" alt="Image" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Your favorite visualization</b></p>
<p> Email us @ <a href='mailto:[email protected]'>[email protected]</a> to have your project featured!
<span class="light"> By you</span>
</p>
</div>
</div>
</div>
<!-- 12th Examples Row -->
<!--
MORE
California Coastal Climate Adapatation
http://marineapps.naturalcapitalproject.org/california/index.html?utm_source=Marine+Policy+Paper+Announcement+List&utm_campaign=cce18d832a-MARINE+POLICY+PAPER+ANNOUNCEMENT&utm_medium=email&utm_term=0_6f75e7e693-cce18d832a-445018937&mc_cid=cce18d832a&mc_eid=358c54f5fa
NATURE-BASED STRATEGIES FOR ADAPTATION PLANNING
Rising sea levels, population growth along coastlines and increasing hazards associated with storms threaten California's coastal communities.
Our team engaged coastal planners, managers, and the public to codevelop a multiscaled decision-support tool that highlights where nature-based and other suitable coastal zone strategies can protect at-risk coastal populations and infrustructure.
Read more:
https://oceansolutions.stanford.edu/news-stories/new-tool-merges-climate-science-law-and-policy-protect-california-coastline?utm_source=Marine+Policy+Paper+Announcement+List&utm_campaign=cce18d832a-MARINE+POLICY+PAPER+ANNOUNCEMENT&utm_medium=email&utm_term=0_6f75e7e693-cce18d832a-445018937&mc_cid=cce18d832a&mc_eid=358c54f5fa
By Gregg + Center of Oceans Solutions
-->
<!-- Pagination
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
<a href="#" class="w3-bar-item w3-black w3-button">1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
<a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
</div>
</div>-->
<!-- Viewer Template Section -->
<hr><hr><hr><hr><hr><hr><hr><hr>
<div class="w3-container w3-padding-large" style="margin-bottom:32px" id="viewerTemp">
<h1><b>Viewer Template</b></h1>
<h3> Create a custom viewer with your own data easily </h3>
<p>Requires only basic coding understanding, and a github account.</p>
<a href='http://viz.naturalcapitalproject.stanford.edu/viewerTemplate/' target='_blank'>
<img src="images/viewerTemp.png" alt="Image" style="width:100%" class="w3-hover-opacity">
</a>
<button class="w3-button w3-third w3-black w3-padding-large w3-margin"><a href='http://viz.naturalcapitalproject.stanford.edu/viewerTemplate/' target='_blank'>
<i class="fa fa-tv w3-margin-right"></i>See Demo</a>
</button>
<button class="w3-button w3-third w3-black w3-padding-large w3-margin"><a href='https://github.com/charlottegiseleweil/viewerTemplate' target='_blank'>
<i class="fa fa-toggle-right w3-margin-right"></i>Get started!</a>
</button>
</p>
<hr>
</div>
<hr><hr><hr><hr><hr><hr><hr><hr>
<!-- Resources section -->
<div class="w3-container w3-padding-large" style="margin-bottom:32px" id="toolbox">
<h1><b>Toolbox for Natural Capital Data Visualization</b></h1>
<p>This guidance document aims to support ES analysts striving to effectively communicate natural capital information, specifically to synthesize and visualize complex ecosystem services model outputs. It proposes approaches to ES visualizations and summaries in the form of a toolbox tailored to the specific needs of ES analysts, supported by fundamental and applied data visualization guidelines.</p>
<p>Effective data visualization are highly context-specific, thus there is no "one-size-fits-all"; the toolbox suggests a variety a display strategies and examples. Remember to tailor to the targeted audience and their level of expertise and familiarity with the context, the goal of the display, the time and type of media.
For a quick answer to a specific display need, table 3.5.2 summarizes the relevant options for the main display tasks</p>
<hr>
<p>
<button class="w3-button w3-third w3-dark-grey w3-padding-large w3-margin"><a href='http://www.charlotteweil.fr/masterthesis/docs/toolbox.html' target='_blank'>
<i class="fa fa-file w3-margin-right"></i>Read online</a>
</button>
<button class="w3-button w3-third w3-dark-grey w3-padding-large w3-margin"><a href='http://www.charlotteweil.fr/masterthesis/docs/toolbox.pdf' target='_blank'>
<i class="fa fa-download w3-margin-right"></i>Download PDF</a>
</button>
</p>
<hr></div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px" >
<h1><b>Are interactive viewers useful for decision-making?</b></h1>
<p>This paper presents an investigation of the usefulness of map-based dashboards and how these can be built to support science-based spatial planning. It includes a comparison of 21 dashboards in addition to an in-depth case study evaluating a dashboard using an insight-based methodology. The results suggest that useful dashboards have pre-defined clear goals and are customized to their targeted audience. Tailored summary charts and data overviews guide users through the data and encourage them to go from data to action. Furthermore, a list of guidelines, e.g. work iteratively and define audience and goals, to support analysts creating dashboards for decision-making is provided.</p>
<button class="w3-button w3-third w3-dark-grey w3-padding-large w3-margin"><a href='https://www.techrxiv.org/articles/On_the_usefulness_of_map-based_dashboards_for_decision_making/12738683' target='_blank'>
<i class="fa fa-file w3-margin-right"></i>Read Häägg et al (in review)</a>
</button>
</p>
<hr></div>
<div class="w3-container w3-padding-large" style="margin-bottom:32px" ><h2 id='contact'> Contacts</h2>
<div class="w3-third">
<h4>Jesse Goldstein
<a class="fa fa-envelope w3-xlarge" href="mailto:[email protected]"></a>
</h4>
<p>Ask me about: Adding your viewer here!</p>
<p>GIS Analyst, NatCap</p>
</div>
<div class="w3-third">
<h4>Charlie Weil
<a class="fa fa-envelope w3-xlarge" href="mailto:[email protected]"></a>
</h4>
<p>Ask me about: ViewerTemplate</p>
<p>Data Scientist, formerly NatCap</p>
</div>
<div class="w3-third">
<h4>Stacie Wolny
<a class="fa fa-envelope w3-xlarge" href="mailto:[email protected]"></a>
</h4>
<p>Ask me about: Making great maps</p>
<p>GIS Analyst, NatCap</p>
<!-- Contacts:
Justin
jj.png
Ask me about
- Bokeh (Python Interactive Viz),
- Hosting viz on AWS
- Visualizing rasters -->
</div>
<hr><hr><hr><hr><hr><hr><hr><hr>
<div class="w3-black w3-center w3-padding-24">Visit <a href="https://naturalcapitalproject.stanford.edu/" title="footer" target="_blank" class="w3-hover-opacity">naturalcapitalproject.stanford.edu</a></div>
<!-- End page content -->
</div>
<script src="js/w3main.js"></script>
<script src="js/main.js"></script>
</body>
</html>