-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (114 loc) · 3.98 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="KEYWORDS" content="internet, development, HDI, Africa, time slider, d3, dendrogram, leaflet">
<title>Internet usage Africa</title>
<!-- CSS -->
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/leaflet.css"><!-- Import -->
<!-- JavaScript -->
<script src="./js/jquery-3.2.1.js"></script> <!-- Import -->
<script src="./js/d3.js"></script> <!-- Import -->
<script src="./js/leaflet.js"></script> <!-- Import -->
<script src="./js/leaflet-semicircle.js"></script><!-- Import -->
<script src="./js/rangeslider.js"></script> <!-- Import -->
<script src="./js/myJS.js"></script> <!-- In here are the functions used specificly for this page -->
<!-- GeoJSON -->
<script src="./data/capitals.geojson"></script>
<script src="./data/HDI.geojson"></script>
<script src="./data/water_bodies.geojson"></script>
<script src="./data/countryNames.geojson"></script>
</head>
<body>
<div id="timeslider">
<img id="play" src="./img/pause.svg">
<input id="slider" type="range" min="2000" max="2016" step="1" value="300"><br>
<output id="Year">2000</output>
</div>
<div id="map">
<div id="nav-mobile"> <!-- Switch between Map and Legend -->
</div>
</div>
<div id="legend">
<div id="nav-mobile"> <!-- Switch between Map and Legend -->
</div>
<div id="title"> <!-- Title -->
<div id="innerTitle">
<b>Development of Internet usage, population size and human development index in Africa between 2000 and 2016</b>
</div>
</div>
<div id="labels"> <!-- Labeling -->
<input type="checkbox" id="names">
<label for="names">Label country names<br></label>
<input type="checkbox" id="capitals">
<label for="capitals">Label country capitals<br></label>
</div>
<div id="types"> <!-- Types -->
<b>Types of Internet usage development</b>
<div id="lineChart">
</div>
<div id="selection">
<label for="NoTypes">Select no. of types </label>
<select id= "NoTypes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected>7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br>
</div>
<div id="dendrogram">
<label for="open">See the dendrogramm for more information </label>
<img id="open" src="./img/open.svg">
</div>
</div>
<div id="percentage"> <!-- Percentage -->
<div id="per_title">
<b>Symbol legend</b>
</div>
<div id="per_circle">
<img id="internet_legend" src="./img/Internet_Legend.svg">
</div>
<div id="per_description">
<label>A country with an internet development of type 1, internet usage of ~30% and 110 mio inhabitants</label>
</div>
</div>
<div id="population"> <!-- Population -->
<div id="popLabel">
<b>Do you want to know what the circle size stands for?</b>
</div>
<div id="circle">
<svg id="resize"></svg>
</div>
<div id="resultPop">
<label id="inh">= 186.00 mio</label><br>
<label id="inh_lab">inhabitants</label><br>
</div>
<div>
<p>Resize the circle to see the corresp. population! The map needs to be in full extent for a valid population size</p>
</div>
</div>
<div id="hdi"> <!-- HDI -->
<b>Human Development Index</b>
<img id="hdi_legend" src="./img/HDI_Legend.svg">
</div>
</div>
<!-- The Modal which overlays page when Dendrogram is watched-->
<!-- https://www.w3schools.com/howto/howto_css_modals.asp -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div id="modal-content" class="modal-content">
<span class="close">×</span>
</div>
</div>
</body>
</html>