Process book

Content

In this process book, we will show our progress throughout the realization of this project, week by week. For each of them, you will find our advancement in data preprocessing, design, implementation, and choices for the future.

Week 1

31/10 - 06/11

The first week of work in this project was dedicated to the composition of a group of 3 students and to agree on the subject of our visualization. Our team is composed of 3 exchange students, we all are from the same home University and we have known each other before. We did not want to combine the ADA project (CS-401 @EPFL) and the Data Visualization because we were afraid that the deadlines might be not compatible.

Looking at the available datasets online helped us picking a subject. We found on Kaggle a dataset listing airplane crashes between 1908 and 2009. It caught our attention as the idea of developing a visualization using a map was interesting for us.

Starting from there, we created our GitHub repository with a basic skeleton of the project, and then got the useful resources, such as the dataset and data for the map.

Week 2

07/11 - 13/11

• Getting a clear idea of the proposal

During the second week, we agreed on the expected result of our visualization, by drawing a first sketch of what we expected. The idea is to have a map showing all the airplane crashes from 1908 to 2009 as circles on a map, with a radius proportional to the number of death in each specific crash. For the visualization to be interactive, the user will be able to zoom and drag the map, a click on any crashes on the map would show a tooltip with more information. Below the map, we plan on drawing a timeline of all the airplane crashes over time. The timeline would be brushable, allowing the user to display on the map only the crashes of the selected time period.

• Location preprocessing

We also started to preprocess the data using a python Jupyter notebook. Indeed, the data stored in our dataset are not necessarily handable to realize the visualization, and the use of Python is more appropriate than JavaScript to do this step. In order to display the crashes on a map, we need to get the longitude and the latitude of each of them. Unfortunately, the dataset just gives us a short description of the crashe locations (e.g. Off North Sea). We firstly uses this Google Map API but it was limited by the number of requests.Thus, we finally chose to use Python Geocoder (see here), a python module to parse location from different geocoding provider. We noticed few errors in the results but we decided not to spend too much time on this task and focus on the visualization.

Week 3

14/11 - 20/11 On week 3, we started to work on the visualization itself. Using a TopoJson, we displayed a world map and added dots for crashes on it. Beside this, we defined scales and draw the axis of the timeline.

This first visualization was using SVG elements a map with circles and a timeline of the number of crashes per year.

The first interaction possible with this visualization are:

• See additional information about crashes within tooltips on the map
• Zoom-in/out on the map
• Drag the map and reset it to its default view

The results are exactly what we wanted to implement but the performance is not good at all. The visualization lags, when we interact with it: there is a delay between the actions on the map and the update of the view. We will need to find a solution to this on the coming week.

Week 4

21/11 - 27/11

In order to improve the performance of our visualization, we decided to replace the SVG elements defined for the map by a canvas. We also refactored the code to be more easily readable using classes.

In the meantime, we've been working on the graph which uses the timeline. This graph shows the number of crashes over time. The idea was to display as many dots as crashes in a year in the graph. After struggling with the display, it turned out that the dots are not differentiable in the actual graph, and actually look as if they were a unique bar. We keep it like this until we find a solution.

Week 5

28/11 - 04/12

This week, we focused our effort on the design of the visualization. We choose the background color for the webpage and the shape of the map, a font family from the Google font etc… We also fit the visualisation to the/any screen size. Issue :

• color by company is not a good idea, as there are more than 10 operators.
• overlap of crashes on the map

To answer this first issue, we thought about grouping the crashes by cause. Indeed, a description of the crash is available. From this description, we could determine the reason of the accident.

Week 6

05/12 - 11/12

Added tooltip when clicking on any crash on the map.

• Tags preprocessing

In order to display the crashes causes, we tried to categorize the crashes based on their summaries. Inspired by this project found on Kaggle, we added tags for each crashes. With this new information, we will be able to filter the crashes.

Week 7

12/12 - 18/12

After attending the lecture on storytelling on December 6th, it is clear that we need to add something to our project, to make it valuable and tell something to the user. This was one of the focus of this week.

• Telling a story

The first thing to do is to find relevant information to be displayed. At this point, as the possible interactions are mainly linked to the timeline, we chose to add information on it. It is true that by selecting a time range on the graph, we can see where were concentrated the crashes in this period, and that could be explained by historical events (e.g. between 1914 and 1918, crashes are concentrated in Europe, around Germany).

Thus, we chose to add events on the timeline, mostly historical, as this could explain the increase in the number of airplanes crashes some years, but also their locations.

• Tweaked the design

We reorganized the elements of the visualization (e.g. graph on the right handside of the map), and worked on the website design. Last but not least, we worked on have a responsive website.