-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtrees.html
366 lines (336 loc) · 23.4 KB
/
trees.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
<!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 arbres</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 arbres</h1>
</div>
<section id="Intro" class="mb-12">
<div class="flex justify-center mb-8">
<a href="taxon/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>L’arbre est apparu autour du dévonien (env. 360 millions d’années) et cette forme verticale serait le résultat de compétition entre les végétaux vis-à-vis de l’accès à la lumière.</b></p>
<figure class="mb-6 flex justify-center">
<img class="img-fluid rounded shadow-md" id="tree" src="files/taxon/img/tree.png" alt="Tree Image">
</figure>
<p class="text-gray-700 leading-relaxed mb-4">
L’arbre est constitué d’un tronc et de branches capables de produire du bois, tissu végétal formé par un mélange de lignine, de cellulose et d’hémicellulose. Si toutes les plantes, même les herbacées, produisent de la lignine pour assurer leur rigidité et permettre leur croissance en hauteur, seuls les arbres ont une croissance en épaisseur grâce à la présence de méristèmes et de tissus secondaires.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
Dans ce travail, cette définition stricte de l’arbre est élargie à la notion de plante arborescente qui regroupe toutes les plantes érigées, autoportantes, qui peuvent atteindre une hauteur de 5 m et un diamètre de 10 cm à 1.3 m de hauteur. Concrètement cette définition conduit à regrouper avec les arbres, certains palmiers, pandanus et quelques fougères arborescentes.
</p>
</div>
</div>
</div>
</section>
<section id="learnTaxon" 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 arbres</h2>
<figure class="mb-6 flex justify-center">
<img class="img-fluid rounded shadow-md" id="tree_mesure" src="files/taxon/img/tree_mesure.png" alt="Tree Measurement">
</figure>
<figure class="mb-6 flex justify-center">
<img class="img-fluid rounded shadow-md" id="density" src="files/taxon/img/density.png" alt="Density Image">
</figure>
<p class="text-gray-700 leading-relaxed mb-4">
L’étude des arbres est un vaste champ qui relève de disciplines diverses. Les informations relevées peuvent concerner l’individu lui-même au travers de la mesure de différents organes ou sa localisation dans la forêt et plus largement vis-à-vis de l’environnement. La compilation de ces informations dans les bases de données et leur intégration dans des modèles d’analyses permettent de mieux cerner l’auto-écologie des espèces et de fournir des portraits quant à leur place dans le fonctionnement de la forêt. Cette acquisition est perpétuelle et chaque observation, même sur les espèces les plus communes, vient renforcer notre connaissance générale de ces organismes.
</p>
<p class="text-gray-700 leading-relaxed mb-4">
Dans le projet Niamoto, nous capitalisons toutes ces données au fur et à mesure de nos travaux en forêt, notamment lors de la mise en place des parcelles. Le nom scientifique (taxon) constitue la clef de toutes les études. La précision de l’identification est donc fondamentale puisqu’elle conduit à regrouper toutes les autres données collectées. Elle est réalisée par des botanistes experts de la flore de Nouvelle-Calédonie qui identifient directement l’arbre sur le terrain ou prélèvent un échantillon pour l’identifier ultérieurement au laboratoire en le comparant aux spécimens stockés dans l’herbier de la Nouvelle-Calédonie (NOU). Dans certains cas, des morceaux de feuilles sont desséchés lentement pour permettre de procéder à des analyses génétiques ultérieures. Le nom scientifique est conforme au référentiel <a href="http://publish.plantnet-project.org/project/florical_fr" target="_blank" class="text-blue-500 underline"><u>Florical</u></a> qui suit la classification taxonomique internationale, notamment l’<a href="http://www.mobot.org/MOBOT/research/APweb/" target="_blank" class="text-blue-500 underline"><u>APG IV</u></a> pour les angiospermes.
</p>
<table class="table-auto w-full mb-4">
<thead>
<tr>
<th class="px-4 py-2 border-b-2 border-green-500 bg-gray-100">Catégorie</th>
<th class="px-4 py-2 border-b-2 border-green-500 bg-gray-100">Type de données</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">Nom scientifique</td>
<td class="border px-4 py-2">Taxon selon référentiel Florical</td>
</tr>
<tr>
<td class="border px-4 py-2">Localisation</td>
<td class="border px-4 py-2">Coordonnées, strate (sous-bois, sous-canopée, canopée, émergent)</td>
</tr>
<tr>
<td class="border px-4 py-2">État</td>
<td class="border px-4 py-2">Diamètre, Hauteur, Nombre de tiges, Phénologie (stérile, bouton, fleur, fruit)</td>
</tr>
<tr>
<td class="border px-4 py-2">Traits fonctionnels</td>
<td class="border px-4 py-2">Densité de bois (WD), Surface foliaire (LA), Surface foliaire spécifique (SLA), Épaisseur de la feuille (LT), Matière sèche foliaire (LDMC), Épaisseur d’écorce (TB)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section id="taxon" 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 arbres de Nouvelle-Calédonie</h2>
<figure class="mb-6 flex justify-center">
<div class="mx-auto d-block">
<img class="img-fluid rounded shadow-md" id="graph" src="files/taxon/img/graph.png" alt="Graph Image">
</div>
</figure>
<p class="text-gray-700 leading-relaxed mb-4"><strong>Les arbres comptent actuellement 1 208 taxons, soit environ 1/3 de la flore indigène de la Nouvelle-Calédonie</strong>, répartis dans 1 146 espèces, 276 genres et 92 familles. Ces arbres sont des gymnospermes (38), des monocotylédones (29 palmiers et 13 pandanus), des fougères arborescentes (8) et des angiospermes (1 162) parmi lesquelles 71 angiospermes basales. Ils sont pour la plupart endémiques (1 093 taxons, soit plus de 90 % de la flore des arbres) et parmi eux 220 appartiennent à des genres endémiques et 8 aux familles endémiques de Nouvelle-Calédonie : Amborellaceae (1), Oncothecaceae (2) et Phellinaceae (5).</p>
<div class="bullet">
<ul class="list-disc pl-5 mb-4">
<li>En moyenne, la flore des arbres compte environ 58 % de taxons communs selon les sept formes de rareté établies par Rabinowitz, c’est-à-dire en considérant à la fois l’étendue géographique, l’étendue de la niche écologique et la densité locale des populations. À l’opposé moins de 3 % des arbres sont très rares selon ces trois composantes (cf. Delassus, 2018).</li>
<li>Environ 120 taxons d’arbres sont hyper-dominants et comptent pour plus de 50 % de notre jeu d’occurrence de 131 518 arbres. À l’inverse, les 776 taxons les moins fréquents ne comptent que pour 20 % de ce jeu d’occurrence (cf. Birnbaum et al., 2015).</li>
<li>La hauteur moyenne mesurée sur 3 566 arbres appartenant à 385 taxons est de 12.1 m [2.7-44.2 cm]. Une vingtaine de taxons peuvent dépasser la hauteur de 30 m (e.g. <i>Semecarpus atra, Cunonia austrocaledonica, Apodytes clusiifolia, Kermadecia sinuata, Diospyros macrocarpa, Agathis moorei</i>) et seul le genre <i>Auraucaria</i> dépasse la hauteur de 40 m (cf. Blanchard, 2016).</li>
<li>Le diamètre moyen (DBH > 10 cm) mesuré sur 48 220 arbres appartenant à 999 taxons est de 18.8 cm [10-249.9 cm]. Une trentaine de taxons atteignent 1 m de diamètre (e.g. <i>Geissois racemosa</i>, <i>Arillastrum gummiferum</i>, <i>Montrouziera cauliflora</i>, <i>Planchonella sphaerocarpa</i> ou encore <i>Agathis lanceolata</i>).</li>
<li>La surface foliaire (LA) moyenne mesurée sur 906 arbres appartenant à 232 taxons est de 61.8 cm<sup>2</sup> [0.27-1322]</li>
<li>La surface foliaire spécifique (SLA) moyenne mesurée sur 904 arbres appartenant à 232 taxons est de 10.2 m<sup>2</sup>.kg<sup>-1</sup> [3.1- 46.8]</li>
<li>L'épaisseur moyenne des feuilles (LT) mesurée sur 903 arbres appartenant à 230 taxons est de 282.4 μm [92-629.8]</li>
<li>La matière sèche moyenne des feuilles (LDMC), ou rapport entre le poids sec et le poids frais des feuilles, calculée sur 911 appartenant à 234 arbres est de 397.3 mg.g<sup>-1</sup> [114.3 - 659.1]</li>
<li>La densité moyenne de bois (WD) mesurée sur 2783 arbres appartenant à 435 taxons est de 0.66 g.cm<sup>3</sup> [0.2 - 1.1 g.cm<sup>3</sup>]</li>
<li>L'épaisseur moyenne d'écorce (BT) mesurée sur 3624 arbres appartenant à 220 taxons est de 5.75 mm [0.05 - 37.5 cm]</li>
</ul>
</div>
</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>