D3 Examples - Airline Routes within the US

xxxxxxxxxx
 
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <style>
      path {
        fill: none;
      }
      #airports circle {
        fill: #333333;
      }
      #states path {
        stroke-width: 1px;
        stroke: #999999;
        stroke-opacity: 1;
      }
      #routes path {
        stroke-width: 1px;
        stroke: #4040ff;
        stroke-opacity: 0.12;
      }
    </style>
  </head>
  <body>
    <div id="vis"></div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
    <script>
      // NOTE: code copied and cleaned up from CoffeeScript file
      //       original CoffeeScript at: https://www.bytemuse.com/post/airline-routes-contiguous-united-states-d3-js/
      
      var buildMap = function(error, stateData, airportData, routeData) {
        var width = 960,
            height = 500;
      
        var apLatLngs = {};
        for (var ndx = 0, _len = airportData.length; ndx < _len; ndx++) {
          ap = airportData[ndx];
          apLatLngs[ap.id] = ap.latLng = [parseFloat(ap.long), parseFloat(ap.lat)];
        }
        var projection = d3.geo.albersUsa().scale(width * 1.12).translate([width / 2, height / 2]);
        var path       = d3.geo.path().projection(projection);
        var svg = d3.select('#vis')
          .append('svg')
            .attr('width', width)
            .attr('height', height);
    
        var states   = svg.append('g').attr('id', 'states');
        var routes   = svg.append('g').attr('id', 'routes');
        var airports = svg.append('g').attr('id', 'airports');
        
        states.selectAll('path').data(stateData.features.filter(function(d, ndx) {
          return ndx !== 1 && ndx !== 11;
        })).enter()
          .append('path')
            .attr('d', path);
        airports.selectAll('circle')
          .data(airportData).enter()
          .append('circle')
            .attr('cx', function(d) { return projection(d.latLng)[0]; })
            .attr('cy', function(d) { return projection(d.latLng)[1]; })
            .attr('r', 2);
        routes.selectAll('path')
          .data(routeData).enter()
          .append('path')
            .attr('d', function(d) {
              return path({
                type: 'LineString',
                coordinates: [apLatLngs[d.src_id], apLatLngs[d.dest_id]]
              });
            });
      };
      queue()
        .defer(d3.json, 'us_states.json')
        .defer(d3.csv,  'us_airports.csv')
        .defer(d3.csv,  'us_routes.csv')
        .await(buildMap);
    </script>
  </body>
</html>
    