Continents and Map Projections with D3.js

If you are familiar with “slippy map” APIs like Google Maps or Leaflet, than you probably never consider map projections and stick to the default Mercator projection. But there are many other projections (transposing our 3D earth to a 2D object like a paper or computer screen) and D3 comes with a great geo projection plugin. Most D3 examples leverage Natural Earth vector data and I wanted to do the same but show continents on the map instead of countries. So, today, I will create a World Map of Continents with D3 and a map projection visualization that shows how continents change the way they look with different map projections.

First, let’s create a world map of continents with D3. Natural Earth has continent parameters in their data so when we generate the geoJSON and topoJSON files for D3, we can place these attributes into the JSON file. This allows us to manually create a Feature Collection that is composed of all the countries in a given continent. Here is the result, the D3 world map of continents based on Natural Earth Vectors. As you can see, this map is not perfect. I know that French Guyana is part of France but it should be part of South America not Europe. Unfortunately, Natural Earth does not treat France and French Guyana as separate entities. I have fixed that in this new D3 World Map Template.

I created the continents by using the JavaScript filter function to grab all the countries from a specific continent and I added all those features to my custom Feature Collection. The projections loop was taken mostly from this example. Here is the result, the D3 map projections and continents. So, what is your favorite map projection?

External

slipp map projections explained
choosing right map projection
D3 Morphing Map Projections