-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (158 loc) · 7.23 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
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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-142411721-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-142411721-1');
</script>
<script>
let isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox == true){
alert('The web app is not supported by Firefox. Please use modern Desktop versions of Chrome, Safari, Opera')
}
if (screen.width <= 760){
alert('The web app does not support devices with low screen resolution, such as mobile phones. Please use use modern Desktop versions of Chrome, Safari, Opera')
}
</script>
<meta charset="utf-8">
<meta property="og:url" content="http://geneticgeography.com/index.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Genetic Geography of Terrestrial Mammals" />
<meta property="og:description" content="Interactive exploration of global patterns of mammal biodiversity and its drivers" />
<meta property="og:image" content="http://geneticgeography.com/img/pageThumb.png" />
<script src='js/d3.v5.js'></script> <!--https://d3js.org/ -->
<script src='js/d3-geo-projection.v2.min.js'></script> <!--https://d3js.org/ -->
<script src='js/topojson.js'></script><!-- https://unpkg.com/topojson@3 -->
<script src='js/strabo.js'></script><!-- https://rawgit.com/spyrostheodoridis/strabo/master -->
<script src='js/simple-statistics.min.js'></script><!-- https://unpkg.com/[email protected]/dist -->
<link rel='stylesheet' type='text/css' href='dashBoard.css'>
<title>Genetic Geography</title>
</head>
<body>
<div class="wrapper">
<div class="cont pageTitle">Genetic Geography of Terrestrial Mammals</div>
<div class="cont cmecLogo">
<span><b>Centre for Macroecology, Evolution and Climate</b><br>Globe Institute, University of Copenhagen</span>
<img src="img/cmec.png" />
</div>
<div class='cont mainMap'>
<button type="button" class='zoomInMain'>+</button>
<button type="button" class='zoomOutMain'>-</button>
</div>
<div class='cont secMap'>
<button type="button" class='zoomInSec'>+</button>
<button type="button" class='zoomOutSec'>-</button>
</div>
<div class='cont controls'>
<div class='ctrHeader a'>Data set</div>
<div class='contr dataChoose'>
<div class='locusLabel'>
<span>Gene</span>
<select class='locusSelect'>
<option value='cytb'>cytb</option>
<option value='co1'>co1</option>
</select>
</div>
<div class='scaleLabel'>
<span>Scale</span>
<select class='scaleSelect'>
<option value='grid'>Grid</option>
<option value='wallace'>Zoogeographic</option>
</select>
</div>
</div>
<div class='ctrHeader b'>Subset</div>
<div class='contr subsetChoose'>
<div class='taxonCoverLabel'>Min taxonomic coverage (%)
<div class='sliderTaxonCoverCont'></div>
</div>
<div class='seqNumberLabel'>Min number of sequences
<div class='sliderSeqNumberCont'></div>
</div>
<label class='orButton'>
<input name="boolBut" class='booleanButton' type="radio" checked value='or'/>
<span style="vertical-align: middle;">or</span>
</label>
<label class='andButton'>
<input name="boolBut" class='booleanButton' type="radio" value='and'/>
<span style="vertical-align: middle;">and</span>
</label>
</div>
<div class='ctrHeader c'>Variables</div>
<div class='contr variableChoose'>
<div class='responseLabel'>
<span>Response (y)</span>
<select class='responseSelect'>
<option value='GD'>Genetic diversity</option>
<option value='GDsqrt'>Genetic diversity (√)</option>
</select>
</div>
<div class='predictorLabel'>
<span>Independent (x)</span>
<select class='predictSelect'>
<option value='PD'>Phylogenetic diversity</option>
<option value='spRichness'>Species richness</option>
<option value='tsTrend'>Temperature trend</option>
<option value='tsVar'>Temperature variability</option>
<option value='prTrend'>Precipitation trend</option>
<option value='prVar'>Precipitation variability</option>
<option value='HumanOld'>Historical human</option>
<option value='HumanNew'>Recent human</option>
<option disabled="disabled">----</option>
<option value='gdSeqs'>Sampled sequences</option>
<option value='gdTaxa'>Sampled species</option>
</select>
</div>
</div>
<div class='ctrHeader d'>Actions</div>
<div class='contr applyButtons'>
<div id='btnCont'>
<button type="button" class='updateBut'>Update</button>
</div>
<a id='downButtonCSV' download>
<button type="button" class='downloadButCSV'>Get csv</button>
</a>
<a id='downButtonJSON' download>
<button type="button" class='downloadButJSON'>Get geojson</button>
</a>
<a id='downButtonSeqs' download>
<button type="button" class='downloadButSeqs'>Get sequences</button>
</a>
</div>
</div>
<div class='cont infoPanel'>
<div class='infoHead spatialUnitA'>Spatial unit summary</div>
<div class='info spatialUnitB'></div>
<div class='infoHead taxaA'><b>Genetic diversity </b> and <span style='color: grey; font-weight:bold;'>sampled species </span> per mammalian order</div>
<div class='info taxaB'>
<div class='order 1'></div>
<div class='order 2'></div>
<div class='order 3'></div>
<div class='order 4'></div>
<div class='order 5'></div>
<div class='order 6'></div>
<div class='order 7'></div>
<div class='order 8'></div>
<div class='order 9'></div>
<div class='order 10'></div>
<div class='order 11'></div>
<div class='order 12'></div>
</div>
</div>
<div class='cont xy'></div>
<div class="cont footer">
<div class="linkContainer">
<a id="gitLink" href="https://github.com/spyrostheodoridis/">
<img id="gitLogo" src="img/github.png"></img>
<span>spyrostheodoridis</span>
</a>
</div>
<span style="color: black; font-size:1.6vmin;">Data from Theodoridis et al. Evolutionary history and past climate change shape the distribution of genetic diversity in terrestrial mammals, 2020 <i>Nat. Comm.</i></span><span> </span>
</div>
</div>
</body>
<script src="js/geneticGeography.js"></script></html>