<body>
  <div id="world"></div>
</body>
console.log('Downloading OpenFlights airports...');

let airports = new Promise((ok, ko) => d3.text('//static.redsift.io/thirdparty/openflights/airports.csv', 
                                               (err, d) => err ? ko(err) : ok(d)));
airports
  .then(t => {
    console.log('...Done');
    // extract out a table of lat / longs
    return d3.csvParseRows(t).map(e => [ Number(e[7]), Number(e[6]) ]);
  })
  .then(d => {
    // generate random links from LHR(row 507)
    let idxs = d.filter((e, i) => i % 600 === 0);

    return { points: idxs, links: idxs.map(to => [ ...d[507], ...to]) };
  })
  .then(d => {
    // d.points is an array to arrays where each entry represents a airport 
    // d.links is an array to arrays where each entry represents a link 
    let geo = d3_rs_geo.html()
        .points(d.points)
        .links(d.links)
        .country(true)
        .margin({ top: 0, left: 10, right: 240, bottom: 130});

    d3.select('#world')
      .datum('//static.redsift.io/thirdparty/topojson/examples/world-110m.json')
      .call(geo);  
  })
  .catch(e => console.log(e.stack));

View Compiled

External CSS

  1. //static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css

External JavaScript

  1. //d3js.org/d3.v4.min.js
  2. //static.redsift.io/reusable/d3-rs-geo/latest/d3-rs-geo.umd-es2015.min.js