-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexplore.html
179 lines (161 loc) · 5.88 KB
/
explore.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
---
layout: base
title: Explore the data
use-site-title: true
css:
- "/css/explore.css"
- "/css/skeleton.css"
- "/css/leaflet.css"
- "/css/introjs.min.css"
js:
- "/js/jquery-1.11.2.min.js"
- "/js/d3.min.js"
- "/js/leaflet.js"
- "/js/lodash.js"
- "/js/intro.min.js"
- "/js/explore/constants.js"
- "/js/explore/utils.js"
- "/js/explore/polar.js"
- "/js/explore/elevation.js"
- "/js/explore/month.js"
- "/js/explore/map.js"
- "/js/explore/dangers.js"
- "/js/explore/activities.js"
- "/js/explore/textual.js"
- "/js/explore/years.js"
- "/js/explore/app.js"
---
<div class="explore-container">
<h1 id="title">20 years of avalanche accidents 🇨🇭</h1>
<div id="demo-button">
<button type="button" class="btn btn-default" onclick="startTutorial()">Tutorial</button>
</div>
<div id="filter-selection-menu" data-step="2" data-intro="Filters are listed here, you can remove them by clicking on x. You also get info for the selected avalanche accident.">
<div id="filters" >
<h4>Filters</h4>
</div>
<div id="selection">
<h4>Selection</h4>
<dl></dl>
</div>
</div>
<div class="dashboard-container">
<div id="elevation"></div>
<div id="polar" data-step="1" data-intro="You can click on the dots, each represent a deadly avalanche. Drag and drop on ANY component to filter by a feature."></div>
<div id="month"></div>
<div id="textual"></div>
<div id="dangers" data-step="4" data-intro="Try to filter a danger level by clicking or drag and drop !"></div>
<div id="activities"></div>
<div id="years"></div>
<div id="map-widget" data-step="5" data-intro='You can visualize the maps 10 days before and 3 days after the accidents. You can view the "original link" with the link below...'>
<ul class="nav nav-tabs" id="tabs"></ul>
<div id="slider-and-info" class="hidden-stuff">
<p id="slide-date">empty</p>
<input type="range" min="0" max="100" value="50" class="slider" id="dateRange" style="width: 100%">
</div>
<div id="map"></div>
<div id="original-url" class="hidden-stuff">
<a target="_blank">Go to the original map</a>
</div>
</div>
</div>
<div id="legend-menu">
<h4>Color key</h4>
<h5>Statistics</h5>
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#c0392b" transform="translate(6,6)"/>
</svg>accidents
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#2c3e50" transform="translate(6,6)"/>
</svg>deaths
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#ff9900" transform="translate(6,6)"/>
</svg>caught
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#1abc9c" transform="translate(6,6)"/>
</svg>burried
<br/>
<br/>
<h5>Danger level</h5><svg height="16" width="16" class="selectKeyPoint selected" onclick="updateCategorySelected('danger')" id="dangerSelect">
<circle r=5 fill='grey' transform="translate(8,8)"/>
</svg>
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#ccff66" transform="translate(6,6)"/>
</svg>level 1
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#ffff00" transform="translate(6,6)"/>
</svg>level 2
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#ff9900" transform="translate(6,6)"/>
</svg>level 3
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#ff0000" transform="translate(6,6)"/>
</svg>level 4
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#9102ff" transform="translate(6,6)"/>
</svg>level 5
<br/>
<br/>
<div data-step="3" data-intro="You can click on the circle to change the category color of the avalanche circles.">
<h5>Activity type</h5><svg height="16" width="16" class="selectKeyPoint" onclick="updateCategorySelected('activity')" id="activitySelect">
<circle r=5 fill='grey' transform="translate(8,8)"/>
</svg>
</div>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#2ecc71" transform="translate(6,6)"/>
</svg>Backcountry touring
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#9b59b6" transform="translate(6,6)"/>
</svg>Off-piste skiing
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill="#34495e" transform="translate(6,6)"/>
</svg>Transportation
<br/>
<br/>
<h5>Snow level</h5>
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#d5fcfc' transform="translate(6,6)"/>
</svg>5-20 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#a8d9f1' transform="translate(6,6)"/>
</svg>20-50 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#79a1e5' transform="translate(6,6)"/>
</svg>50-80 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#4459d7' transform="translate(6,6)"/>
</svg>80-120 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#2f24a2' transform="translate(6,6)"/>
</svg>120-200 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#5b20c4' transform="translate(6,6)"/>
</svg>200-300 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#591032' transform="translate(6,6)"/>
</svg>300-400 cm
<br/>
<svg height="12" width="12" class="keyPoint">
<circle r=5 fill='#460811' transform="translate(6,6)"/>
</svg>> 400 cm
<br/>
</div>
</div>