Learning D3.js 5 Mapping - Second Edition

Drawing the hidden Canvas

There’s just a single simple function that does what you need in this step:

function drawHiddenCanvas(world) {  var countries = world.features;  countries.forEach(function(el, i) {    hiddenContext.beginPath();    hiddenPath(el);    hiddenContext.fillStyle = 'rgb(' + i + ',0,0)';    hiddenContext.fill();  });}

The only argument—world—is our GeoJSON feature collection. countries pulls out just the array of country information, including the polygons and the additional data we’re after. We loop through all of them, drawing each country with the hiddenContext and — most importantly—we gave each country a color using the rgb(<country index>, 0, 0) pattern.

Here we have it! A graph-like structure of our Canvas visual, representing our ...