Learning D3.js 5 Mapping - Second Edition

Building the flight path map in Canvas

Let's start with an overview of our Canvas application before we take it apart.

It's best to quickly get the HTML out of the way as it couldn't be much simpler. We have a div for the canvas at hand as well as our buttons:

<div id="canvas-map"></div><div id="controls">    <div class="flight-select" id="button-header">Pick number of flights:</div>    <button class="flight-select" data-flights="100">100</button>    <button class="flight-select" data-flights="1000">1,000</button>    <button class="flight-select" data-flights="5000">5,000</button>    <button class="flight-select" data-flights="10000">10,000</button>    <button class="flight-select" data-flights="15000">15,000</button> <button class="flight-select" data-flights="20000">20,000</button> ...