-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplots.html
339 lines (309 loc) · 23.5 KB
/
plots.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Niamoto - Présentation des peuplements</title>
<link rel="stylesheet" href="js/vendor/tailwindcss/2.2.19_dist_tailwind.css">
<link rel="stylesheet" href="js/vendor/leaflet/1.9.4_leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
.custom-button:hover {
background-color: #e2e8f0; /* Tailwind gray-200 hover color */
}
</style>
<style>
.gauge {
height: 349px;
}
ul {
list-style-type: none;
}
.loader-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<nav class="nav-bg p-4 fixed w-full top-0 shadow-md z-50 custom-nav">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<a id="home-link" class="inline-flex items-center py-2 px-4 text-white no-underline" href="#" data-link="index.html">
<span class="site-title">Niamoto</span>
</a>
</div>
<div class="block lg:hidden">
<button id="nav-toggle"
class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0zm0 6h20v2H0zm0 6h20v2H0z" />
</svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content">
<ul class="list-reset lg:flex justify-end flex-1 items-center">
<li class="relative group mr-3">
<a class="nav-link inline-block py-2 px-4 text-white no-underline" href="#" data-link="index.html">
<i class="fas fa-home menu-icon"></i>Accueil
</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block bg-white shadow-lg rounded-md z-50 w-48 custom-dropdown">
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="index.html#introduction">Introduction</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="index.html#project">Projet</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="index.html#objective">Objectifs</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="index.html#context">Contexte</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="index.html#flora">Flore</a></li>
</ul>
</li>
<li class="relative group mr-3">
<a class="nav-link inline-block py-2 px-4 text-white no-underline" href="#" data-link="methodology.html">
<i class="fas fa-flask menu-icon"></i>Méthodologie
</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block bg-white shadow-lg rounded-md z-50 w-48 custom-dropdown">
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="methodology.html#preambule">Préambule</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="methodology.html#methodes">Nos méthodes</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="methodology.html#faq">FAQ</a></li>
</ul>
</li>
<li class="relative group mr-3">
<a class="nav-link inline-block py-2 px-4 text-white no-underline" href="#" data-link="trees.html">
<i class="fas fa-leaf menu-icon"></i>Arbres
</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block bg-white shadow-lg rounded-md z-50 w-48 custom-dropdown">
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="trees.html#preambule">Préambule</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="trees.html#learnTaxon">Étudier les
arbres</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="trees.html#taxon">Les arbres de
Nouvelle-Calédonie</a></li>
</ul>
</li>
<li class="relative group mr-3">
<a class="nav-link inline-block py-2 px-4 text-white no-underline" href="#" data-link="plots.html">
<i class="fas fa-map-marked-alt menu-icon"></i>Peuplements
</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block bg-white shadow-lg rounded-md z-50 w-48 custom-dropdown">
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="plots.html#preambule">Préambule</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="plots.html#learnPlot">Étudier les
peuplements forestiers</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="plots.html#plot">Les
peuplements forestiers de Nouvelle-Calédonie</a></li>
</ul>
</li>
<li class="relative group mr-3">
<a class="nav-link inline-block py-2 px-4 text-white no-underline" href="#" data-link="forests.html">
<i class="fas fa-tree menu-icon"></i>Forêt
</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block bg-white shadow-lg rounded-md z-50 w-48 custom-dropdown">
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="forests.html#preambule">Préambule</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="forests.html#learnForest">Étudier les
forêts</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="forests.html#forestPN">La forêt de la
province Nord</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="forests.html#forestPS">La forêt de la
province Sud</a></li>
</ul>
</li>
<li class="relative group mr-3">
<a class="nav-link inline-block py-2 px-4 text-white no-underline" href="#" data-link="resources.html">
<i class="fas fa-book menu-icon"></i>Ressources
</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block bg-white shadow-lg rounded-md z-50 w-48 custom-dropdown">
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="resources.html#equipe">L'équipe</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="resources.html#article">Articles</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="resources.html#academic">Académique</a></li>
<li><a class="py-2 px-4 block whitespace-no-wrap hover:bg-gray-100" href="#" data-link="resources.html#media-production">Médias</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
document.getElementById('nav-toggle').onclick = function () {
document.getElementById('nav-content').classList.toggle('hidden');
};
// Function to adjust the navigation links based on page depth
function adjustNavLinks(depth) {
document.querySelectorAll('a[data-link]').forEach(link => {
link.href = depth + link.getAttribute('data-link');
});
}
// Adjust the navigation links based on the depth
adjustNavLinks("");
</script>
<style>
.site-title {
font-family: 'Arial Black', sans-serif; /* Custom font for a bold effect */
font-size: 2rem; /* Increased font size */
text-transform: uppercase; /* Uppercase letters for visibility */
letter-spacing: 2px; /* Spacing between letters */
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); /* Text shadow for better visibility */
transition: color 0.3s; /* Smooth transition for hover effect */
}
.site-title:hover {
color: #ffdd57; /* Change color on hover */
}
.text-contour {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.nav-bg {
background-color: rgba(34, 139, 34, 0.8); /* Fond vert semi-transparent */
transition: background-color 0.3s;
}
.nav-bg:hover {
background-color: rgba(34, 139, 34, 1); /* Fond vert opaque au survol */
}
.group:hover .group-hover\:block {
display: block;
}
.custom-nav {
z-index: 500;
}
.custom-dropdown {
z-index: 500;
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.2); /* Fond blanc transparent au survol */
border-radius: 4px;
}
.menu-icon {
margin-right: 8px;
}
</style>
<div class="flex">
<div class="w-full">
<div class="container mx-auto mt-20 py-4 max-w-4xl">
<div class="text-center mb-12 mt-10">
<h1 class="text-4xl font-bold text-green-800">Présentation des peuplements</h1>
</div>
<section class="mb-12">
<div class="flex justify-center mb-8">
<a href="plot/1.html" class="bg-blue-500 text-white py-3 px-6 rounded-lg shadow-lg hover:bg-blue-700">
Accéder aux données <span class="ml-2 badge badge-secondary"><span class="fa fa-database" aria-hidden="true"></span></span>
</a>
</div>
</section>
<section id="preambule" class="mb-12">
<div class="container mx-auto">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-3xl font-semibold mb-6 text-green-700 border-b-2 border-green-500 pb-2">Préambule</h2>
<p class="text-gray-700 leading-relaxed mb-4"><b>Le peuplement est l'ensemble des populations des espèces appartenant souvent à un même groupe taxonomique, qui présentent une écologie semblable et occupent le même habitat. En forêt, le peuplement d’arbres représente l’ensemble des arbres toutes espèces confondues.</b></p>
<p class="text-gray-700 leading-relaxed mb-4">Dans la pratique, l’étude d’un peuplement d’arbres impose de définir une surface bornée qui matérialise une fraction de la forêt. La méthode la plus couramment employée pour étudier ces peuplements consiste à faire un inventaire forestier par échantillonnage systématique, c’est-à-dire de délimiter dans la forêt une parcelle dans laquelle tous les arbres sont mesurés.<i class="fab fa-swap-opacity .fad"></i></p>
</div>
</div>
</div>
</section>
<section id="learnPlot" class="mb-12">
<div class="container mx-auto">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-3xl font-semibold mb-6 text-green-700 border-b-2 border-green-500 pb-2">Étudier les peuplements forestiers</h2>
<p class="text-gray-700 leading-relaxed mb-4">L’étude des peuplements forestiers a pour objectif de comprendre les relations et les associations entre les différents individus au sein d’une même population ou entre différentes populations. En outre, l’étude des peuplements offre l’opportunité de comparer des échantillons de forêt provenant de milieux différents et d’évaluer ainsi leur différence au regard des conditions de l’environnement. En Nouvelle-Calédonie, nous utilisons des inventaires dont la taille, la forme et la disposition sont adaptées aux besoins de chaque étude. Néanmoins tous ces inventaires sont compilés dans le réseau NC-PIPPN (<em><i>New Caledonian Plant Inventories and Permanent Plot Network</i></em>), initié par l’IRD en 2005, et les données sont partagées au sein de réseaux internationaux tels que <a href="https://www.gfbinitiative.org/" target="_blank" class="text-blue-500 underline"><u>The Global Forest Biodiversity Initiative</u></a> et <a href="https://www.idiv.de/en/sdiv/working_groups/wg_pool/splot/splot_database.html" target="_blank" class="text-blue-500 underline"><u>The sPlot database</u></a>.</p>
<figure class="mb-6 flex justify-center">
<img class="img-fluid rounded shadow-md" id="map" src="files/plot/img/carte.png" alt="Map Image">
</figure>
<p class="text-gray-700 leading-relaxed mb-4">À ce jour, le réseau NC-PIPPN cumule près de 40 ha de forêts inventoriées, entre 10 et 1 300 m d’altitude, dans un intervalle de pluviométrie compris entre 1 et 4,5 m de pluie par an. Dans ce réseau, 222 parcelles ont été mises en place sur les substrats ultramafiques, pour une superficie cumulée de 16,5 ha. Il contient plus de 70 000 individus appartenant à 98 familles, 279 genres et 998 espèces distinctes.</p>
<p class="text-gray-700 leading-relaxed mb-4">Chaque inventaire contient une liste exhaustive d’individus-arbres comptabilisés sur une portion de forêt, en considérant deux variables :</p>
<ul class="list-disc pl-5 mb-4">
<li><u>une superficie fixe</u>, matérialisée sous la forme de cercle ou de rectangle dans laquelle tous les individus arbres sont recensés</li>
<li><u>un diamètre minimal</u> (= DBH) mesuré à hauteur de poitrine à partir duquel l’individu est comptabilisé dans l’inventaire.</li>
</ul>
<p class="text-gray-700 leading-relaxed mb-4">Actuellement, il regroupe 509 différents types de dispositifs, ou parcelles :</p>
<ul class="list-disc pl-5 mb-4">
<li>212 parcelles carrées de 20 x 20 m (DBH> 5 cm, aire = 0,04 ha)</li>
<li>130 parcelles rondes de 10 m de rayon (DBH>10 cm, aire = 0,03 ha)</li>
<li>125 parcelles rondes de rayon 11.28 m (DBH>10 cm, aire = 0,04 ha)</li>
<li>21 parcelles carrées de 100 x 100 m (DBH>10 cm, aire = 1 ha)</li>
<li>21 parcelles carrées multiples de 10 x 10 m (DBH>5 cm, aire = 0.01 à 0.05 ha)</li>
</ul>
<figure class="mb-6 flex justify-center">
<img class="img-fluid rounded shadow-md" id="tree1" src="files/plot/img/tree1.png" alt="Tree Image 1">
</figure>
<p class="text-gray-700 leading-relaxed mb-4">Dans chacune des parcelles d’inventaire, tous les arbres sont numérotés selon une série unique, leur diamètre (DBH) est relevé et leur nom scientifique est identifié par les botanistes, soit directement sur le terrain soit en comparaison avec les échantillons stockés dans l’herbier de Nouméa (NOU). Le taux d’identification moyen du réseau NC-PIPPN est de 95% au rang spécifique ou inférieur.</p>
<p class="text-gray-700 leading-relaxed mb-4">Les informations relevées dans ces dispositifs varient en fonction des objectifs de chaque étude. Sur les parcelles de 1 ha, chaque arbre est positionné en X, Y par rapport au coin de la parcelle et sa position verticale est définie de manière qualitative selon 4 classes (sous-bois, sous-canopée, canopée et émergent). Par ailleurs la hauteur d’un arbre est mesurée dans chaque sous-carré de 100 m² (e.g. 100 hauteurs d’arbre par parcelle) à l’aide d’un laser. Depuis 2014 des traits fonctionnels supplémentaires sont relevés sur un échantillon représentatif d’individus-arbres : densité de bois (WD), surface foliaire (LA), surface foliaire spécifique (SLA), matière sèche foliaire et épaisseur de la feuille (LDMC).</p>
<p class="text-gray-700 leading-relaxed mb-4">La mise en place d’une parcelle de 1 ha représente un effort important sur le terrain, il faut compter environ 7 jours de travail pour 5-7 personnes.</p>
<figure class="mb-6 flex justify-center">
<img class="img-fluid rounded shadow-md" id="compo" src="files/plot/img/compo.png" alt="Compo Image">
</figure>
</div>
</div>
</div>
</section>
<section id="plot" class="mb-12">
<div class="container mx-auto">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-3xl font-semibold mb-6 text-green-700 border-b-2 border-green-500 pb-2">Les peuplements forestiers de NC</h2>
<p class="text-gray-700 leading-relaxed mb-4">Le réseau de parcelle NC-PIPPN a permis d’obtenir de nombreuses informations sur les peuplements forestiers de la province Nord :</p>
<ul class="list-disc pl-5 mb-4">
<li>La densité moyenne d’individus-arbres est de 1 250 tiges/ha, évoluant entre 546 (calcaires de Koumac) et 1 667 (parcelle de l’Aoupinié). Ces valeurs de densités sont parmi les plus élevées au monde, seulement atteintes localement en Australie tropicale.</li>
<li>La richesse spécifique (diversité alpha), c’est-à-dire le nombre d’espèces d’arbres à l’hectare varie de 33 (calcaires de Koumac) à 111 (parcelle du Mt Arago). Cette richesse à l’hectare est faible comparativement aux forêts tropicales continentales qui peuvent dépasser 400-500 espèces d’arbres/ha. La diversité (indice de shannon) s’échelonne entre 1,82 (parcelle de Kouaoua) et 3,98 (parcelle du Mt Arago).</li>
<li>Le taux d’endémisme moyen des espèces d’arbres dans les parcelles est de 89 %, variant entre 81 % (parcelle de Forêt Plate) et 98 % (parcelle de l’Aoupinié), ce qui représente une valeur moyenne supérieure aux autres forêts de la sous-région.</li>
<li>Le nombre de palmiers et de fougères arborescentes à l’hectare est très élevé, pour ce qui est des individus comme des espèces, ce qui représente une particularité des forêts de la Nouvelle-Calédonie. La densité de fougères arborescentes (0-113/ha) est unique dans le Pacifique.</li>
<li>Sur les 617 espèces contenues dans les 21 parcelles de 1 ha, 122 (20 %) ne sont connues que d’un individu (singleton) tandis que seulement 36 espèces (6 %) représentent 50 % de la totalité des 24 473 arbres de ces parcelles. Par ailleurs et en moyenne, 1/4 des espèces ne compte qu’un seul individu (singleton) par parcelle.</li>
<li>La hauteur de la canopée varie entre 8 m (sommet de l’Aoupinié et du Paoua) et 18 m (calcaires de Koumac et Wekori).</li>
<li>Le DBH median varie de 12 à 19 cm selon les parcelles tandis que le DBH maximal est de 2,5 m (e.g. <i>Ficus obliqua</i>, Moraceae, parcelle de Ateou). Cependant 3/4 des individus-arbres ne dépassent pas 21 cm de DBH ce qui représente une valeur très faible et qui qualifie les peuplements forestiers de la Nouvelle-Calédonie comme étant constitués d’une majorité de petites tiges.</li>
<li>L’aire basale varie entre 19,25 m²/ha (parcelle de Paeoua) et 74,81 m²/ha (parcelle de Ateou). La combinaison entre la densité de tige, la hauteur de la canopée et la densité du bois produit une biomasse standard, comprise entre 200 et 450 t/ha ce qui s’inscrit dans la fourchette standard des valeurs de biomasse enregistrées dans les forêts tropicales.</li>
<li>La dissimilarité floristique (diversité-beta) entre les parcelles est extrêmement élevée. Elle varie entre 56 % et 98 % ce qui signifie que les deux parcelles les plus similaires du réseau NC-PIPPN ont 44 % d’espèces en commun. Par ailleurs, cette dissimilarité ne s’explique pas par la proximité géographique des parcelles ce qui représente une propriété unique des forêts de la Nouvelle-Calédonie dans le Pacifique. Le type de sol, l’altitude et les précipitations sont les principaux moteurs environnementaux de cette dissimilarité.</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<footer class="bg-green-700 text-white p-4 mt-8">
<div class="container mx-auto">
<div class="flex justify-center mb-4">
<div class="bg-white p-2 rounded-lg shadow-md flex justify-center">
<figure class="mx-2"><img class="img-fluid" src="files/ps_100.png"></figure>
<figure class="mx-2"><img class="img-fluid" src="files/pn_100.png"></figure>
<figure class="mx-2"><img class="img-fluid" src="files/amap_100.png"></figure>
<figure class="mx-2"><img class="img-fluid" src="files/herbarium_100.png"></figure>
<figure class="mx-2"><img class="img-fluid" src="files/iac_100.png"></figure>
<figure class="mx-2"><img class="img-fluid" src="files/ird_100.png"></figure>
<figure class="mx-2"><img class="img-fluid" src="files/cirad_100.png"></figure>
</div>
</div>
<div class="text-center">
<p>Niamoto - Portail de la forêt de Nouvelle-Calédonie</p>
<a class="inline-block py-2 px-4 text-white no-underline" href="https://github.com/niamoto/niamoto" target="_blank">
<span class="fab fa-github fa-lg" aria-hidden="true"></span> Github
</a>
</div>
</div>
</footer>
<script src="js/vendor/chart/4.4.2_chart.js"></script>
<script src="js/vendor/d3/7.8.5_d3.js"></script>
<script src="js/vendor/jquery/3.6.0_jquery.js"></script>
<script src="js/vendor/raphael/2.3.0_raphael.js"></script>
<script src="js/vendor/justgage/1.6.1_justgage.js"></script>
<script src="js/vendor/leaflet/1.9.4_leaflet.js"></script>
</body>
</html>