example/airline-routes/us-international-outbound.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/d3-dsv"></script>
  <script src="//unpkg.com/index-array-by"></script>

  <script src="//unpkg.com/aframe"></script>
  <script src="//unpkg.com/@ar-js-org/ar.js"></script>

  <script src="//unpkg.com/globe-ar"></script>
  <!--<script src="../../dist/globe-ar.js"></script>-->
</head>

<body>
<div id="globeViz"></div>

<script>

  const COUNTRY = 'United States';
  const OPACITY = 0.22;

  const myGlobe = GlobeAR()
    (document.getElementById('globeViz'))

    .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')

    .arcStartLat(d => +d.srcAirport.lat)
    .arcStartLng(d => +d.srcAirport.lng)
    .arcEndLat(d => +d.dstAirport.lat)
    .arcEndLng(d => +d.dstAirport.lng)
    .arcDashLength(0.25)
    .arcDashGap(1)
    .arcDashInitialGap(() => Math.random())
    .arcDashAnimateTime(4000)
    .arcColor(d => [`rgba(0, 255, 0, ${OPACITY})`, `rgba(255, 0, 0, ${OPACITY})`])
    .arcsTransitionDuration(0)

    .pointColor(() => 'orange')
    .pointAltitude(0)
    .pointRadius(0.02)
    .pointsMerge(true);

  // load data

  const airportParse = ([airportId, name, city, country, iata, icao, lat, lng, alt, timezone, dst, tz, type, source]) => ({ airportId, name, city, country, iata, icao, lat, lng, alt, timezone, dst, tz, type, source });
  const routeParse = ([airline, airlineId, srcIata, srcAirportId, dstIata, dstAirportId, codeshare, stops, equipment]) => ({ airline, airlineId, srcIata, srcAirportId, dstIata, dstAirportId, codeshare, stops, equipment});

  Promise.all([
    fetch('https://github.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text())
      .then(d => d3.csvParseRows(d, airportParse)),
    fetch('https://github.com/jpatokal/openflights/master/data/routes.dat').then(res => res.text())
      .then(d => d3.csvParseRows(d, routeParse))
  ]).then(([airports, routes]) => {

    const byIata = indexBy(airports, 'iata', false);

    const filteredRoutes = routes
      .filter(d => byIata.hasOwnProperty(d.srcIata) && byIata.hasOwnProperty(d.dstIata)) // exclude unknown airports
      .filter(d => d.stops === '0') // non-stop flights only
      .map(d => Object.assign(d, {
        srcAirport: byIata[d.srcIata],
        dstAirport: byIata[d.dstIata]
      }))
      .filter(d => d.srcAirport.country === COUNTRY && d.dstAirport.country !== COUNTRY); // international routes from country

    myGlobe
      .pointsData(airports)
      .arcsData(filteredRoutes);
  });
</script>
</body>