Airline Visualization

Accomplished by Hongjian Yang using D3Library.

Curve Control

  Continent filter

  Country    filter

alpha             size

alpha             size

This is a flight routes visualization, in the form of a parallel set, aiming to show the quantitive relations of the large amount of data. For more interesting visualizations, welcome to visit my Blog. Just enjoy it.

This web page is an assignment of my visualization course. Welcome to the visit the course site to enjoy other great works.

◆About the Data

The data is a set of airports, airlines and routes information, and is available in OpenFlight as three seperated csv(comma seperated vectors) file. Data is multi-dimensional, containing geographical information(latitude, longitude, altitude) and attribute information(country, city) and others. This data gives out possibilities in different aspect to build different kind of visualizations, and is used in some very mature visualizations.

For this one, I supplement some addtional data. They are simply the information of countries in each continent, in order to give out a better semantic zooming feature, which I will discuss later. Then I chose the attribute portion and wiped out the geographical portion, using a ruby script written by myself.

Finally, each route remains three properties -- it's departure place, it's destination and whether it's active anymore. Binding these data to a parallel set according to the properties and my work is over.

◆Parallel Set

Parallel set is used to disclose the inner quantity relationship in a multi-dimensional data set. Imagine a Parallel Coordinates with stripe width repensenting the quantity, or a hierarchical tree map with same category bundled together, that is what a parallel set tells.

Used D3 Library and also it's supplement call d3.parsets written by Jason Davies. Drag the dimensions and categories to reorder them. You can also click the “alpha” or “size” links that appear next to the dimension name on mouseover, to order the categories by name or frequency. These feature is all provided within the library and I just did something trivial with it.

And also, I plus two bar charts below, for making the information clearer. Bar charts have log-scale axis to match the departure and landing information, with a sort function. Use it by click the small slide bar showing in the left. Of course, data of parallel sets and the bar chart are absolutely the same.


Filtering is a fundamental part of visualization and the d3.parsets library didn't provide it. So I wrote my own.

For this special data, flight within a continent is much more than that through the continents. Sometime, we want to particularly watch the trans-continental flight, and the redundant data then will waste a lot of space. So I give such a filttering button that can wipe out all the inter-continental flight. Another similar button is to wipe out all the domestic flight for similar reason.

Click the button to see the differences.

◆Semantic Zooming

This is the most time-consuming and most difficult part when building this visualization. For data set has hierarchical structure like this, showing all the data in the most detailed level will lead to a massive clutter. To avoid clutter and to keep details, semantic zooming is a good way.

To do zooming, please double click the dimensions you are interested in and there will be a window poping out with zooming option. Both "zoom" and "focus" behaviour are to restrict the data set to a subset you choose, the difference is that "zoom" will subdivide the dimension but "focus" won't.

For example, double click on the dimension "EU."(means Europe) and choose "zoom into it", the first dimension will change from "source continent" to "source country" and all the data are start from Europe. Choose "focus on it" and you will see the dimension keep unchanged but data is restrict to be the same as the former, that is, only Europe left.

◆Future Works

This work has much to be improved.

A better color scheme: Now different colors are up to 20 kinds. But since the data set is not small and even after filtering there still can be more than 20 categories. Now these categories are shown in black, But I think their should be another better way.

A better filter: Even we have semantic zooming, sometimes the categories are still so much that some small part all hard to select, or even be seen. So I want to give it a distortion, folding the side part and focus on the middle, like iTunes handling hundreds of songs. While implement this part is not so simple.

A better programming style: Using a lot of libraries, style sheets makes my project terrible. Since I've few experinces in fontend development, and did a lot of patches on it, part of the source code is unreadable. Next time before I start my web project, I should read some rules and some good examples.

A better animation: Though I've achieved some kind of animations to make you feel more comfortable, there will be some stiff changes when use the filtering and zooming functions. Hope I can find a way to solve this problem in the future.

More visual parts: Three and more visual parts are required in this assignment. In this one, there is mainly two, two and a half at most if the text field of details counted. Although I did a lot of works on this one, spending a few but entire days, giving out a result I've very satisfied with, there still something missing -- the geographical information. In the future, I will add some geo-visual part on it, a heatmap maybe, corresponding to the selected part and showing the density of the routes.


I'm a novice both in visualization and in web programming, so I will be very happy if you send me some feedbacks. Of course, suggestions or comments are both welcome.

Feel free to Send me an E-mail or give me a push request on Github. Hope you like it.