World Map with D3 Microlibraries and rotated to contain Russia
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:
- d3-selection for selecting DOM elements and joining to data
- d3-path to serialize CANVAS path commands to SVG
- d3-array to work with arrays
- d3-geo for geo projections
These other four libraries where needed to support the zoom and drag in the map:
- d3-dispatch for dispatching events like zoom
- d3-transition to animate transitions when zooming
- d3-drag to drag, pan, or move the map
- d3-zoom for zoom functionality
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.
