Time Zone Chart

Time Zone Chart is a single page application which creates a chart showing your time zone changes over the duration of a trip.

Capabilities

Tools

Languages & Frameworks JavaScript
jQuery
moment.js
SVG
HTML
CSS
Version Control Git
Hosting Heroku (as part of my Portfolio)
Project Management Trello

History

As I travel frequently, I can be in many time zones over the course of a week. I wanted a way to show this visually, and eventually I drew myself a chart for one of my trips. I decided to go with comparing my number of hours ahead of or behind UTC (GMT) to the time in UTC, which allowed me to not only capture time changes from travel, but also from daylight saving time shifts.

My time zone changes over three weeks in late 2015

This chart accomplished what I wanted, but it was a pain to create, as I had to manually draw each bar and line to the correct position and length. I wanted to create an application which would let me enter in the locations, times, and time zones, and would generate a chart for me.

Design

Since I’d done some playing around with Scalable Vector Graphics (SVG) charts for my Shared Itinerary project, SVG seemed like a logical choice. SVG effectively draws shapes on a screen based on position and height and width parameters, and those would be reasonably easy to calculate from data entered into a form.

However, unlike Shared Itinerary’s server-side SVG rendering, I decided to render the chart client-side instead. This would let the application update the chart as soon as the user filled in a field, and it would allow the application to resize the full-screen chart if the user resized the window.

Doing the chart client-side realistically meant using JavaScript. Fortunately, inline SVG acts like any other HTML in the HTML Document Object Model (DOM), so it’s very easy to manipulate SVG elements with JavaScript and jQuery. (Creating SVG elements requires specifying the SVG namespace, so I did end up having to use document.createElementNS instead of the jQuery element creation functions, which I wrapped in my own createSVG(type, attr) function.)

I used moment.js to handle times, as I needed to ensure everything was operating as UTC, and JavaScript’s native Date functionality isn’t great beyond the user’s local timezone.