Learning D3.js 5 Mapping - Second Edition

Creating all things hidden

By now, you’ve set up so many Canvases that, at worst, this code just bores you:

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

The only thing we want to make sure of here is to apply the same width and height that we applied to the main Canvas.

Next, we will draw the world to it. In order to do so, we have to build a projection and path generator and then loop through all countries to draw each country to the Canvas; let's do that:

var hiddenProjection = d3.geoEquirectangular()    .translate([width / 2, height / 2])    .scale(width / 7);var hiddenPath = d3.geoPath() ...