Titanic of the Skies: The Crash of Air France 447
When we were asked to come up with a project idea for our Advanced Data visualization studio class, I knew I wanted to tackle a project that was about aviation. I have always admired and been in awe of everything about aviation. I also will say that I have a healthy level of fear for it to. I always wondered how something as big as a plane gets up into the sky and stays there. I decided to document the story of Air France flight 447. The following goes into the process of creating this project from ideation to final product.
Inspiration
My co-worker was the one who first introduced me to this story. It was actually two stories. They first sent over an article about the disappearance of Malaysian Airlines Flight 370. I read and told them that this story was crazy. They then replied: “Oh you think this story is crazy, you should read this story about Air France 447”. I read it and they were right. The story of AF447 highlights the complicated relationship between human and machine and presents us with an extremely important question.
On its maiden voyage, the titanic was hailed by all as a ship that was completely unsinkable, but we all know it to be one of histories greatest disasters. Similarly, airplanes have gotten so advanced, that many have started to say the same thing: that they are uncrashable. So how then did one of the most sophisticated flying machines in the world crash into the Atlantic ocean, killing everyone on board?
Ideation
I believed that the best way to tell the story was through a scroll driven narrative that would update a dashboard like visualization with key pieces of information/data that are pertinent to the pilots. I knew the dashboard needed to resemble/mimic some of the components that are available to the pilot in the cockpit. One of these displays was the main flight display (a beautiful piece of data vis in and of itself).
Another pivotal piece of the story is the position of the pilot’s side stick. The movements of the side stick are crucial because they show the reader how the pilot reacts to the problems he is faced with. I originally had no idea how I was going to visualize an air bus side stick.
But as I was doing research for this project, I came across this great video that was put out by the BEA (or the Bureau of Enquiry and Analysis for Civil Aviation Safety) which is the US equivalent of the NTSB in France. After the crash, the BEA put out an official animation documenting what happened during the flight. I watched the video and they visualized the pilot side stick movements in a way that was really simple and intuitive. I decided to go ahead an implement this same type of visual into my project. Right next to this would be the ECAM monitor, which is just the section displays important messages to the pilot. And the final section I would include is media display area, which will display images and animations.
Below are some of the basic sketches I used as a wire frame. I took a couple of iterations and messing around but theses were the original layouts I had in mind. The text would be located directly to the left of this layout.
Here is what the final product ended up looking like. I used CSS grids to help layout each key component, and as you can see not too far from the original sketch shown above.
Putting Myself Through Flight School
No, it wasn’t real flight school (although that may be something I want to do in the future) but I had to do a lot of research and understand how planes worked so I could truly understand what caused AF 447 to crash. I first went back to the article that my co-worker sent me. It was a great article that was written by William Langewiesche and details all the key moments that led to the crash. I read it over and over and stopped every time I didn’t full understand a concept. Like what does it mean for an airplane to operate under normal law, or what happens to plane when it stalls. I read a lot wikipedia articles and watched a lot of youtube videos about the basics physics of flight.
To really make sure I correctly understood every moment, I also downloaded and printed the official disaster report put out by the BEA after the crash occurred. I also had to understand what each symbol, number and movement on the main pilot display meant so that I could correctly visualize and recreate it on my own.
Making some prototypes
In the animation/media gallery section of my “dashboard” I wanted to recreate a 3D rendering of the plane and also have it move according to the pilot’s side stick movements. I may have been a little too confident about doing this because ultimately I had to scrap the idea of animating the 3D rendering of the plane because of time reasons. But I was able to create a few simple prototypes of 3D plane as well as an animated scene with clouds and an “ocean” all using the three.js library. Below is simple sketch of how I planned out the 3D rendering of the plane.
I first need to figure out how to render the plane and was able to do so in this observable prototype. After I was able to do that I wanted to create simple scene where the plane moved through clouds and the ocean below looked like it was being crossed. I had to rely heavily on this great tutorial and was able to recreate it in this observable prototype.
Finding the Data
Finding data for this project was a little tough. You can’t just google flight data (like airspeed, altitude, side stick movements, pitch angle ect) for any flight. That data is usually heavily guarded and never really made available to the public. That being said, I was ok with that. I didn’t need a csv of every single data point from AF 447. It would have been a nightmare to go through a bunch of numbers I didn’t full understand. Because my project covered the key moments that happened during the flight, I just needed data points from each of these key moments and this data was available to me in that report that was put out by the BEA and also in that animation video that they put out as well. I just needed to keep track of the when each pivotal moment took place and write it down so that I could animate between those points. Was it a little tedious? yes, but it beat trying to find the actual data online and then figuring out how to parse through it.
Recreating the Flight Display
The main pilot flight display took a little bit work, but with like anything in life if you break it down you can make it work. The pilot flight display (PFD) consists of 3 main parts. The first is the speed indicator which displays the aircrafts airspeed. After a closer look, you realize that all this really is a scale so I decided to use a D3 scale to recreate it On the right side of the PFD is the altimeter which displays the height of the airplane and just like the speed indicator, its just a scale, so I used D3 scales to recreate this portion as well. The third and most important component of the PFD is the attitude indicator. The attitude indicator displays the location of the nose of the airplane in relation to the horizon.
This took a little bit trial and error but I ultimately used a simple circle element and inside of the circle you will see a blue and brown area. The blue represents the sky and the brown represents the ground. If the plane is flying completely level, then you are going to see equal parts blue and brown. If the plane is pitched up then you are going to see more blue and if the plane is pitched down then you are going to see more brown. I used a simple a svg linear gradient element to toggle between different amounts of blue and brown. Now if this attitude indicator rotates to the left, that means the aircraft is rolling to the right and if the attitude indicator rotates to the right, that means that the aircraft is rolling to the left. It seems counter intuitive but you have to remember this represents that aircrafts nose in relation to the horizon. That dot in the center of the circle represents the nose of the airplane.
Below are the side stick displays for both pilots. The side stick on the right represents the side stick sitting on the right side of the cockpit and the side stick on the left represents the side stick of the pilot sitting on the left side of the cockpit. As you can see they are simple svg rectangles and circle elements. Now how did I know where to move the circle in the side stick display and how did I know how much to rotate the attitude indicator for all the animations? That is a great question :)
Animation
As I mentioned earlier, I had no access to hard data. I had access to the time of key moments that happened during the flight and I also had access to the official animation that had a timestamp along with visualization that were similar to mine. That was my main source of truth and I used it to my advantage.
This is going to sound crazy but I spent a whole entire Saturday night going meticulously through that video and copying what needed to happen animation wise on my side. Dont believe me? Check it out.
Each of those crazy line drawing represent the movement of the circle on the flight displays. I then took that drawing and translated it to an SVG path using this tool, and then animated the circle along that path. And you can also see that there are time stamps for each section. This told me that animation needed to happen during this time segment. You can also see that I know which altitude and pitch angle values I need to animate through. My main tool of choice to animate all these values was greensock and it provided an easy way to animate all these attributes. Was there an easier way to do this? Maybe…
The last thing that I needed to figure out was how to animate my 3D rendering of the plane. Unfortunately I just wasn’t able to animate the plane correctly along the x,y and z axis. Every time I changed the value it rotate my plane upside down and because of time reasons I had to come up with a back up solution. What I ended up doing was using the BEA animation video but cutting each key segment of the video and having it play with its associated time block in the story. I just added in the edited video clip using an html video element had the video start when the user clicked a “start animation button”. This would start the video, but also start the animation of the side stick displays and the attitude indicator.
Feedback
During some initial review of my prototypes, my fellow classmates and professors provided a lot of great feedback. The main piece of feedback that I received was around the amount of time that I spent describing basic flight concepts for the user. My original thinking was to add in all this detail because it would help tremendously with understanding the pilot’s actions. My first iteration had a pretty lengthy “flight school” portion that walked the user through some basic flight concepts. I got feedback saying that with a title of “Titanic of the Skies”, a user would want to jump right in and start reading about what happened to the flight, not spend 15 minutes learning about flight concepts. One of my class mates provided a nice middle ground. They suggested that I move portions of the “flight school” section of my project to tool tips, so as the user hovers over each section on the dashboard, it describes what each section does and visualizes! It was great trade off and easy to implement and allowed the user to jump more directly into the story.
Final Thoughts
This was a hard project and I think there were quite a few areas in which I think I bit off more than I could chew. Prime example was animating that 3D rendering of the plane. I had to take more time to understand how three.js really worked and how to use green sock with it.
And also you may notice that the animations are not that smooth. If had to do this project again I would really take the time to organize how each animation would work and when each animation would start. Sometimes on a page refresh, all the animation take place at the same time and it looks all messed up but it works normally on scroll, but with a better understanding of green sock I could have avoided this.
What did I learn
- A lot cool stuff about airplanes (def went down the aviation rabbit hole)
- How to use Three.js
- How to use green sock and animating unconventional attributes of svg elements such as fill.
- Also using css grids! It came in real handy!