Making-of: Trails of Wind
How we created a map of the global architecture of airport runways, which turned out to be a wind map.
This article is a collaborative work by David Elsche, Steffen Hänsch, and Sascha Collet.
While Flying on a plane the man-made structures and how they change the face of the earth are overwhelming. The bird’s eye view casts a whole other light on how humans interact with landscapes, using every valley for villages, shaping fields around forests, building highways through mountain passes. Some of the largest man-made structures, however, are the ones needed for air travel itself: airports. But why they were built the way they are and how is the direction a runway faces determined?
After doing some research we found out that most airport runways are built in the average wind direction of that location to prevent crosswind landing, which could be dangerous for airplanes and passengers alike. In regions with very irregular wind directions, runways are often designed in various directions to ensure a smooth course of operation. That is why, in regions like these, airports don’t just have parallel runways but form distinct shapes, like triangles and squares, depending on how wind directions usually change.
Airport Runway Shapes
We concluded that the orientation and the gigantic number of airports theoretically could provide information about the general wind direction of a region, as airports reflect the wind directions in their architecture.
Data Exploration
Tools JupiterLab, Altair
In the search for a suitable record, we came across the Ouraiports page. It contains an extensive collection of all airports in the world that also provides further information like passenger frequency, altitude above and below sea level and another dataset with detailed references about the runways (length, width, surface, etc.). After removing irrelevant data like heliports, closed airports and runways without coordinates we compared the runway dataset with the airports dataset.
As you can see many of the runways in the dataset are not georeferenced, which is why a large number of runways cannot be represented. The resulting lack of many airports is especially noticeable in South America, Africa and Papua New Guinea.
After visualizing the runways rudimentarily using Folium to see deviating runway lines in the dataset, we removed errors manually.
Runways differ greatly in terms of their length and width and in most cases follow the specifications of aircraft types that land on the airport. The required length of a runway for the take-off of an aircraft type depends on a variety of properties like weight, aerodynamics, engines and the local air pressure and ranges between a few hundred meters up to several thousand meters for an A380 (see page 130).
This visualized dataset shows that there is a much clearer structure by the width of the runway than by the length.
To compare the runway directions, it was important to display them uniformly. We computed the midpoint between the runway endpoint coordinates with Geographiclib and calculated the angle of rotation compared to the north-south-axis to project the lines later on the map.
After calculating the respective angle it’s time to have a look at the global runway orientation. Therefore we reduced the orientation to almost a semicircle of 179° to avoid double counting the angles (since landing strips can be flown on from both sides) and to give a clearer representation.
What is striking here is the elevated orientation of the runways in the direction of the magnetic north. A clearly increased number can be seen north-south (0°) as well as at the east-west-axis (90°), with smaller peaks are at 45° and -45°.
For further use in a web application, all unimportant information was removed and exported in a final JSON file. The coordinate points were rounded to six digits after the decimal point to decrease the file size.
Design
Tools Sketchapp, Mapbox Studio
To visualize our findings, we wanted an interactive world map, which draws the runways as comparable lines and gives a detailed view of individual runways.
Mapbox Studio offers the possibility to design Openstreet Maps data with your own design, as well as to add additional external map data and fonts. To visualize the actual map, our challenge was to make the map as simple as possible, yet provide appropriate information for orientation.
The following elements should be represented.
- Runways
- Taxiways
- Elevation Model
- Water
- Streets
- Country borders
- Name of the airport
- IATA airport code
The IATA-airport code consisting of three letters is intended for the exact identification of an airport. Similar to the countries’ ISO code.
This is also used in the design of airport tickets, which we wanted to include in the sidebar of the microsite. With the help of these tickets a story with corresponding visualizations, legends and illustrations could be told.
In the complete desktop version, the user can navigate freely on the map as well as scroll through the storytelling in the sidebar. In the smartphone version, the map is used to display the essence of our exploration while scrolling through the story because the representation of the many lines on the map is very performance heavy and the navigation is limited. To provide a better user experience on mobile devices, the focus should rather be on the story than on free navigation.
There were many other interesting findings in exploration. However, to keep the story short and on point, we published interesting facts within our social media accounts as a foretaste instead of cramming the site with too much information.
Coding
Main tools React.js, D3.js, Mapbox GL, Typescript, React Waypoints
The basis of our microsite was react-map-gl, a React binding to Mapbox GL JS, which allows us to show our own map design created in Mapbox Designstudio. The actual visualization of the lines is made possible by a canvas overlay on top of the map.
To make the lines smaller and disappear when zooming, we used the scaling function provided by D3.
React Waypoints offers the possibility to trigger certain events while scrolling the sidebar in order to fly to areas of the map using the Flyto interpolator provided by react-map-gl.
While two of the sidebar graphics were designed and exported as static SVGs in Sketchapp, the representation of the distribution of all runways had to be created programmatically. A logarithmic scaling was necessary in order not to exceed the scope of the counts on the north-south-axis. At the same time, the visualization should be understood directly in connection with the map, which is why a radial representation of the lines seemed to be the most suitable, to be able to read the angle directly on the map.
Conclusion
As so often, we would have spent more time on the project to present further interesting facts and insights.
In the future we would like to extract the runway data directly from OpenStreetMap to increase the number of displayed airports. Furthermore, an extension of the microsite with some filters to search the runways for certain criteria could be added. To increase the performance it would also be possible to write an own shader for the displayed lines.
We are happy to share our knowledge and are always looking for new challenges and interdisciplinary projects and partners.
We would be very happy to receive your feedback.
