Learning D3.js 5 Mapping - Second Edition

Setting up the map

First, we set up a few global variables:

var width = 1000,    height = 600,    countries,    airportMap,    requestID;

width and height speak for themselves. Countries will hold the GeoJSON data to draw the globe, which needs to be reached from various function scopes. Hence, it's easier to define it as a global variable in this small app. airportMap will allow us to join the airport with the routes data by the three-letter IATA code. requestID will be filled by our loop function requestAnimationFrom() and used to cancel the current loop. We shall get to this in no time.

We then set up the two contexts: a context for the world and a context for the planes. This little extra work at the beginning makes our life much easier later. If ...