Airport Info

Team Members: Shen Wang, Yilun Hua, Yuhao Zhu, I-Chia Huang

Note that we currently only have data visualization for 2016/01. Thank you for your cooperation.

Design Rationale

In this prototype, we have a data visualization that displays the delay of domestic flights at US airports with more than 9000 flights per month. By using Wikipedia as a reference for busy airports, we identified 9000 flights per month to be a reasonable and representative threshold to improve readability and clarity of the visualization. Using this filter avoids exploring too few or too many airports as it may potentially confuse the audience. At the same time, it allows major airports to be emphasized within the visualization, which may be more applicable to the general public’s travel experience.

To allow flights exploration on a particular year and date, we have radio buttons for selecting months and years to facilitate user convenience. In our opinion, radio buttons are more straightforward and clearer than drop-down menu in terms of representation and communication because we set up radio buttons that allows only one choice at a time and users do not have to expand choices before they could choose like drop-down menu requires. In addition, we did not pick buttons because it may not be clear which button users selected if user forgets their previous selection. Also, we decided to use sliders instead of radio buttons for hour selections because sliders are easier for users to change more rapidly to quickly see changes of delay and number of flights within a day on the map.

In terms of map representation, we went with a central AlbersUsa map that represents the entire US and we believe using such visualization provides maximum information. The reader can see available airports clearly on the map pinned in correct locations. We show the scale of the number of flights within circles. The larger the radius of a circle is, the more flights the respective airport serves (busier). It’s intuitive for the readers to view the airports in terms of the circle’s area instead of radius for easier differentiation between two areas and avoid disproportion. To better distinguish layered circles, we have inner pink circles showing the number of flights that are delayed and outer black circles showing total number of flights for that period of time; therefore we use these two layered circles to show the relationship between delayed flights and total flights. These two colors are chosen because they are contrastive enough to distinguish from each other; even though pink is not as intense as red, it still resembles some degree of red that naturally flags a bad situation such as delay. We did not represent such information in a bar graph because we believe it is essential to identify airport locations in a map for easier navigation and intuitive visualization.

To aid visibility of specific portion of the map, users can click on the selected airport to zoom in and out if they would like to further examine areas of the layered circle. On the other hand, we also provided a slider for selecting hourly delays; users can hover cursor over a specific airport to see the details of that airport displayed in a tooltip. Since it would be too crowded and confusing to display all detailed information of the airports at once, we added hovering tooltips to display only information users care about. This is efficient in terms of space since layered circles and the map already provide general scope of sufficient information for user to decide what exactly they want to see in detail, so we only want to display further details tailored to user specific selections.

We also made layered circles half transparent to gain a balance between maximizing visualization of information and minimizing distraction. When an user hovers over an airport, it will become solid color as a way to highlight such choice’s information to correspond to the tooltip detailed information so that the users can easily distinguish which information they are getting for. Also a zoom-in in will be performed on the choice if the user clicks on the area for easier investigation.

Development Process

We spent approximately a week on this prototype as a team. First half of the week was dedicated to exploration of D3, html, and CSS as web development tools because everyone on the team had minimal prior web development experiences. To efficiently divide the work, we dedicated a data lead and the rest of three team members worked on different parts of the user interface, such as displaying map, figuring out how to display layered circles, as well as optimization in terms of filtering speed. Because we were all relatively new to web development, learning D3 and data cleaning definitely took the most time. D3 was confusing at first but as we looked over tutorials and sample codes online we were able to get a grasp of the tool more easily. On the other hand, data cleaning took us a while to finish. Since we needed to label points on the map, we had to ensure we had necessary information from GeoJson as well as flight data to display correct information. At the same time, raw flight data consisted several noise attributes so we also spent some time aggregating information to end up in the format we desired.