/
poll.html
239 lines (184 loc) · 14.1 KB
/
poll.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 lang="en">
<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">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NCP Viewer: Pollination</title>
<meta name="author" content="Charlotte Weil, Anna Häägg & team">
<link rel="stylesheet" href="css/bootstrap.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/left-menu.css" />
<link rel="stylesheet" type="text/css" href="css/modelingInfo.css" />
<link rel="stylesheet" href="css/services.css">
<link rel="stylesheet" href="css/legend.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script src="js/L.Map.Sync.js"></script>
</head>
<body>
<!-- Menu Navbar -->
<div id="main_menu"></div>
<!-- End Menu Navbar -->
<!--Loading landing page-->
<div id="landingpage">
<h3 id="landing-page-loader">loading ...</h3>
</div>
<!--End Loading landing page-->
<div class="content-wrapper">
<!--left menu-->
<div id="left-menu">
<h3>What to visualize?</h3>
<input id="deficit-box" type="radio" class="no_show" onclick="switchMode('UN')" autocomplete="off" name="mode" checked="checked">
<label for="deficit-box" class="left-menu-header">Benefit Gap</label>
<input id="people-exposed-box" type="radio" class="no_show" onclick="switchMode('pop')" name="mode" autocomplete="off">
<label for="people-exposed-box" class="left-menu-header">People Exposed</label>
<input id="potential-need-box" type="radio" class="no_show" onclick="switchMode('PN')" name="mode" autocomplete="off">
<label for="potential-need-box" class="left-menu-header">Max Potential Benefit</label>
<input id="nat-cap-box" type="radio" class="no_show" onclick="switchMode('NC')" name="mode"autocomplete="off">
<label for="nat-cap-box" class="left-menu-header">Nature's Contribution</label>
<div class="section_marker"> </div>
<h3>Scenarios</h3>
<input type="radio" class="no_show" name="radio2" id="b_radio-1" value="1" checked="checked" onclick="switchScenario('ssp1')"/>
<label for="b_radio-1" class="left-menu-header" style="color: rgb(42,129,43)" >Green Growth</label>
<input type="radio" class="no_show" name="radio2" id="b_radio-2" value="3" onclick="switchScenario('ssp3')"/>
<label for="b_radio-2" class="left-menu-header" style="color: rgb(184,152,13)" >Regional Rivalry</label>
<input type="radio" class="no_show" name="radio2" id="b_radio-3" value="5" onclick="switchScenario('ssp5')"/>
<label for="b_radio-3" class="left-menu-header" style="color: rgb(112,12,151)">Fossil Fuels</label>
<br>
<div id="info_about_measurments">A Benefit Gap in pollination can be measured as the amount of crop losses due to insufficiently pollinated crops for pollination.
</div>
</div>
<!--End of left menu-->
<div id="main_content_container">
<!-- Bug Error Message
<style>
#ErrorMessage {
position: absolute;
z-index: 1000000000000;
background-color: black;
color: white;
top: 40vh;
width: 55vh;
left: 20vh;
font-size: x-large;
padding:2vh;
}
.coolButton {
background-color: rgb(255,255,255,0);
color: white;
border: 2px solid white;
position: relative;
background-color: black;
opacity: 0.6;
font-size: x-large;
}
.coolButton:hover{background-color: white; color: black; transition: 0.3s}
</style>
<script>
function closeErrorMessage() {
var x = document.getElementById("ErrorMessage");
x.style.display = "none";
}
</script>
<div id="ErrorMessage">
<p> Due to very high traffic, fine resolution maps may be extremely slow to render today. </p><p>If colorful data doesn't load on the maps behind, you may also <a target='_blank' href='http://ipbes-natcap-ecoshard-data-for-publication.ecoshard.org/'>download the data</a>, <a href='howto_poll.html'>view sample maps</a>, <a href="future.html">explore all pollination results by countries</a>, <a href="today.html">overviews by degree</a>, or come back in a few hours! </p><p>Apologies!</p>
<div ><button class="coolButton" onClick="closeErrorMessage()">Ok</button></div>
</div>-->
<div id="first">
<div id="maps">
<div class="map"id="map_2015"></div>
<div class="map" id="map_2050"></div>
<!--Information containter-->
<i class="info-button fas fa-info-circle" onclick="showInfo('info-overlay')"></i>
<div id="info-overlay">
<p class="info_exit" onClick="hideInfo('info-overlay')">✖</p>
<h2 class="info_head">How to read these maps</h2>
<p class="info_text"> These maps display high resolution global datasets for 4 metrics of interest: Benefit Gap (the potential benefit not provided by nature), People Exposed (to the benefits or benefit gaps), Maximum Potential Benefit (arising from human stressors and/or physical conditions), and Nature's Contribution (to providing potential benefits). When a metric is selected, a short description will appear below. Please refer to the modeling method for further details on each metric.</p><p class="info_text">The bottom map displays the baseline data (year 2015), and the top map shows the change (by 2050).</p><p class="info_text">To select a scenario (SSPs, 2050), as well as which metric to visualize, click on its name in the menu on the left panel.</p><br>
</div>
</div>
<div id="service_info">
<h1>Pollination</h1>
<img src="static/images/pollination.jpg" alt="Pollination" style="width:96%; margin: auto; display: block;">
<p id="service_info_text">Up to two-thirds of all crops require some degree of animal pollination to reach their maximum yields, and natural habitat around farmlands can support healthy populations of wild pollinators by providing them with foraging and nesting resources.</p>
<p id="service_info_text"><a style="margin-top:0; cursor: pointer" onclick="scrollToModelling()">Modeling Method <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
</div>
<div id="second">
<div id="modeling_method">
<h1>Modeling Method</h1>
<div class="modelingSection" >
<div style="width:30%;">
<img src="static/images/methods/framework.png" alt="NCP Framework" style="width:80%; border: 8px solid #dde4f2">
</div>
<div style="width:50%;">
<h2>Nature's Contributions to People (NCP) Framework</h2>
<p>The contribution that nature makes to potential benefits is a function of the amount and configuration of biodiversity and ecosystems, as well as with other drivers and stressors placed on the natural system such as climate change or pollution from anthropogenic inputs (e.g., fertilizer run-off). However, these biophysical measures indicating potential benefits may or may not coincide with where and how much people depend on the benefits from nature. Thus, the additional consideration of which populations are most dependent on nature’s role in delivering benefits is critical to establishing where these potential benefits and nature’s contributions to providing them matter to people. </p>
</div>
</div>
<br>
<div class="modelingSection" >
<div style="width:30%;">
<img src="static/images/methods/framework_polli.png" alt="Polli Framework" style="width:80%; border: 8px solid #dde4f2"><br> <br> <br>
<img src="static/images/bumblebee.jpg" alt="Pollination bee" style="width:80%; border: 8px solid #dde4f2">
</div>
<div style="width:50%;">
<p>For crop pollination, the <i>maximum potential benefit</i> is manifested by the total agricultural crop output that is dependent to some degree on insect pollination. For <i>population exposed</i>, we focus on “local” beneficiaries, populations whose aggregate dietary requirements exceed pollinator-independent production within 100 km. The <i>potential benefit provided by nature</i> is the yield or production attributable to pollination where it has been sufficiently delivered by pollinators from surrounding habitat, and <i>nature’s contribution</i> is represented by the proportion of total potential pollination-dependent crop output that is pollinated.</p>
<p>The potential benefits provided by nature, which are often called “ecosystem services” (but should be thought of as the potential supply of a service, and only truly becomes a service when combined with human demand for the service) may be measured in terms of total production value of the crop pollinated or number of people equivalents whose dietary requirements are met by pollination. We emphasize that a proportional representation of nature’s contribution to providing potential benefits is important to track differences or changes across space and time; as realized benefits provided by nature could increase alongside (or due to) increases in maximum potential benefits or population exposed, though nature’s contributions may remain the same. That is, if more pollination-dependent crops are grown, a constant proportional contribution of nature would result in higher levels of the corresponding realized benefits, in this case pollination, even if conditions for people (in terms of food security) deteriorate. The relative proportion of nature’s contribution, along with people’s needs, especially for the most vulnerable people, are more useful metrics than realized benefits alone when considering change across several variables at once (stressors, people, and nature), as they reveal where and when nature plays a key role in delivering benefits. </p>
<p>We also examine the benefits not provided by nature, or benefit gaps, people depend upon for their well-being (which could be filled to some extent by other forms of capital, e.g., the labor to hand-pollinate), and the populations exposed to changes in benefit gaps for each NCP in future scenarios. We use the amount of crop losses due to insufficiently pollinated crops as the measure of benefit gap for pollination. This benefit gap results in the outcomes people will actually face and perceive – potentially leading to food shortages in this case— and is what will determine people’s well-being, the visible component of NCP. It does not by itself, however, reveal the role nature plays in contributing to that well-being.
</p>
</div>
</div>
<br>
<div class="modelingSection" >
<div class="modeling_left" >
<h2 >Modeling Crop Pollination and Micronutrient Production</h2>
<p>This section provides an overview of the method to estimate Nature’s Contribution to People in terms of pollination supporting crop micronutrient production, specifically pollinator-dependent Vitamin A, Folate and Energy (KJ). We first calculate wild
pollination sufficiency provided by habitat around farmland, and the pollination dependence of crop-based production of different micronutrients. We then use these outputs along with data on local dietary requirements to determine humanity’s needs
and nature’s contributions, as the dual components of NCP. </p>
<h3 id="wildpollinationsufficiencypollinatorhabitat">Wild Pollination Sufficiency (Pollinator Habitat)</h3>
<p>Pollination sufficiency is based on the area of pollinator habitat around farmland. Agricultural pixels with >30% natural habitat in the 2 km area surrounding the farm are designated as receiving sufficient pollination for pollinator-dependent yields.
</p>
<h3 id="pollinationdependentnutrientproduction">Pollination-Dependent Nutrient Production</h3>
<p>Pollination-dependence of 115 crops (Klein, 2007), crop yields (Monfreda, 2008), and crop micronutrient content (USDA, 2011) were combined in an analysis to calculate pollination-dependent nutrient production (following Chaplin-Kramer, 2012) .</p>
</div>
<div class="modeling_right" >
<h2>Data</h2>
<p>All data displayed is publicly available <a href="http://ipbes-natcap-ecoshard-data-for-publication.ecoshard.org/">here</a></p>
<p>Full methods will be available upon publication, in the Supplementary information of <a href='https://science.sciencemag.org/lookup/doi/10.1126/science.aaw3372'>Chaplin-Kramer et al (2019)</a></p>
<h2>References</h2>
<ul>
<li>S. Diaz et al., Science. 359, 270–272 (2018).</li>
<li>S. Diaz et al., Curr. Opin. Environ. Sustain. 14, 1–16 (2015).</li>
<li>U. Pascual et al., Curr. Opin. Environ. Sustain. 26, 7–16 (2017).</li>
<li>I. M. D. Rosa et al., Multiscale scenarios for nature futures. Nat. Ecol. Evol. 1, 1416–1419 (2017).</li>
<li>See <a href="http://data.naturalcapitalproject.org/nightly-build/invest-users-guide/html/croppollination.html">InVEST Pollination User's Guide</a> for detailed explanation on the model.</li>
</ul>
</div>
</div>
<!--<br><br><img src="static/images/bee.jpg" alt="Image" style="opacity: 0.4; max-height: 20vh; object-fit: cover;">-->
</div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://unpkg.com/versor"></script>
<script>
if (!window.d3) document.write('<script src="js/lib/d3.min.js"><\/script>');
</script>
<script src="js/lib/topojson.min.js"></script>
<script src="js/navigation.js"></script>
<script src="js/main_poll.js"></script>
<script src="js/highRezMaps.js"></script>
</body>
</html>