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.
- Allows a user to enter an arbitrarily large number of destinations, each with their own time zone
- Automatically creates an SVG chart of UTC time on the x-axis and UTC offset on the y-axis as the user enters data
- Allows the user to download the SVG chart as an .svg file
- Allows the user to switch to a full chart screen view, which automatically resizes as the window resizes
|Languages & Frameworks|
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.
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.
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.
document.createElementNS instead of the jQuery element creation functions, which I wrapped in my own
createSVG(type, attr) function.)