Learning D3.js 5 Mapping - Second Edition

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 ...