-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathreport.html
191 lines (175 loc) · 13.1 KB
/
report.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>PenguinMap - Report</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/business-casual.min.css" rel="stylesheet">
</head>
<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">It's time to talk about</span>
<span class="site-heading-lower">PENGUINS</span>
</h1>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="index.html">Home</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="map-page.html">Interactive Map</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="penguins.html">Penguins</a>
</li>
<li class="nav-item active px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="report.html">Report
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="slides.html">Slides</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="page-section about-heading">
<div class="container">
<div class="about-heading-content">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="section-heading-lower">Project report</span>
<span class="section-heading">Project goals</span>
</h2>
<p>
The objective of the project is to offer a visualisation of the populations of the different types of penguins living in Antarctica.
</p>
<h2 class="section-heading mb-4">
<span class="section-heading">Data Source</span>
</h2>
<p>
The main dataset used is the list of all penguin observations in Antarctica (from various sources) compiled by the Mapping Application for Penguin Populations and Projected Dynamics (<a href="http://www.penguinmap.com/">MAPPPD</a>).
For each observation in the dataset, the following data is given:
<ul style="list-style-type:disc">
<li>The name given to the observation site, as well as the site initials</li>
<li>The coordinates of the site</li>
<li>The common name given to the species of penguin</li>
<li>The number of penguins observed</li>
<li>The accuracy level of the observation (1 being the most accurate, 5 the least)</li>
<li>The exact date of the observation</li>
<li>The year of the beginning of the season (For example, January 2010 observations belong to a season starting in 2009)</li>
<li>The type of penguin observed (adults, chicks, nests)</li>
<li>The source of the observation</li>
</ul>
Optionally, we are are providing a visualization for the antarctic facilities (<a href="https://www.comnap.aq/SitePages/Home.aspx">COMNAP</a>). Which can be freely used for educational purpose.
<ul style="list-style-type:disc">
<li>The facility names given to the installed, as well as its unique identifier</li>
<li>The facility coordinates</li>
<li>The date of installation</li>
<li>The facility type (stations, camps, refuge, airfield camp, laboratory, depot)</li>
<li>The countries owning the facilities</li>
<li>A link to the facility photos</li>
</ul>
</p>
<h2 class="section-heading mb-4">
<span class="section-heading">Features</span>
</h2>
<p>
Our project is set up as an interactive website, allowing the user to discover the dataset and its implications. Using a menu at the top of each page, the user can browse different sections of the site.
<ul style="list-style-type:disc">
<li>The index of the site is a homepage, allowing access to all the pages.</li>
<li>The map page contains our interactive map, allowing the user to see the locations and species of all observed penguins for any given years, as well as a heat map of penguin activity.</li>
<li>The penguin page displays a chart of all observations, grouped by month, allowing the user to see how the data is distributed as well as see, for any given parameters, the observations with the most penguins corresponding to those parameters.</li>
<li>The final page is the one you're reading right now!
</ul>
</p>
<h2 class="section-heading mb-4">
<span class="section-heading">Technologies</span>
</h2>
<p>
<ul style="list-style-type:disc">
<li>The website is based on a free to use Bootstrap template from <a href="https://startbootstrap.com/">StartBootstrap</a>. Using a base template, we can quickly start to add our own content without worrying about the basics.</li>
<li>The graphs were created using <a href="https://d3js.org/">D3.js</a>, <a href="https://dc-js.github.io/dc.js/">dc.js</a> and <a href="http://square.github.io/crossfilter/">Crossfilter</a>.</li>
<li>Using Crossfilter, we can select what data dimensions to consider and natively feed to DC.js graphs, which in turn uses D3.js to render and display them. Crossfilter allows interactive data filtering without completely recreating all graphs, allowing for fast modification of the data displayed.</li>
<li>Regarding the interactive map, we are using the <a href="https://leafletjs.com">Leaflet</a> library and its <a href="https://github.com/GeoSensorWebLab/polarmap.js">polar projection</a> and <a href="http://ursudio.com/webgl-heatmap-leaflet/">webgl heatmap</a>plugins.</li>
</ul>
</p>
<h2 class="section-heading mb-4">
<span class="section-heading">Usability</span>
</h2>
<p>
Here are the rules of usability according to
<a href="http://www.catb.org/%7Eesr/writings/taouu/html/ch01s03.html">Eric Steven Raymond and Rob W. Landley</a>
and whether the interactive map is compliant to those rules or not.
</p>
<ul style="list-style-type:disc">
<li><b>Rule of Bliss :</b> The user can understand the map without prior knowledge of the UI. The time slider and filters are self-explanatory, and advanced settings are hidden by default.
However, a few minutes of exploration are necessary to understand all the different types of available information (population, sites, nests).</li>
<li><b>Rule of Distractions : </b>The UI doesn't require sustained attention from the user.</li>
<li><b>Rule of Flow : </b>The UI doesn't disrupt the user's focus with pop-ups or anything.</li>
<li><b>Rule of Documentation : </b>The interface needs a bit of an introduction to explain the meaning of the underlying data, which is an infraction to the rule of documentation.</li>
<li><b>Rule of Least Surprise : </b>The UI doesn't try to impress with anything exotic or novel.</li>
<li><b>Rule of Transparency : </b>The user doesn't need to memorize the state of the application unless he hides the filters.</li>
<li><b>Rule of Modelessness : </b>The UI doesn't react to inputs differently depending on a hidden mode.</li>
<li><b>Rule of Seven : </b>The UI shouldn't have more than seven control elements on the screen, or the user might forget their function. Unfortunately, it does.</li>
<li><b>Rule of Reversibility : </b>The UI doesn't have any destructive operation. As such, it doesn't require an "undo" button. Each input can be cancelled by repeating it once.</li>
<li><b>Rule of Confirmation : </b>The UI doesn't use confirmation prompts.</li>
<li><b>Rule of Failure : </b>Failures should be informative. Our UI doesn't fail.</li>
<li><b>Rule of Silence : </b>When nothing surprising happens, the UI should stay silent. Our map doesn't even have sound at all.</li>
<li><b>Rule of Automation : </b>Automate the input of information that can be deduced. There's not much to automate on our UI but the autocompletion of the site names (which is implemented).</li>
<li><b>Rule of Defaults : </b>Choose safe defaults. The default filters hide data such as human facilities, which would introduce too much visual noise on a first visit.</li>
<li><b>Rule of Respect : </b>The UI should be as simple as possible. It's not, as some filters are rarely useful ("record types").</li>
<li><b>Rule of Predictability : </b>Again, the UI doesn't do anything surprising, and the user instinctively knows he can click penguins to show more info, check filters to activate them, select a year with the slider, and zoom and pan with the mouse and scroll wheel.</li>
<li><b>Rule of Reality : </b>User testing is important, be we were out of time to test it on a good sample of potential users.</li>
</ul>
<h2 class="section-heading mb-4">
<span class="section-heading">Based on</span>
</h2>
<p>
With the goal to accelerate the development process and data analysis, we based our project on the following:
<ul>
<li>The interactive graphs: <a href="https://dc-js.github.io/dc.js/docs/stock.html">dc.js Getting started guide</a></li>
<li>The interactive map: <a href="https://github.com/Underwaternya/antarctica-stations-map">Antarctica Stations Map</a></li>
</ul>
</p>
</ul>
<h2 class="section-heading mb-4">
<span class="section-heading">Conclusion</span>
</h2>
<p>
Unfortunately, the data isn't complete enough for us to be able to make assumptions. We observe an increase in the number of penguins in time, which is undoubtedly just an increase in the frequency of expeditions rather than population. Indeed, more records have been made in the last few years. The visualisation we provide still has the benefit of showing the wildlife hotspots and the location of human settlements.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer text-faded text-center py-5">
<div class="container">
<p class="m-0 small">Corentin Barman, Romain Claret, Antoine Friant, Edward Ransome</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>