This repository has been archived by the owner on May 12, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
281 lines (280 loc) · 18.2 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meteorite-landings</title>
<link rel="stylesheet" type="text/css" href="assets/css/uikit-3.6.20.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/slider.css">
<link rel="stylesheet" type="text/css" href="assets/css/forkongithub.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<!-- <a uk-totop uk-scroll></a>-->
<header class="uk-navbar-container uk-margin-medium-bottom">
<div class="uk-container-expand">
<nav class="uk-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="https://imatheussm.github.io/meteorite-landings/index.html">
meteorite-landings
</a>
</div>
<div class="uk-navbar-right">
<a href="./occurrencesMap.html" class="uk-button uk-button-secondary uk-margin-auto-vertical">
Occurrences Map
</a>
</div>
</nav>
</div>
</header>
<main class="uk-container-expand uk-margin-large-bottom">
<div class="uk-container">
<span id="forkongithub">
<a href="https://github.com/imatheussm/meteorite-landings/">Fork me on GitHub</a>
</span>
<ul class="uk-flex-center" uk-tab="animation: uk-animation-fade; connect: #tabContents">
<li>
<a id="dashboardTab">
<span uk-icon="image"></span>
<br>
Dashboard
</a>
</li>
<li>
<a id="reasoningTab">
<span uk-icon="info"></span>
<br>
Reasoning
</a>
</li>
</ul>
</div>
<ul class="uk-switcher" id="tabContents">
<li class="uk-container">
<div class="uk-grid uk-child-width-1-2@m uk-margin-small-top" uk-grid>
<div class="uk-width-1-1 uk-margin-small-top uk-margin-medium-bottom uk-align-center">
<div class="uk-container">
<div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
<!-- <div class="uk-flex uk-align-center uk-margin-auto-vertical">-->
<!-- <small class="uk-margin-auto-vertical uk-margin-auto-left uk-text-right">-->
<!-- Occurrence count-->
<!-- </small>-->
<!-- <label class="uk-switch uk-margin-small-left uk-margin-auto-vertical">-->
<!-- <input type="checkbox" id="mapToggle"-->
<!-- uk-toggle="target: .map-toggle; cls: uk-hidden;">-->
<!-- <div class="uk-switch-slider uk-switch-small uk-display-block"></div>-->
<!-- </label>-->
<!-- <small class="uk-margin-auto-vertical uk-margin-small-left uk-margin-auto-right-->
<!-- uk-text-left">-->
<!-- Average mass-->
<!-- </small>-->
<!-- </div>-->
<div class="uk-flex uk-align-center uk-margin-auto-vertical">
<small class="uk-margin-auto-vertical uk-margin-auto-left">Mass</small>
<!-- <input type="range" value="2" min="0" max="10" step="0.1"-->
<!-- class="uk-range uk-margin-small-left uk-margin-auto-vertical-->
<!-- uk-margin-auto-right">-->
<div slider class="uk-margin-auto-vertical uk-margin-small-left"
id="rangeContainer">
<div>
<div inverse-left style="width:0;"></div>
<div inverse-right style="width:0;"></div>
<div range style="left:0;right:0;"></div>
<span thumb id="thumbOne" style="left:0;"></span>
<span thumb id="thumbTwo" style="left:100%;"></span>
<div sign style="left:0;">
<span class="slider-value">0</span>
</div>
<div sign style="left:100%;">
<span class="slider-value">100</span>
</div>
</div>
<input type="range" id="rangeOne" tabindex="0" value="0" max="100" min="0"
step="1"/>
<input type="range" id="rangeTwo" tabindex="0" value="100" max="100" min="0"
step="1"/>
</div>
</div>
<div class="uk-flex uk-align-center uk-margin-auto-vertical">
<small class="uk-margin-auto-vertical uk-margin-small-right uk-margin-auto-left">
Type
</small>
<div class="uk-margin-auto-vertical uk-margin uk-grid-small uk-child-width-auto
uk-grid uk-margin-auto-right">
<label class="uk-text-small uk-margin-auto-vertical">
<input class="uk-checkbox" id="fellCheckbox" type="checkbox" checked> Fell
</label>
<label class="uk-text-small uk-margin-auto-vertical">
<input class="uk-checkbox" id="foundCheckbox" checked
type="checkbox"> Found
</label>
</div>
</div>
</div>
</div>
</div>
<div>
<h2 class="uk-text-lead">Choropleth Map: Occurrences by Country</h2>
<svg class="uk-margin-remove-top map muted" preserveAspectRatio="xMidYMid meet"
id="mapOne" viewBox="-0.5 -192.1917724609375 961 922.6917724609375"></svg>
</div>
<div>
<h2 class="uk-text-lead">Choropleth Map: Average mass by Country</h2>
<svg class="map muted" preserveAspectRatio="xMidYMid meet"
id="mapTwo" viewBox="-0.5 -192.1917724609375 961 922.6917724609375"></svg>
</div>
<div>
<h2 class="uk-text-lead">Bar Chart: Occurrences by Class</h2>
<div id="barChartDiv">
<svg class="chart chart-muted" preserveAspectRatio="xMidYMid meet" id="barChart"
viewBox="-0.5 -192.1917724609375 961 922.6917724609375"></svg>
</div>
</div>
<div>
<h2 class="uk-text-lead">Line Chart: Occurrences by Year</h2>
<div id="lineChart"></div>
</div>
</div>
</li>
<li class="uk-container">
<div class="uk-margin-small-top uk-margin-large-left uk-margin-large-right uk-padding-large-left
uk-padding-large-right">
<h3 class="uk-margin-small-bottom">
In the time intervals with significant number of meteorite incidents, which regions are most
affected and what is the mean meteorite mass in them?
</h3>
<p>
The line plot allows the scrutiny of occurrences as the years pass. During its implementation,
it was noticed that 288 instances out of the 45,716 contained in the data set lack the year
of occurrence. By analysing it, one can see that the number of meteorites significantly
increased from 1970 onwards. This does not mean that there were very few meteorites previously,
but more likely that such events are observed, registered and studied now more than ever. There
are incidents dating as far back as 860 CE, but such old instances are few and far between.
</p>
<p>
In conjunction with this line plot, the count and average mass choropleth maps allow the
inspection of which regions registered the most meteorite landings, and which saw the biggest
average mass. These maps were obtained by performing a reverse geocoding of the coordinates
originally present in this data set using
<a class="uk-link" href="https://docs.mapbox.com/api/overview/">MapBox's API</a>. It is worth
mentioning that this API failed to return the country of 14,962 instances, which is around a
third of the data set instances. To visualize all meteorite landings, another map plot with
circle marks is available by clicking on
<a class="uk-link" href="./occurrencesMap.html">Occurrences Map</a>.
</p>
<p>
In terms of number of occurrences, Antarctica tops the ranking with 20,676 instances. However,
as it can be seen on the average mass choropleth, Greenland and Namibia seem to have the biggest
average mass by far. Interestingly enough, Greenland and Namibia only have 4 and 17 occurrences
respectively, which is significantly less than Antarctica. Indeed, Greenland and Namibia have
extreme outliers in terms of mass. They can be filtered out by adjusting the mass range selector
to cover from 0 up to the 99th percentile in terms of mass. In doing so, other countries take
the lead, such as Colombia, Belarus, and Turkmenistan.
</p>
<p class="uk-margin-medium-bottom">
The average mass of the meteorites that landed in these countries and regions can be found by
passing the mouse over them on the choropleth maps. The ability to select time ranges on the
line chart would be ideal; however, due to the constraints related to this activity,
implementing this was not feasible in a timely manner, and could be a pertinent future
improvement to this dashboard.
</p>
<h3 class="uk-margin-small-bottom">
How big is the mean mass of the predominant meteorite class and in which region they tend to
occur the most?
</h3>
<p>
This question can be answered by looking at the bar plot at the bottom right corner of the
dashboard. It shows how many meteorites of each class are described in this data set. By
clicking on one or many bars, the visualizations are dynamically filtered to consider only the
selected classes.
</p>
<p>
Using this bar plot, one can see that the ten most frequent classes are:
</p>
<ol class="uk-column-1-2">
<li>L6;</li>
<li>H5;</li>
<li>L5;</li>
<li>H6;</li>
<li>H4;</li>
<li>LL5;</li>
<li>LL6;</li>
<li>L4;</li>
<li>H4/5; and</li>
<li>CM2.</li>
</ol>
<p class="uk-margin-medium-bottom">
Similarly to what was seen in the choropleth maps, analysing the mean mass of the meteorite
landings of any given class is as simple as passing the mouse through the respective bar.
</p>
<h3 class="uk-margin-small-bottom">
Are there any geographic or temporal differences between the meteorite classes that fell on
Earth?
</h3>
<p>
Some differences can be noted between some classes, although most of them share a somewhat
similar distribution in which Antarctica has the most number of occurrences. One example of
comparison between classes with distinct distributions is L4 and C03. L4 meteorites registered
most incidents around 1980 with more than 900 occurrences, most of which around Antarctica. CO3,
on the other hand, affected Libya the most, followed by Antarctica, and its occurrences peaked
around 2010.
</p>
<p class="uk-margin-medium-bottom">
Looking in hindsight, it seems that the global filtering of outliers performed outside this
JavaScript application did not contemplate the filtered maps, thus hindering the discovery of
more subtle differences. A better alternative would be to automatically perform outlier
filtering using a Z-Score-based approach in the JavaScript application itself and automatically.
This serves as meaningful feedback for any prospective endeavors involving visualization with
<a href="https://d3js.org/">d3.js</a>.
</p>
<h3 class="uk-margin-small-bottom">
Which is the predominant class of meteorites of type Fell, when did they occur the most and
where they can be most frequently observed?
</h3>
<p>
This question is interesting because the Fell class (i.e., those incidents that were observed as
they happened instead of just finding the meteorite afterwards) are a small class, amounting to
just 1,107 instances. The Found class, conversely, contains 44,609 entries.
</p>
<p>
In the produced dashboard, the types of meteorite incidents can be filtered by using the
checkboxes. By changing their state, all visualizations are dynamically updated accordingly. By
selecting only Fell incidents, one can see how the distributions are significantly different.
To begin with, no more than 20 Fell observations were registered in the same year. Moreover, no
Fell incidents were registered in Antarctica, which means that all meteorite incidents there
were registered post-impact. Now, the leading countries in terms of this type of landings are
the United States, India, China, and Russia.
</p>
<p class="uk-margin-medium-bottom">
Lastly, the line plot allows the inspection of when this type of incident happened the most, and
the bar plot and mass slider allow additional filtering to see how each meteorite class is
distributed in terms of mass, geographical location, and time.
</p>
<h3 class="uk-margin-small-bottom">
How the Fell and Found meteorites differ in geographic and temporal terms?
</h3>
<p>
The previous question helps to answer this one. As previously mentioned, this data set is very
unbalanced in terms of Fell/Found occurrences. In addition to this fact, the geographical
distribution of these types of meteorite landings significantly differ.
</p>
<p class="uk-margin-medium-bottom">
Overall, only the distribution of Fell and Found incidents in terms of time can be considered
similar. The numbers and variations are naturally higher on the predominant class, but all of
began to be more frequently registered around the same time mentioned before (from year 1970
onwards).
</p>
</div>
</li>
</ul>
</main>
<footer class="uk-text-center uk-margin-medium-bottom">
Built by <a href="https://github.com/gabrielamaximino" target="_blank">Gabriela S. Maximino</a> and
<a href="https://github.com/imatheussm" target="_blank">Igor Matheus S. Moreira</a>.
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/uikit-3.6.20.min.js"></script>
<script src="assets/js/uikit-icons-3.6.20.min.js"></script>
<script src="assets/js/d3-6.7.0.min.js"></script>
<script type="module" src="assets/js/viz/main.js"></script>
</footer>
</body>
</html>