Data, Maps, Usability, and Performance

Time Zone World Map with D3 and TopoJson

Last updated on December 30, 2017 in Development

D3 TimeZone Map

I was doing some API work with time zones recently and was surprised not to find a D3 time zone map implementation. After some browsing, I did find a OpenLayers and Gmaps time zone map implementation but it does not use GeoJSON. I found a KML file of time zones here and decided to quickly put together a D3.js time zone world map using TopoJSON.

TopoJSON is pretty awesome because it not only makes GeoJSON files much smaller but it also gives you many options around simplification, quantization, and conversion. TopoJSON actually supports GeoJSON, TopoJSON, ESRI shapefile, CSV, and TSV files for conversion and the installation is dead simple because it runs on Node.JS and can be installed using NPM. I first used ogr2ogr to turn the timezone.kml file into GeoJSON and then I used the following TopoJSON command to simplify and quantize the file into a small topoJSON file:

topojson -o timezones-topo2.json -p “Name” -q 1e2 timezones.json

The -p “Name” port keeps the Name of each time zone section in the topoJSON file so that I can use it in tooltips. If you zoom in, you can see the effect of the extreme quantization but the map looks good from far away.

Here is the D3 Time Zone World Map. What do you think?


Time Zone Wikipedia Article
Time Zone Picker
Time Zone Map
Sources for Time Zone and Daylight Saving Time Data
A shapefile of the TZ timezones of the world
World Time Zones
World Time
Google Time Zone API
10 Ways to Visualize Time Zones
Polygon World Map Example
Time Zone Database
Standard Time Zones Large Image
Worldwide Time Zone Map
World Clock Time Zones JSON Data Feeds
Another timezones JSON file
GeoNames TimeZone API Call Example

Tags: , , ,

Facebook Twitter Hacker News Reddit More...