Design for Understanding: Airline Mobility
Visualizing Human Air Mobility between 2019–2021
Introduction
Data and information are everywhere. More and more data is generated, collected, and recorded each day. How do we consolidate all of this data into a meaningful product? How do we define and share the stories attached to each entry in a data set?
For my Human-Computer Interaction (HCI) course at Emory University, my group was tasked with building a visualization system that effectively communicates data informatively and persuasively. Given Covid-19 pandemic contexts and recent returns to “normal” human activity, we decided on mapping and visualizing airport travel by states in 2019, 2020, and 2021 to see in which moments travel was severely affected. Are people leaving from highly infectious areas to safer areas? Are people still traveling in general? These years were chosen to illustrate travel before, during, and after March 2020, which many students remember as the time when the pandemic was made official and all universities shut down. In this post, I further describe and detail our process for brainstorming and building our system.
Design Process
Our team consisted of four people, including myself: Vanessa, Ruochen, Noah, and Randy. We followed a hybrid workflow depending on our schedules: in-person and virtual. We documented our ideas, sketches, and technologies in Google Docs, Figma, and GitHub.
I. Brainstorming
We decided to split the work based on our experiences and strengths in each visualization task. Noah and Vanessa worked on visualizations for Persuasion, and Ruochen and Randy worked on visualizations for Communication or Analysis.
First, we discussed which data set we wanted to visualize. We looked on provided data sources, such as CORGIS, FiveThirtyEight, and Data is Plural, and we found a CORGIS data set about airline flights that was interesting; however, this data only covered up to 2016, and we wanted to look at more modern data, especially given speculated dramatic travel changes from pandemic contexts. As a result, we found data from the U.S. Bureau of Transportation about various flights from different airports, states, month-years, and with passenger statistics. The data set was also already formatted, normalized, and cleaned, which helped streamline our process and allowed us to focus on visualization design.
In general, we were curious about how aviation mobility changed between 2019 and 2021.
Next, we thought about various questions related to our data set. We further broke down the questions by tasks:
- Should we illustrate travel between airports?
- Should we illustrate travel between states?
- How do we aggregate and condense the data?
- How do we want the user to feel when interacting with the data?
For the Communication component, we were interested in emphasizing the relationships between each state or airport while mapping the total number of travelers. We wanted to showcase both monthly and annual views. The monthly view shows the summed traveler counts for each state or airport by the month. We planned on implementing a slider to allow the user to scroll through each month. The annual view shows the summed traveler counts for each state or airport for the whole year. The following images are our five design sheets for the Communication sketching and brainstorming process:
Some notable ideas or designs from the previous sheets include heatmaps, edge bundling, box plots, and bar charts to illustrate the trends and relationships of our data. We found that heatmap and edge bundling visualizations commonly shared relationships between states/airports, but we ultimately decided on a heatmap because users can immediately notice peaks in color contrasts, which represent high traveler counts.
For the Persuasive component, we were interested in mapping an audio component to the visualization, including brief clips of Covid-19 announcements or speeches during peak times and aural icons associated with airports. We planned on mapping the volume of total passengers to the volume of an aural icon between two nodes for a given airport, representing and comparing a dichotomous relationship between two dates, e.g. March 2019 and March 2020. The following images are our five design sheets for the Persuasion sketching and brainstorming process:
Some notable ideas or designs from the previous sheets include visualizing links between (inspired by Brian Foo’s Distance From Home) locations, animating dichotomous node interactions between two dates and locations, and mapping sounds to nodes based on user interactions.
II. Data Processing
Our data set was 666402 rows × 21 columns in total, which we reduced to 51445 rows × 7 columns for state views and 277935 rows × 9 columns for airport views. The columns include: DATE, DEST_AIRPORT_ID, ORIGIN_AIRPORT_ID, PASSENGERS, FREIGHT, MAIL, DISTANCE, DEST_AIRPORT_NAME, and ORIGIN_AIRPORT_NAME. The data wrangling process included grouping together the entries by month and year, and sum-aggregating by the origin airports. This process was repeated for origin airports (the number of travelers leaving from an airport), destination airports (the number of travelers arriving at an airport), origin states (the number of travelers leaving from a state), and destination states (the number of travelers arriving in a state).
We downloaded each year’s data set from the Bureau of Transportation and collated them into one data set using R script. The data wrangling was done in a Jupyter notebook using Python.
III. Technology
For sharing and hosting our website, we used GitHub and GitHub Pages.
For the Communication visualizations, we used Vega-Lite for the monthly view and Tableau for the general view.
For the Persuasion visualization, we used Unity to create the visuals and map the audios.
The GitHub Page was created using basic HTML, CSS, and JS.
IV. User Feedback & Testing
We tested the visualization system with a few students in class. They liked our designs and system implementations. Some suggestions and insights include facilitating comparisons between visualizations, so for the ‘General View,’ we should show the ‘Distance’ and ‘Traveler Count’ visualizations side-by-side. Then for the Unity visualization, people suggested adding introductory text about the visualization and an audio signal to indicate a change in dates.
Results
Our visualizations were embedded into a static webpage hosted using GitHub Pages, which can be accessed at this link. The following image shows the main page.
On this page, users can click on buttons for different views of the airline data according to the categories: Persuasion and Analysis.
The following image showcases the Unity view and persuasion component for our visualization system.
The user is provided with introductory text and a start button to begin the interactive experience.
The previous images present two nodes to the user, representing the geographic area around LaGuardia Airport (LGA) in New York City. The red dots represent flights leaving LGA in New York City using animation. While hovering over the nodes, the volume of an associated aural icon changes with respect to the volume of the travelers leaving New York City. Readers reading this article must engage with the visualizations to better understand and interact with the animation, sound, and visuals.
The next images illustrate the general views of the data from an Analysis perspective.
The previous Box Plots show statistics related to the month-year pairs over the span of the entire data set timeline (January 2019 — November 2021). Users can hover over and click on the bars for details-on-demand.
The previous image showcases bar chart comparisons for Passengers and Distance over the span of the data set timeline.
The previous image showcases a heat map visualization for the annual aggregated number of travelers for each state. There are also linked bar charts for the number of travelers arriving and departing from a given state.
The next images illustrate the monthly views of the aviation mobility, a more focused view to understand moments during the years that had lower or higher traveler counts.
In the previous images, users can change the time frame using the top slider. The bar chart is linked and cross-highlights with the heat map, thus allowing users to isolate state-state pairs. Users can click outside of the bars to reset the cross-highlight.
Discussion
From the monthly view, some notable observations include the total number of traveler counts drops from around 7 million travelers in February 2020 to around 300,000 travelers in April 2020, which well illustrates the effects of peak Covid-19 pandemic on airline mobility.
From the general view, some notable annual observations also emphasize the monthly view observations such that there is a dramatic drop in traveler count from February 2020 to to April 2020. Since April 2020, the traveler count has slowly risen with more consistent increase starting from February 2021. An interesting question that may be derived from this trend is how long people endure crises or pandemics before they return to “normal” behavior?
From the persuasive view, it is interesting to consider how multimodal expressions can have a lasting impression on users. Comparing May 2019 and May 2020, there is a clear difference in the volume of the elicited sound, which may be more memorable than viewing objective visualizations for information.
Demo
We created a video explaining our visualizations and interactions, which can be accessed here.
Conclusion
This project on persuasive and communicative visualizations demonstrated how effective the human visual perceptual system can be. Although persuasive visualizations sacrifice some objectivity and may bias or misguide a user’s understanding of the data and information compared to the communicative visualizations, I found that the persuasive visualizations were the most memorable to me, and thus the most effective at communicating information. From watching all of my classmate’s present their visualization systems, I remember their persuasive visualizations more, notably the ones with creative and unique interactions or animations. Contrarily, the communicative visualizations are more objective and focused on conveying information, thus depending on the context and audience, they may be more valuable; however, I wonder what harm is there in making visualizations more engaging, and as a result producing more digestible information? If a user does not interact with a visualization in the first place (because it may be un-engaging), then is there a point in that visualization?
For the future, one limitation to this project and design process was our lack of technological expertise. Although our project is already amazing given our expertise and time frame, I believe that our system can be improved in many ways, especially on interactions, accessibility, and web interface design. I would enjoy continuing or expanding off of this project as multi-modal expression with combining sound and visuals is a very interesting and relevant research area.
Acknowledgments
I would like to thank my group mates Noah Okada, Ruochen Kong, and Vanessa Goris for being super creative, communicative, and accountable. I very much enjoyed working with them all for this design sprint, and I look forward to possibly working with them again in the future.
I would also like to thank my peers and friends, Jasmin Lim and Daisy Kim, for supporting the process.
