Ordinal day of the year:

Sunrise: , Sunset:


Time Zone



The aim of this app is to show the location of day and night on the world map for any given date and time. As I regularly have online meetings with people from lots of different countries, having the abiity to select the meeting date/time and, with a single glance, get a full understanding of where morning and evening is at each participant's location is really useful to me. It also means I can quickly search for times that maximise convenience.

Whilst the app displays some default locations when you first start it, you can customise and save them in any way you want. You can also copy/paste or drag/drop your settings as simple JSON data if you have different meetings with different participants in different locations.


For me, creating this app was about mastering the standard Javascript Date object. As many others will attest, working with multiple timezones in Javascript is a mess, and so it proved. However it is something that needed dealing with so I had to get on top of it early so it didn't become an issue.

This app was also my first experiment with map projection transitions in D3. I thought it was going to be pretty simple as there are lots of other examples of transitioning between equirectangular and orthographic map projections. However, all of the other examples deal only with a static canvas size with a set 2:1 aspect ratio. Having the canvas resizeable to any aspect ratio, including portrait, adds a whole new dimension of pain.

Also, allowing rotation of the spherical map made the transition origin jump all over the place and, despite many hours of experimentation, the logic required to compensate for it remains elusive.

© Dr. Andrew J. Marsh, 2014.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.


This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. -,   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran,,   (LICENSE)

Copyright © 2010-2015, Michael Bostock   (LICENSE)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,   (LICENSE)

JSON Editor
Copyright © 2015 Jos de Jong -   (LICENSE)

Copyright © 2011 Bruno Jouhier -   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk -,   (LICENSE)

Leaflet Maps API  v1.4.0
Copyright © Cloudmade, Vladimir Agafonkin -,   (LICENSE)

OpenStreetMap Map Data
Copyright © OpenStreetMap contributors -,   (LICENSE)

Copyright © 2014 Federico Zivolo -   (LICENSE)