-
Notifications
You must be signed in to change notification settings - Fork 2
/
geovis.html
358 lines (296 loc) · 23.5 KB
/
geovis.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
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Geospatial Visualisation</title>
<!-- Bootstrap Core CSS -->
<link href="scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="scrolling-nav/css/scrolling-nav-chantal.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Geospatial Visualisation</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#approach">Approach</a>
</li>
<li>
<a class="page-scroll" href="#vis1">Initial Visualisation Design</a>
</li>
<li>
<a class="page-scroll" href="#vis2">Final Visualisation Design</a>
</li>
<li>
<a class="page-scroll" href="#evaluation">Evaluation</a>
</li>
<li>
<a class="page-scroll" href="#results">Results</a>
</li>
<li>
<a class="page-scroll" href="#download">Downloads</a>
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li><a href = "index.html"><strong>Home</strong></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Geospatial Visualisation</h1>
<h2>Background and Context</h2>
<p> Previous research on National Research and Education Networks (NRENs) in Africa has shown high latency in traffic exchanged between networks, with 75% of this traffic taking circuitous routes through Europe. Possible reasons for this high latency is lack of peering relationships between NRENs. Peering is when different Internet Service Providers (ISPs) exchange data between their networks at an Internet Exhange Point (IXP). </p>
<p>Despite an increase in the establishment of national IXPs in Africa, high latencies still occur indicating a need for further research into the network topology of NRENs. The collection of traceroute data for logical topology discovery is therefore necessary in order to understand the underlying topology of African NRENs. Traceroute is a network diagnostic tool used to determine end-to-end paths of network packets where round trip times are relayed at each router hop. </p>
<p>For this reason, a visualisation would be useful in identifying possible routes that network traffic traverses between NRENs and aid in the peering decision-making process.
As location is an important aspect in determining this information, a geospatial visualisation has been identified as being appropriate. A geospatial visualisation is one in which nodes are represented in respect to physical locations.
</p>
The creation and design of a geospatial visualisation is presented showing the network structure of African NRENs using traceroute data for network topology discovery.
</p>
<h2>Research Question</h2>
<h4 class="subheading">The following research question has been formulated for the project: </h4>
Can a geospatial visualisation effectively and accurately communicate the network topology of African NRENs, allowing users to:
<li> identify networks (physical and logical), </li>
<li> where they connect (location of source, destination and intermediate hops) </li>
<li> and potential routes of traffic traversal (traceroute paths at a country and continent level)? </li>
<!-- <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
--> </div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="approach" class="approach-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-md-8">
<h2>Approach</h2>
<p>A User-Centred Design (UCD) approach was used to develop the visualisation. UCD describes a process where the user is involved throughout the design cycle to determine user needs and goals. In context of a visualisation, this would be gaining an understanding of the initial visual queries (an information need addressed by a visualisation) that potential users may have. </p>
<p>Users of the visualisation are envisaged to be NREN managers and network engineers of related tertiary education institutions of the UbuntuNet Alliance. </p>
<p>The design process consists of three phases (Figure 1):
<ol>
<li>the early envisioning phase</li>
<li>the global specification phase</li>
<li>the detailed specification phase</li>
</ol>
In each phase, analysis, design and evaluation were conducted. </p>
<p>Iteration of the design cycle is concluded once a specific criteria has been reached - such as if users are able to adequately answer visual queries. Two iterations were conducted (early envisioning and global speciffication phases) before the final visualisation was designed.</p>
</div>
<div class="col-md-4">
<img src="img/geovis/ucd.png" height="300" width="350" style="margin-top:80px"></img>
<p style="text-align:center"><b>Figure 1: User Centred Design Approach from Wassink et al., 2009</b></p>
</div>
</div>
</div>
</div>
</section>
<section id="vis1" class="initial-section">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Initial Visualisation Design</h2>
<p>An interactive prototype (Figure 2) with limited functionality was produced using the Google Maps Javascript API v3 and a small sample of traceroute data collected from the Ripe Atlas platform. The MaxMind GeoLite City Database was used to map IP addresses to coordinates on a city level and used to position markers on the map for both probes and destination IP addresses.
</p>
<h4>Map Symbols</h4>
<ul>
<li>Destination IPs: <font color="blue">Blue</font> Circles</li>
<li>NREN Probes: <font color="red">Red</font> Markers</li>
<li>University Probes: <font color="magenta">Purple</font> Markers</li>
<li>Traceroute: Line with animated arrow joining destination IP icon and probes</li>
<li>Undersea fibre cables: Coloured lines around Africa where thickness of line represents capacity (GB)</li>
</ul>
<p>An informal user feedback evaluation was conducted with the expert user group to get feedback on the visualisation. Users had differing opinions on the undersea fibre overlay surrounding Africa: one user thought the multiple lines and colours in the overlay added too much noise to the visualisation and should be removed while another thought it was useful to perhaps reason which cable was taken by the traceroute to the destination. </p>
</div>
<div class="col-xs-6">
<img src="img/geovis/vis1.png" height="300" width="450" style="margin-top:100px"></img>
<p style="text-align:center"><b>Figure 2: Screenshot of Initial Interactive Prototype</b></p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="vis2" class="visualisation-section">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Final Visualisation Design</h2>
<p>Figure 3 shows the final visualisation design based on information received in both the first and second iteration. In addition to the Google Maps Javascript API, the DataTable, javascript table plug-in for jQuery was used. </p>
<p>Several dimensions of data are displayed in the visualisation including the location of Internet Exchange Points, physical fibre cables and the traceroute information collected. IXP data was obtained from Packet Clearing House's <a href="https://prefix.pch.net/applications/ixpdir/menu_download.php">Internet exchange point directory</a> and fibre data from <a href="https://manypossibilities.net/afterfibre/"> Steve Song</a> at <a href="https://manypossibilities.net/afterfibre/">afterfibre.net</a>. The visualisation allows for viewing multiple traceroutes sent from various vantage points to be seen on the map all at once</p>
<p>The left-hand side of the screen shows an interactive map which supports panning and zooming using the mouse. On the right-hand side of the screen, a table with contextual information related to the map can be seen. The search bar above the table on the right-hand side of the screen can be used to perform searches on the table for any column. Clicking on a particular row in the table, allows the map to zoom in to the location of the related icon on the map.</p>
<h4>Map Layers and Symbols</h4>
<p>Below the map, there are several checkboxes which can be used to toggle various map layers on and off - either displaying or hiding icons and layers on the map.</p>
<ul>
<li>Destination IP Address - where a traceroute is sent to (coloured circle)</li>
<li>Probe - where a traceroute is sent from (<font color="blue">blue</font> diamond)</li>
<li>Internet Exchange Point (<font color="DeepPink">pink</font> triangle)</li>
<li>Traceroute Hops - (<font color="SpringGreen">bright</font> green circle)</li>
<li> Terrestrial Fibre - Fibre Optic Cables over land (<font color="green">green</font> lines) </li>
</ul>
<p>By default, all destination IPs are shown on the map. With the exception of hops, mousing over each symbol displays information about that particular icon such as the name, ASN and IP Address.</p>
<h4>Summary of Interactions</h4>
<ul>
<li><b>To view all traceroute measurements to a particular destination (Figure 4):</b>
Click on a chosen destination IP icon on the map. This will display traceroute measurements from all available probes to that particular destination. All probes, the destination IP and intermediate hops are shown on the map. A list of all the probes and related information (Probe ID, ASN, NREN/organisation name) is then shown in the table.</li>
<li><b>To view a single traceroute measurement from a particular probe to a particular destination (Figure 5):</b> Click a chosen probe icon on the map. This will display the traceroute from the chosen probe to the chosen destination. The traceroute information is then shown in the table (Hop Number, Country, IP Address, RTT).</li>
<li><b>To select a different IP address:</b> Click the same destination IP icon you previously selected. All destination IP addresses will be visible on the map again.</li>
</ul>
</div>
<div class="col-xs-6">
<img src="img/geovis/screen1.png" height="300" width="450" style="margin-top:60px"></img>
<p style="text-align:center"><b>Figure 3: Initial Overview Screen</b></p>
<img src="img/geovis/screen2.png" height="300" width="450" style="margin-top:10px"></img>
<p style="text-align:center"><b>Figure 4: View multiple traceroutes to selected destination IP address</b></p>
<img src="img/geovis/screen3.png" height="300" width="450" style="margin-top:10px"></img>
<p style="text-align:center"><b>Figure 5: View a single traceroute to a selcted destination IP address</b></p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="evaluation" class="evaluation-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Evaluation</h2>
<p>Usability tests were conducted to evaluate the visualisation in terms of effectiveness, accuracy and usability. Effectiveness and accuracy were measured using the metric of successful task completion while usability was measured using the System Usability Scale (SUS) questionnaire. Usability tests were conducted with a total of 23 users where users were required to answer 10 questions using the visualisation. These usability tests last approximately 30-40 mins in an uncontrolled environment of the Computer Science Honours labs.
</p>
<p>Users consisted of 2nd year, 3rd year and honours Computer Science Students.</p>
<p>Ethical clearance was obtained from the Science Faculty Research Ethics Committee and the Department of Student Affairs.Before taking part in the usability test, participants were asked to sign a consent form informing them of the anonymity of their results. On completion of the usability study, users were compensated for their time with a standard hourly fee as specified by the Department. </p>
<p>
Of the 10 questions formulated for the usability test - 4 were based on answering visual queries (Table 1) and 6, on completing composite tasks.
</p>
<br></br>
<p style="text-align:center"><b>Table 1: Mapping of Visual Queries to Research Question Themes</b></p>
<table class="table table-striped">
<thead>
<tr>
<th>Visual Query</th>
<th>Visual Query Type</th>
<th>Research Question Theme</th>
</tr>
</thead>
<tr>
<td>Which country on the African continent has the most fibre?
</td>
<td>Physical Network: Most Fibre Cable</td>
<td>Network topology; identification of physical network
</td>
</tr>
<tr>
<td>What is the route for the traceroute between institution A and institution B?
</td>
<td>Route of Traceroute: Country level
</td>
<td>Identification of potential routes of traffic traversal; where networks connect (source, destination and intermediate hops)
</td>
</tr>
<tr>
<td>Does the route for a traceroute from institution A to institution B travel intracontinentally (within the continent)?
</td>
<td>Route of Traceroute: Intracontinental Level
</td>
<td>Identification of potential routes of traffic traversal; where networks connect (source, destination and intermediate hops)
</td>
</tr>
<tr>
<td>Does the route for a tracereoute from institution A to institution B travel intercontinentally (to a different continent)?
</td>
<td>Route of Traceroute: Intercontinental
Level</td>
<td>Identification of potential routes of traffic traversal; where networks connect (source, destination and intermediate hops)
</td>
</tr>
<tbody>
</tbody>
</table>
<p>Free-response questions were added to the SUS questionnaire to evaluate user experience along with usability. These consisted of a field for “General Comments” (where users’ reactions, opinions and problems encountered could be described), “What features were useful?” (to determine commonly used features) and “What features are missing?” (to elicit overlooked requirements). This information was collected making use of a Google Form. </p>
</div>
</div>
</div>
</section>
<!-- Results Section -->
<section id="results" class="results-section">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Results</h2>
<h4 class="subheading">Results from the usability test are summarised below. </h4> <h4 class="subheading">For
more detailed analysis of results, please refer to the <a href = "documents/final_papers/Chantal_Final_Paper.pdf">final paper. </a></h4>
<h4>Visual Queries and Successful Task Completion </h4>
<p>Successful task completion is characterised by the ability of a participant to obtain specific data when carrying out a task. If a question was answered correctly by a participant in the question set, then the task was deemed to have been successfully completed. This same definition applied to the accuracy of answering visual queries. Due to error in question design, some tasks were designated to be partially completed if users were able to correctly one aspect of a question. </p>
<p> Figure 6 presents the percentage of the four visual queries answered correctly during the usability test.
Results showed that participants were able to view the physical topology in the visualisation and based on the representation used, correctly determine the country with the most fibre cables with 100% accuracy (Figure 6). Visual queries related to routes were answered with less accuracy: identification of a traceroute’s route on a country level had 72.73% accuracy; 68.18% accuracy on an intracontinental (within the continent) level and intercontinental (between continents) level.</p>
<p>Figure 7 shows the percentage of the six tasks successfully or partially completed during the usability test. Both Task 1 (locating the ID of an IXP) and Task 2 (locating the country of a particular IP address) had 100% successful task completion. In comparison to these tasks, Tasks 3,4,5 and 6 had lower successful task completion rates. This is understandable though as Tasks 3,4,5 and 6 were tasks that required more complex subtasks to be performed thus increasing the the likelihood of an error.
</p>
<h4>Usability</h4>
<p>Figure 8 presents the frequency of System Usability Scores by category for 23 users who participated in the usability test and a pilot usability test by an expert user. The scores shown are for a total of 24 participants.</p>
<p>The average SUS score was then calculated for the visualisation: 67.82. </p>
<p>In an analysis of 500 studies making use of the SUS, the average score was found to be 68. Thus, the visualisation falls just below the average score where 12 out of a total of 24 respondents scored the visualisation greater than the average of 68.</p>
</div>
<div class="col-xs-6">
<img src="img/geovis/visual_query.png" height="280" width="480" style="margin-top:20px"></img>
<p style="text-align:center"><b>Figure 6: Visual Queries Answered</b></p>
<img src="img/geovis/tasks.png" height="280" width="480" style="margin-top:20px"></img>
<p style="text-align:center"><b>Figure 7: Successful Task Completion</b></p>
<img src="img/geovis/sus.png" height="280" width="480" style="margin-top:20px"></img>
<p style="text-align:center"><b>Figure 8: Frequency of individual SUS scores by category</b></p>
</div>
</div>
</div>
</section>
<!-- Results Section -->
<section id="download" class="download-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Downloads</h2>
<br></br>
<a class="btn btn-primary btn-lg" href="documents/final_papers/Chantal_Final_Paper.pdf">Download Final Paper</a>
<a class="btn btn-primary btn-lg" href="documents/lit_review/LiteratureReview_yngcha005.pdf">Download Literature Review</a>
<h4 class="subheading" style="text-align:right">Chantal Yang 2015 </h4>
</div>
</div>
</div>
</section>
<!-- jQuery
<script src="scrolling-nav/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scrolling-nav/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="scrolling-nav/js/jquery.easing.min.js"></script>
<script src="scrolling-nav/js/scrolling-nav.js"></script>
</body>
</html>