Data, Maps, Usability, and Performance

World Map with D3 Microlibraries and rotated to contain Russia

Last updated on October 24, 2017 in Development

World Map D3 v4 Microlibraries and Russia Alaska not split

It has been a while since I released the D3 Map Starter Kit and a lot has changed. The 4.0 version of D3 is modular, decentralized, and split into small libraries that you can use independently. It has changed some of the APIs so I have updated the World Map Template to work with D3 version 4, but how do we build a map with just the D3.js micro-libraries?

We need the TopoJSON script because it is small and allows us to use TopoJSON over GeoJSON. I decided not to include the D3 Request and instead I pulled the TopoJSON file with native XHR and processed it with JSON.parse. I did the same for CSV file that has the capitals and just split it by lines and commas. But I did include:

These other four libraries where needed to support the zoom and drag in the map:

Check out the source code of this D3.js World Map with Microlibraries

You might have noticed that this map looks a bit different. That piece of Russia on top left is now on the right side with all of Russia. Doesn’t that look so much better? Why is the 180th meridian (Antimeridian) an accepted line to separate the Western and Eastern Hemisphere?

Other mapping libraries like jVectorMap, JQVmap, AmCharts, and HighCharts get rid of that weird anti-meridian split to make the World Map look better.

In D3, all you have to do is rotate the projection by about -11 degrees. Here is another example with D3.js v3 and equirectangular projection. What do you think?

The only better option, in my opinion, is to allow the map to pan and zoom all the way around as you can with image tile based maps like Google Maps.

Tags: , ,

Facebook Twitter Hacker News Reddit More...