Projecting the world map

What if our visualization project is not just about US, but rather concerns the whole world? No worries, D3 comes with various built-in projection modes that work well with the world map that we will explore in this recipe.

Getting ready

Open your local copy of the following file in your web browser hosted on your local HTTP server:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter12/world.html

How to do it...

In this recipe we will project the world map using various different D3 built-in projection modes. Here is the code sample:

<script type="text/javascript"> 
    var width = 300, 
        height = 300, 
        translate = [width / 2, height / 2]; 
 
    var projections = [ // <-A 
        {name: 'geoAzimuthalEqualArea', fn: d3.geoAzimuthalEqualArea() 
                .scale(50) 
                .translate(translate)}, 
        {name: 'geoConicEquidistant', fn: d3.geoConicEquidistant() 
                ...