/
index.html
140 lines (112 loc) · 6.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GlobalFungi 🍄</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&family=Open+Sans:wght@300;500;600;700;800&family=Pathway+Extreme:wght@100;400&family=VT323&display=swap" rel="stylesheet">
<!-- jquery -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> -->
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<!-- Heatmap Leaflet -->
<script src="https://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<!-- <script src="plugins/leaflet-heat.js"></script> -->
<!-- Leaflet marker cluster plugin -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
<script src="./plugins/leaflet.ajax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<script src="plugins/proj4-compressed.js"></script>
<script src="plugins/proj4leaflet.js"></script>
<!-- Time range slider Plugin-->
<link rel="stylesheet" href="forSlider/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="forSlider/jquery-ui.js"></script>
<!-- wms legend plugin -->
<link rel="stylesheet" href="./plugins/leaflet.wmslegend.css"/>
<script src="./plugins/leaflet.wmslegend.js"></script>
<!-- leaflet legend plugin -->
<link rel="stylesheet" href="./plugins/leaflet.legend.css"/>
<script src="./plugins/leaflet.legend.js"></script>
<!-- Maptiler -->
<link href="https://cdn.maptiler.com/maptiler-sdk-js/latest/maptiler-sdk.css" rel="stylesheet" />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/latest/maptiler-sdk.umd.js"></script>
<script src="https://cdn.maptiler.com/leaflet-maptilersdk/latest/leaflet-maptilersdk.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <div class="topbar">
<h1>GlobalFungi</h1>
</div> -->
<div class="header">
<h1 id="header">GlobalFungi</h1>
</div>
<div class="container">
<h1>GlobalFungi Map</h1>
<p id="howto">
We aimed to have a better cartographical representation of the variables of the GlobalFungi dataset (Větrovský T. et al, 2020, GlobalFungi, <a href="//globalfungi.com/">globalfungi.com</a>). While the distribution of all the fungi samples is available in point and hex bin map formats, <i>Amanita muscaria</i> is the fungi type we focused on for showing sample properties such as pH level and biome.
The user can understand the relationship between fungi samples and the environmental conditions and can check the properties of all the samples individually by clicking on each sample point. Additionally, the graphs explain the relationship between different environmental conditions such as temperature, precipitation, geographical distribution, and their impact on fungi distribution and pH level.
<!-- <br>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Integer nec magna quis sapien suscipit dignissim at quis ex.</li>
<li>Quisque ultricies velit eget dolor commodo, eu accumsan nisi ornare.</li>
<li>Duis nec urna sed mauris fermentum tristique id eget neque.
</li> -->
</p>
</div>
<input id="slide" type="range" min="0" max="1" step="0.1" value="0.8" onchange="updateOpacity(this.value)">
<div id="map">
<div class="sliderDiv" >
<p>
<label for="amount">Time range for all samples:</label>
<input class="sliderValue" type="text" id="amount" >
</p>
<div id="slider-range"></div>
</div>
</div>
<script src="heatMap.js"></script>
<script src="script.js"></script>
<h1>General Statistics of GlobalFungi Database</h1>
<div id="d3_items">
<div id="d3_hist">
<script src="./d3/d3_hist.js"></script>
<p> <br><br><br>
GlobalFungi dataset release 4 (20.7.2021). <br>
Actual number of samples in the database: 57,184.<br>
Actual number of studies included: 515.</p>
</div>
<div id="d3_scatter">
<script src="./d3/d3_scatterplot.js"></script>
<P>
Mean annual temperature (MAT) and mean annual precipitation (MAP) in the metadata were obtained from CHELSA database.
</P>
</div>
<div id="d3_plot">
<script src="./d3/d3_scatterplot2.js"></script>
<P>
Mean annual temperature (MAT) in the metadata were obtained from CHELSA database. pH values were obtained from samples.
</P>
</div>
</div>
<footer>
<div class="footer">
<p>Created by Phoebe Ly, Dilara Bozkurt, Zhenjiang Li for MSc Cartography, June 2023.</p>
</div>
</footer>
</body>
</html>