Shared Itinerary

Tags DatabasesProgrammingRuby on RailsSVG

I’ve been to a lot of conferences, conventions, and trips where a group of people are coming on several different flights, yet trying to share cars from the airport. Traditionally, this has been a bit of an organizational challenge, usually involving having everyone post their flights to a shared spreadsheet. I created Shared Itinerary to show everyone’s flights visually, so you can easily see who’s arriving and departing at similar times.



Languages & Frameworks
  • Ruby on Rails (2.5.1, 5.2.3)
  • HTML
  • CSS
  • SCSS
  • SVG
  • JavaScript
  • PostgreSQL
Version Control
Project Management

Shared Itinerary

Flight charts are the primary purpose of the Shared Itinerary. These charts show flights and layovers on each day for each attendee.

For arrivals, the attendees are sorted by arrival airport and arrival time. For departures, the attendees are sorted by departure airport and departure time. This makes it easy for any given attendee to see if they’re arriving at or departing from the event at around the same time.

Below the charts are tables showing details for all of the travelers’ flights.

The Shared Itinerary is designed to keep travelers’ flight information private. The creator of an event must give out a share link to allow anybody else access.


Since I’m such a fan of tracking travel, I’ve often ended up being the person tabulating friends’ flight arrivals and departures for conventions.

In early 2015, a group of friends had started posting their flights for a summer convention we’d all be attending.

I’d recently been looking up flights on ITA Matrix Airfare Search, which has a time bar view that visually shows the times and durations of a large number of flights:

In this case, Matrix is showing a different flight option in each row, and you can easily see at a glance what flights depart around the same times. I realized that something similar to these time bars could work great to graphically show different travelers’ flight times, too, and began sketching out a prototype layout.

In order for this to work, I needed to be able to generate an image automatically from a collection of data. I’d had some experience with using both ASP and PHP to generate bar graphs. However, I’d wanted to learn how to generate Scalable Vector Graphics (SVG) images for a while. Since SVG could be embedded inline in HTML, it would be relatively easy to generate them in a Ruby on Rails application.

My initial prototype worked very well; I could provide a nested array of flight data and it would create time bar inspired charts of the flight times. However, an array wasn’t a good long term solution for flight data storage; I would be required to edit my code every time I wanted to add a new flight, and it wouldn’t allow me to let other people create their own group itineraries.

I created a simple database backend for the Shared Itinerary, with the following structure:

From this structure, I could easily look up all flights associated with a given event and create the appropriate SVG charts.

Change Log

Date Release Changes
5 October 2016 0.2 Move chart code to Chart class
19 June 2016 0.1 Beta