COMPONENTS

DATE AND TIME

Ordinal day of the year:

Sunrise: , Sunset:

GEOGRAPHIC LOCATION

Time Zone

INFORMATION

Overview

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.

Background

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.

Credits

This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

D3.js
Copyright © 2010-2015, Michael Bostock
http://d3js.org   (LICENSE)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

JSURL
Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

Leaflet Maps API  v1.4.0
Copyright © Cloudmade, Vladimir Agafonkin - github.com/Leaflet,
https://leafletjs.com/   (LICENSE)

OpenStreetMap Map Data
Copyright © OpenStreetMap contributors - openstreetmap.org,
https://www.openstreetmap.org/about   (LICENSE)

SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)