Drawing the world on a Canvas

Let’s start drawing a globe. This is straightforward, very much building on the preceding chapter.

Setting up

First, you will create a few variables required for initialization. We’ll come back to this list as the application grows, but, for now, it’s lean:

var width = 960,
    height = 600,
    projectionScale = height / 2.1,
    translation = [width / 2, height / 2];

You are setting the width and height of the Canvas as well as the scale and the translation of the globe. Each projection has their own ideal starting scale. You can play with this number to find the right scale. You will use the width and height straight away, setting up the Canvas and its context:

var canvas = d3.select('#canvas-container').append('canvas')
    .attr('id', 'canvas-globe')
    .attr('width', width)
    .attr('height', height);
var context = canvas.node().getContext('2d');

No magic here. Note that we have a div with the #canvas-container ID in our HTML, in which you add the main Canvas...