D3 Examples - US Flights animation (Canvas2D)

Animating 3000 Flights using Canvas2D

Source code for animation used in #AirplaneMode

Orange dots = landing
Blue dots = takeoff

Config settings

var landingColor = '#fe761e'; var takeOffColor = '#3081dd'; var lineColor = '#5297ee'; var fps = 60; var curveFactor = 50; var speed = 0.99; // between 0 & 1 var drawLines = true; var batchSize = 12;

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
  <script src="routes.js"></script>
  <script src="helpers.js"></script>
  <script src="bundle.js"></script>
<style>
 body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
.states {
  fill: #696969;
  stroke: #6cb0e0;
  stroke-width: 0.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
​
.airports {
  fill: #000;
  stroke: transparent;
  stroke-width: 0.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
​
</style>
</head>
​
<body>
  <div id="flightMap"></div>
  <div>Blue dots = takeoff
  <div>Orange dots = landing</div>
  <script>
    initMap('#flightMap')
  </script>
</body>
​
    