-
Notifications
You must be signed in to change notification settings - Fork 0
Process book
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 on data preprocessing, design, implementation and choices for the future.
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.
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 informations. 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.
We also started to preprocess the data using python and a jupiter notebook.
- TODO: Clean data using python to have location of each crash (google maps request)
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 informations 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.
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 mean time, 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 crshes 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
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 not a good idea -> more than 10 colors. color by cause ?
- overlap of crashes
05/12 - 11/12
Added tooltip when click on any crash on the map. Picking
12/12 - 18/12 Focus on the story telling. We added some information about airplane history to the visualization, explain the increase of the number of airplaine crashes some years ( war ...) Tweaked the design