One of the things I enjoyed most about growing up in Michigan was the late summer nights.  Because we were so far north and quite far west within our time zone, it stays light until 9:30 PM or even later during parts of June or July.  Unfortunately, the other side of the coin is the fact that daylight is in short supply during the winter. Of course, sunrise and sunset times vary a great deal by location, and it’s interesting to compare cities.

With that in mind, I wrote a web app, which I call Sunrise / Sunset.  It uses Google Charts for the visualization, and is written entirely in JavaScript, with some jQuery and Bootstrap thrown in for good measure.

Before we dive into any code, here’s a screen shot of the app:

If you’d like to try running it, just click on this:  Try it (in a new window)

The source code in JSFiddle is here:  Source code on JSFiddle

How it works, and what it’s showing
At the top of the screen, there’s a drop down selector with a few city names listed.  When one of the cities is selected, a graph is displayed showing a representation of sunrise and sunset times over an entire year, with January 1 at the left edge of the graph, and December 31 on the right.

Each vertical line or column represents a day.  The columns run together, so it looks fairly continuous, although at certain screen sizes there are some gaps due to rounding during rendering by the browser.  As the mouse is moved across the graph, a custom tool tip shows the date hovered over, as well as that day’s sunrise and sunset times.

Lots of Math: calculating the sunrise and sunset times in JavaScript
Calculating sunrise and sunset times is a complex process, filled with astronomical equations that I don’t pretend to understand.  Luckily, I was able to find some JavaScript code on a U.S. government website that had all of the required calculations, although the code was frankly a bit of a mess.  As you might expect, all variables and functions lived in the global name space, but beyond that, the code to do the calculations was intermingled with code related to user input and the display of the results.  It wasn’t pretty.

The first step in refactoring was encapsulating the code into an object called SunTimeCalculator.  The constructor for this object takes a latitude, longitude, and time zone value (Eastern time zone is -5, Central is -6, etc)  New code was added to calculate when to use Daylight Savings, as well as code to produce pretty output.

Google Charts for a powerful visualization
A candlestick chart was used to display the data.  Normally, candlestick charts have a thin “tail” that extends up and down, below a thicker bar, giving a total of four numbers per data point.  In this case, there was a need for only two – those being the sunrise time and the sunset time.  To eliminate the tails, the data was supplied as an array [a, a, b, b] rather than [a, b].

The times for each day are converted into numbers before graphing.  The value of a time is equal to the hours * 60 + the minutes, which gives a range from 0 to 23*60+59 = 1439.  The axes labels are customized to show the ranges in a human-readable format.

Conclusion
It’s a fun app, and can easily be extended by adding more locations, or allowing the user to enter a latitude and longitude of their choice (possibly driven by Google Maps).