-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
226 lines (215 loc) · 13.1 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
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="dist/css/app.css">
<title>Radi-AB: Radiation exposure monitor for Canada</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Radi-AB: <small><i>Radiation exposure monitor for Canada</i></small></a>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row mt-5">
<div class="col-lg-3 col-md-4">
<div class="card">
<div class="card-body">
<button type="button" class="btn btn-primary btn-block mb-3" data-toggle="modal" data-target="#instructions">
Usage Instructions
</button>
<form id="map-input">
<select class="custom-select mb-3" id="date-picker">
<option selected>Select date</option>
</select>
<legend class="col-form-label"><strong>Available Layers:</strong></legend>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input filter" id="factor-neutron" name="neutron_radiation" checked>
<label class="custom-control-label" for="factor-neutron">Neutron Radiation</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input filter" id="factor-cosmic" name="cosmic_radiation" checked>
<label class="custom-control-label" for="factor-cosmic">Cosmic Radiation</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input filter" id="factor-terrestrial" name="terrestrial_radiation" checked>
<label class="custom-control-label" for="factor-terrestrial">Terrestrial Radiation</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input filter" id="factor-inhalation" name="inhalation_radiation" checked>
<label class="custom-control-label" for="factor-inhalation">Inhalation Radiation</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input filter" id="factor-radionuclide" name="radionuclide_radiation" checked>
<label class="custom-control-label" for="factor-radionuclide">Radionuclide Radiation</label>
</div>
</form>
</div>
</div>
<div class="mt-3 px-1 py-1">
Data made available by:
<img src="dist/img/[email protected]" class="img-fluid mt-2">
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="card">
<div class="card-body">
<div id="map"></div>
<div class="alert alert-info mb-0 px-2 py-1" id="map-alert">
<p class="mb-0">
<strong>Note:</strong> The heat map uses <a href="https://en.wikipedia.org/wiki/Rainbow#Number_of_colours_in_spectrum_or_rainbow" target="_blank">the rainbow color scale</a> in which violet indicates lowest value and red shows the highest.
<br> All values are relative and compared to each other only; and not with the safe rate. Thus, <strong>red does not mean any danger at all</strong>.
<br> The pins show <i>the cumulative amount of <strong>selected</strong> radiation types</i> for each city.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5 d-none" id="info">
<div class="col-md-4">
<div class="card" id="iss-comparison">
<img src="" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">On your selected date, Canadian astronauts in International Space Station were
exposed to <strong class="value"></strong> radiation. <a
href="https://twitter.com/search?q=SavePlanetEarth"><strong>#SavePlanetEarth</strong></a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="alert" id="conclusion" role="alert" data-safe="0.274">
<p>Total radiation exposure in <strong class="city"></strong> is:</p>
<p class="text-center value"><strong class="value"></strong>*</p>
<p>According to effective dose limit per day for the public in Canada (<strong>0.274 mrem</strong>),
your place is:</p>
<p class="text-center status"><strong class="status"></strong></p>
<p class="mb-0"><small>* This is an approximation.</small></p>
</div>
</div>
<div class="col-lg-5 col-md-4">
<div id="chart"></div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<h4 class="mb-3 pt-3">Are you going to do any of these activities?</h4>
<form>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input activity" id="activity-flight" data-exposure="2">
<label class="custom-control-label" for="activity-flight">Taking a Cross Canada flight.</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input activity" id="activity-xray" data-exposure="10">
<label class="custom-control-label" for="activity-xray">Going for a chest X-ray.</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input activity" id="activity-ctscan" data-exposure="1000">
<label class="custom-control-label" for="activity-ctscan">Going for an Adult Abdominal CT
Scan.</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input activity" id="activity-hiking" data-exposure="0.230">
<label class="custom-control-label" for="activity-hiking">Hiking above 2000m from sea
level.</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input activity" id="activity-northwest" data-exposure="0.383">
<label class="custom-control-label" for="activity-northwest">Relocating/Living in the Northwest
Canadian Territories.</label>
</div>
</div>
</form>
</div>
<div class="col-md-5 offset-md-1">
<div class="card" id="notes">
<div class="card-body">
<h5 class="mb-3">Notes</h5>
<p class="empty">Fortunately, you are not exposed to other types of radiations.</p>
<p id="note-activity-flight" class="d-none">When you take a cross Canadian flight you're exposed to about <strong>2
mrem</strong> of cosmic radiations!</p>
<p id="note-activity-xray" class="d-none">Your lungs are exposed to about <strong>10 mrem</strong> radiation when you
take a chest x-ray.</p>
<p id="note-activity-ctscan" class="d-none">When you take an abdominal CT scan, your stomach is exposed to approximately
<strong>1000 mrem</strong> radiation.</p>
<p id="note-activity-hiking" class="d-none">Hiking at more than 2000m above sea level (for example: Mount Lorne) can
expose you to a daily cosmic radiation of about <strong>0.230 mrem</strong> whereas at sea level (for
example: in
Vancouver) you are exposed to a daily radiation of just <strong>0.082 mrem</strong>.</p>
<p id="note-activity-northwest" class="d-none">A person residing in the Northwest Territories is exposed to a daily
radiation of about <strong>0.383 mrem</strong>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Radiation exposure across canada -->
<footer class="footer py-4 mt-5 bg-light">
<div class="container text-center">
<p class="text-muted mb-1">Crafted with ❤️ in the University of Alberta</p>
<p class="text-muted mb-1">Data provided by <a href="http://www.asc-csa.gc.ca/" target="_blank">Canadian Space Agency</a> and is available <a href="data.zip" target="_blank">online</a>.</p>
<p class="text-muted mb-0">Information on radiation levels and sources obtained from <a target="_blank" href="https://nuclearsafety.gc.ca/eng/resources/radiation/introduction-to-radiation/radiation-doses.cfm">Canadian Nuclear Safety Commission website</a>.</p>
</div>
</footer>
<div class="modal fade" id="instructions" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">How to use the Radi-AB?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Using the website is quite easy. Just follow these steps:</p>
<ol class="mb-0">
<li>Select a date from the drop-down menu.</li>
<li>If you want to get more detail of a particular city, select the city by clicking on the city pin on the map.</li>
<li>You can click the radio button on the left side of the map to remove some types of radiation.</li>
<li>There will be a pie chart showing different types of natural radiations resident of that city was exposed on that particular date. Along with that neutronic radiation level on ISS will also be available.</li>
<li>You can select some checkboxes under the heading ‘Are you going to do any of these activities?’, and the pie chart will update accordingly to let you know what will be radiation increment by doing the options selected.</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Got it</button>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/build/heatmap.js"></script>
<script src="https://unpkg.com/[email protected]/leaflet-heatmap.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="dist/js/data.js"></script>
<script src="dist/js/app.js"></script>
</body>
</html>