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 to pick a subject. We found on Kaggle a dataset on 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

During the second week, we agreed on the expected result of our visualization, by drawing a first sketch of what we expect. 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 this 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 to do this step. In order to display the crashes on a map, we need to get the longitude and the latitude. Unfortunately, the dataset just gives us a short description of the crashes locations (e.g Off North Sea). We firstly use the google map API but we were limited by the number of requests, so we finally use a python module. We observed some errors in the result but we decided to not 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 we 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 -> more than 10 colors. color by cause?

• overlap of crashes

• working on tag preprocessing

Week 6

05/12 - 11/12

Added tooltip when clicking on any crash on the map. Picking

• 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 some tags for some 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