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?