-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
239 lines (185 loc) · 13.9 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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-149667597-1"></script>
<script src="js/gtag.js"></script>
<meta charset="utf-8">
<!-- Material Design Icons Extension -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" media="all" rel="stylesheet" type="text/css">
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Boostrap Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- w3 style thingz -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" type="text/css" href="css/commonStyle.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/about.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body class='dark'>
<!-- Menu Navbar -->
<div id="main_menu"></div>
<div class="w3-row-padding w3-padding-64 w3-theme-l1">
<center>
<h1 style="color: #78c4f0;padding: 5%;">
About <i>Nature's Contributions to People </i>Viewer</h1>
</center>
<!-- Logos -->
<!--
<div class="col s5" style="padding:.75rem 1.25rem; margin:1rem"> <a target="_blank" href="http://www.naturalcapitalproject.org/"><img class="logo responsive-img" src="static/logos/natcap.jpg" height="110px" -->
<h1 id="motivation">Motivation</h1>
<p>This viewer supports the <strong>Global Modeling of Nature’s Contributions to People</strong>, described by <a href='https://science.sciencemag.org/lookup/doi/10.1126/science.aaw3372'>Chaplin-Kramer et al (2019)</a> in <i>Science</i>.</p>
<p>Natural habitats purifies water, protects us from floods, delivers pollinators to food crops supporting nutritious diets, and provides countless other benefits to humanity. Incorporating nature’s contribution to people into decision making is essential to face 21st century challenges. The Global Assessment of the UN’s Intergovernmental Science-Policy Platform on Biodiversity & Ecosystem Services (IPBES) illuminates how nature contributes to people and where those contributions and the biodiversity underpinning them are in decline. As part of this effort, we mapped key ecosystem services worldwide at a fine resolution, under future scenarios. The complexity of multi-dimensional results leads to many possible narratives; the high-resolution and multi-dimensionality of these global spatial results makes them particularly dense, interesting and complex. We present here a framework for exploring people’s needs for nature, the change in nature’s contribution to meeting those needs, the gap in potential benefits that could be provided to people, the number of people impacted, as well as comparisons across different regions, services, scenarios. The goal of this interactive viewer is to facilitate the exploration of the results under different angles, and illustrate the type of insights (e.g, identifying areas where people are most vulnerable) that could help inform science-based policies.</p>
</div>
<div class="w3-row-padding w3-theme-l1">
<!-- NCPs section -->
<h1>Nature's Contributions to People (NCP)</h1>
<p class="w3-large">We introduce here a new framework for assessing Nature’s Contributions to People (NCP), based on people’s needs for benefits from nature and nature’s contribution to meeting such needs. We illustrate a common approach for understanding three NCP, in fresh water, along coastlines, and on land:</p>
<div class="w3-row-padding w3-center" style="margin-top:32px">
<div class="w3-third">
<i class="fa fa-tint w3-margin-bottom w3-jumbo w3-center"></i>
<p class="w3-large darkgrey">Water Quality</p>
<p>Regulation of <strong>Water Quality</strong>, specifically retention of nitrogen pollutants</p>
</div>
<div class="w3-third">
<i class="fa fa-home w3-margin-bottom w3-jumbo"></i>
<p class="w3-large darkgrey">Coastal Risk Reduction</p>
<p>Protection from the impacts of <strong>Coastal Storms</strong> such as erosion and flooding</p>
</div>
<div class="w3-third">
<i class="glyphicon glyphicon-grain w3-margin-bottom w3-jumbo"></i>
<p class="w3-large darkgrey">Pollination</p>
<p>Pollination of crops contributing to <strong>human nutrition</strong>, provided by wild pollinators such as bees</p>
</div>
</div>
<p>For each NCP, we consider: </p>
<ol>
<li>A <b>human</b> component, <i>people’s needs</i> for benefits determined by the <i>maximum potential benefits</i> (based on biophysical conditions or pressures) and the <i>population exposed</i> to these potential benefits,</li>
<li>A <b>natural</b> component, consisting of <i>nature’s contribution</i> to potential benefits (as the proportion of the maximum potential benefits that are provided by nature). </li>
</ol>
</div>
<div class="w3-row-padding w3-theme-l1">
<!-- Scenarios section -->
<div class="row">
<div class="w3-half">
<h1 id="scenarios">Scenarios</h1>
<p>We examine changes in these individual components of the NCP, from current (2015) conditions to future (2050) scenarios. We draw three contrasting scenarios from the Shared-Socioeconomic Pathways (SSP), paired with emissions scenarios from Representative Concentration Pathways (RCP), developed by IPCC and IPBES, that set future trajectories in land-use, climate and population change. We considered 3 scenarios:</p>
<ul>
<li>
<p>The <strong style="color:green;"><!--<span class="glyphicon glyphicon-fire"></span>--> Sustainability</strong> scenario,(SSP1 paired with RCP 2.6) depicts a "Greener" world shifting gradually toward a more sustainable path, emphasizing more inclusive development (reducing inequalities) and respect for the environment.</p>
</li>
<li>
<p>The <strong style="color:orange;"><!--<span class="glyphicon"></span>-->Regional Rivalry</strong> scenario (SSP3 paired with RCP 6.0) assumes resurgent nationalism, where countries’ concern with competitiveness and security lead to international conflicts. Economic development is slow, education and tech investments declines, inequalities worsen. Climate change is intense and there is strong environmental degradation in some regions.</p>
</li>
<li>
<p>The <strong style="color:purple;">Fossil-Fueled Development</strong> (SSP5 paired with RCP 8.5) portrays a world where humanity takes the capitalist highway, with high faith in competitive markets, innovation and participatory societies. This world is increasingly globalized, with large investments in health, education, and socio-economic development in general. However, this occurs with vast exploitation of abundant fossil fuel resources and very consumerist lifestyles, and geo-engineering is viewed as the solution.</p>
</li>
</ul>
</div>
<div class="w3-half w3-center">
<img src="static/images/methods/ssps.png" alt="SSPs" style="width:60%; padding: 10px; margin:40px; border: 10px solid black;">
</div>
</div>
</div>
<div class="w3-row-padding w3-theme-l1">
<h2 id="keyfindings">Key findings</h2>
<p>From this work (<a href='https://science.sciencemag.org/lookup/doi/10.1126/science.aaw3372'>Chaplin-Kramer et al (2019)</a>), we find that where people’s needs for nature are now greatest, nature’s ability to meet those needs is declining. Up to five billion people face higher water pollution and insufficient pollination for nutrition under future scenarios of land use and climate change, particularly in Africa and South Asia. Hundreds of millions of people face heightened coastal risk across Africa, Eurasia, and the Americas. Continued loss of nature poses severe threats, yet these can be reduced 3- to 10-fold under a sustainable development scenario. </p>
</div>
<div class="w3-row-padding w3-theme-l1">
<div class="w3-third">
<h2 id="appstructure">App Structure</h2>
<p><strong>Summaries</strong>: <a href="today.html"><strong style="color:grey;">today.html</strong></a> offers on overview of the areas where Nature's Contribution to People (NCP) is key today; <a href="future.html"><strong style="color:grey;">future.html</strong></a> dives into future scenarios to compare, per country, where people are most at risk.</p>
<p><strong>Service-specific</strong>: <a href="poll.html"><strong style="color:grey;"> pollination.html</strong></a>, <a href="wq.html"><strong style="color:grey;">waterquality.html</strong></a> and <a href="coastal.html"><strong style="color:grey;">coastal.html</strong></a> focus on a single ecosystem service, with fine resolution results in terms of humanity's needs and nature's contributions, as well as methodology.</p>
</div>
<div class="w3-third">
<h2 id="howtouse">How to use</h2>
<p> On each map, an ⓘ button provides explanations. </p>
<p> Left menus are clickable to make selections on service, scenario, and metric to display. All maps are zoomable and interactive: hover over regions of interest for more information. </p>
<p><a target="_blank" href="https://github.com/charlottegiseleweil/natureforpeople/issues">Please report bugs and suggestions here</a></p>
</div>
<div class="w3-third">
<h2 id="data">Data</h2>
<p>All data displayed is publicly available in the <a href="http://ipbes-natcap-ecoshard-data-for-publication.ecoshard.org/">Supplementary Data for Global Modeling of Nature's Contributions to People</a>.</p>
</div>
</div>
<!-- Contributors -->
<div class="w3-row-padding w3-theme-l1" id="contributors">
<hr>
<h2>Contributors</h2>
<div class="w3-quarter w3-center">
<img src="static/images/peeps/bc.jpg" alt="Pic" style="width:45%" class="w3-circle w3-hover-opacity">
<h3>Rebecca Chaplin-Kramer</h3>
<h3 class="icon-row w3-center">
<a class="inline-icon" href="mailto:[email protected]">
<i class="zmdi zmdi-email"></i></a>
<a class="inline-icon" href="https://twitter.com/beckyck" target="_blank"><i class="zmdi zmdi-twitter"></i></a>
<a class="inline-icon" href="https://www.linkedin.com/in/becky-chaplin-kramer-4047854/" target="_blank"><i class="zmdi zmdi-linkedin"></i></a>
</h3>
</div>
<div class="w3-quarter w3-center">
<img src="static/images/peeps/rs.jpg" alt="Pic" style="width:45%" class="w3-circle w3-hover-opacity">
<h3>Richard P. Sharp</h3>
<h3 class="icon-row center">
<a class="inline-icon" href="mailto:[email protected]">
<i class="zmdi zmdi-email"></i></a>
<a class="inline-icon" href="https://bitbucket.org/richsharp/" target="_blank">
<i class="zmdi zmdi-github"></i></a>
</h3>
</div>
<div class="w3-quarter w3-center">
<img src="static/images/peeps/cw.jpg" alt="Pic" style="width:45%" class="w3-circle w3-hover-opacity">
<h3>Charlotte G. Weil</h3>
<h3 class="icon-row w3-center">
<a class="inline-icon" href="mailto:[email protected]">
<i class="zmdi zmdi-email"></i></a>
<a class="inline-icon" href="https://medium.com/@charlotteweil" target="_blank"><i class="zmdi zmdi-library"></i></a>
<a class="inline-icon" href="https://github.com/charlottegiseleweil" target="_blank"><i class="zmdi zmdi-github"></i></a>
<a class="inline-icon" href="https://twitter.com/charlotte_weil" target="_blank"><i class="zmdi zmdi-twitter"></i></a>
<a class="inline-icon" href="https://www.linkedin.com/in/charlotteweil" target="_blank"><i class="zmdi zmdi-linkedin"></i></a>
</h3>
</div>
<div class="w3-quarter w3-center">
<img src="static/images/peeps/af.jpg" alt="Pic" style="width:45%" class="w3-circle w3-hover-opacity">
<h3>Anna Fredriksson Häägg</h3>
<h3 class="icon-row center">
<a class="inline-icon" href="mailto:[email protected]">
<i class="zmdi zmdi-email"></i></a>
<a class="inline-icon" href="https://github.com/annfr542" target="_blank">
<i class="zmdi zmdi-github"></i></a>
<a class="inline-icon" href="https://www.linkedin.com/in/anna-fredriksson-h%C3%A4%C3%A4gg-74998a183/" target="_blank"><i class="zmdi zmdi-linkedin"></i></a>
</h3>
</div>
<br>
</div><div class="w3-row-padding w3-theme-l1">
<div class="w3-half">
<p> Science contributors: Rebecca Chaplin-Kramer, Richard P. Sharp, Charlotte G. Weil, Elena M. Bennett, Unai Pascual, Katie K. Arkema, Kate A. Brauman, Benjamin P. Bryant, Anne D. Guerry, Nick M. Haddad, Maike Hamann, Perrine Hamel, Justin A. Johnson, Lisa Mandle, Henrique M. Pereira, Stephen Polasky, Mary Ruckelshaus, M. Rebecca Shaw, Jessica M. Silver, Adrian L. Vogl, Gretchen C. Daily</p>
</div><div class="w3-half"><p> Visualization: Charlotte G. Weil, Anna Fredriksson Häägg, Richard P. Sharp, Rebecca Chaplin-Kramer, Sarah Cafasso, David Malmström, Sami Ben Hassen, Harshdeep, Ahmed Ahres.</p></div>
</div>
<div class="w3-row-padding w3-theme-l1 w3-padding-32" id="contributors">
</div>
<!--</div> close Contributors -->
</div>
<!--close theme div -->
<script src="js/navigation.js"></script>
<script>
whenDocumentLoaded(() => {
// Initialize dashboard
addMenu(7);
});
function whenDocumentLoaded(action) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", action);
} else {
// `DOMContentLoaded` already fired
action();
}
}
</script>
</body>
</html>