D3.js Quick Start Guide

Using a projection

Now, let's start on our app.js file, as follows:

var width = 960;
var height = 490;

d3.select('svg')
    .attr('width', width)
    .attr('height', height);

At the bottom of app.js, let's add the following code:

var worldProjection = d3.geoEquirectangular();

This generates a projection, which governs how we're going to display a round world on a flat screen. There are lots of different types of projections that we can use, which can be seen at https://github.com/d3/d3-geo/blob/master/README.md#azimuthal-projections.

The preceding line tells D3 to create an equirectangular projection (https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular).