Visualization of search results on Travulator.com

Ilyes Kamoun

Project Overview

For my final project I constructed two visualizations using data from Travulator.com. Travulator.com is a meta-search travel website I designed that allows users to find and book bus, plane, and train tickets between Boston, New York, Philadelphia, and Washington. The first visualization graphs the search results on a scatter plot with price on the x axis and trip duration on the y axis. The second visualization graphs the 3-month average flight delay between the airports listed in the search results, and provides information about the airports' on-time ratings. After coding the visualizations in Processing, they were ported to JavaScript using Processing.js and embedded on the website. The visualizations use dynamic data retrieved from a server-side file.

Rationale for the visualizations

Search Vis

Travulator.com allows users to compare travel options across several travel methods and users may be interested in comparing several parameters in the search results at once. The tradeoff between price and time is an especially important and relevant comparison for users of the site, as there is significant variation in time and trip duration across travel methods in the Northeast corridor. However, it can be difficult to compare these parameters when there are many results and the results are presented in a list format.

With these user preferences in mind, I set out to create visualization that would make comparisons of the trip options simple and elegant. My solution was to create a scatter plot. By harnessing the position channel, the visualization allows the user to easily eliminate inferior trip options and allows the user to select the trip that corresponds to his optimal time/price preference.

Airport Delay Vis

Delays are costly for business travelers who need to get to their destination on time. Interestingly, most flight booking websites do not provide information about expected airport delays, even if data suggests that there is significant variation in airport delays across the major airports in the Northeast corridor.

The visualization I created provides users with information about the expected delay between the airport pairs listed in the search results, as well as on-time percentage ratings in a series of stacked bar graphs.

Screenshots of the visualizations

The user performs a search a query.

The search results.

A panel next to the results presents the visualization of average airport delay times.

When the user clicks "Visualize Results" a new page is loaded with the visualization of the search results.