D3 AlbersUSA Voronoi Arc Map

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">

body {
      font: 300 36px "Helvetica Neue";
      height: 640px;
      margin: 80px 160px 80px 160px;
      overflow: hidden;
      position: relative;
      width: 960px;
    }

a:link, a:visited {
      color: #777;
      text-decoration: none;
    }

a:hover {
      color: #666;
    }

blockquote {
      margin: 0;
    }

blockquote:before {
      content: "“";
      position: absolute;
      left: -.4em;
    }

blockquote:after {
      content: "”";
      position: absolute;
    }

body > ul {
      margin: 0;
      padding: 0;
    }

h1 {
      font-size: 64px;
    }

h1, h2, h3 {
      font-weight: inherit;
      margin: 0;
    }

h2, h3 {
      text-align: right;
      font-size: inherit;
      position: absolute;
      bottom: 0;
      right: 0;
    }

h2 {
      font-size: 24px;
      position: absolute;
    }

h3 {
      bottom: -20px;
      font-size: 18px;
    }

.invert {
      background: #1f1f1f;
      color: #dcdccc;
    }

.invert h2, .invert h3 {
      color: #7f9f7f;
    }

.string, .regexp {
      color: #f39;
    }

.keyword {
      color: #00c;
    }

.comment {
      color: #777;
      font-style: oblique;
    }

.number {
      color: #369;
    }

.class, .special {
      color: #1181B8;
    }

body > svg {
      position: absolute;
      top: -80px;
      left: -160px;
    }

.states {
      fill: #ccc;
    }

.state-borders {
      fill: none;
      stroke: #fff;
      stroke-width: 1.5px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

.airport-arcs {
      display: none;
      fill: none;
      stroke: #000;
    }

.airport-cell {
      fill: none;
      pointer-events: all;
    }

.airports circle {
      fill: steelblue;
      stroke: #fff;
      pointer-events: none;
    }

.airport:hover .airport-arcs {
      display: inline;
    }

svg:not(:hover) .airport-cell {
      stroke: #000;
      stroke-opacity: .2;
    }

</style>
  </head>
  <body>
    <h2>
      <span>U.S. commercial airports</span>, 2008<br>
      great arcs and symbol map
    </h2>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript">

var width = 1280,
        height = 800;

var projection = d3.geo.albersUsa()
          .scale(1400)
          .translate([640, 340]);

var path = d3.geo.path()
        .projection(projection);

var voronoi = d3.geom.voronoi()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .clipExtent([[0, 0], [width, height]]);

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

queue()
        .defer(d3.json, "us.json")
        .defer(d3.csv, "airports.csv")
        .defer(d3.csv, "flights.csv")
        .await(ready);

function ready(error, us, airports, flights) {
      var airportById = d3.map(),
          positions = [];

airports.forEach(function(d) {
          airportById.set(d.iata, d);
          d.outgoing = [];
          d.incoming = [];
      });

flights.forEach(function(flight) {
        var source = airportById.get(flight.origin),
            target = airportById.get(flight.destination),
            link = {source: source, target: target};
        source.outgoing.push(link);
        target.incoming.push(link);
      });

airports = airports.filter(function(d) {
        if (d.count = Math.max(d.incoming.length, d.outgoing.length)) {
          d[0] = +d.longitude;
          d[1] = +d.latitude;
          var position = projection([d[0], d[1]]);
          if (position) {
            d.x = position[0];
            d.y = position[1];
          } else {
            d.x = d[0];
            d.y = d[1];
          }
          return true;
        }
      });

voronoi(airports)
          .forEach(function(d) { d.point.cell = d; });

svg.append("path")
          .datum(topojson.feature(us, us.objects.land))
          .attr("class", "states")
          .attr("d", path);

svg.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
          .attr("class", "state-borders")
          .attr("d", path);

var airport = svg.append("g")
          .attr("class", "airports")
        .selectAll("g")
          .data(airports.sort(function(a, b) { return b.count - a.count; }))
        .enter().append("g")
          .attr("class", "airport");

airport.append("path")
          .attr("class", "airport-cell")
          .attr("d", function(d) { return d.cell.length ? "M" + d.cell.join("L") + "Z" : null; })
          .on("mouseover", function(d, i) { d3.select("h2 span").text(d.name); });

airport.append("g")
          .attr("class", "airport-arcs")
        .selectAll("path")
          .data(function(d) { return d.outgoing; })
        .enter().append("path")
          .attr("d", function(d) { return path({type: "LineString", coordinates: [d.source, d.target]}); });

airport.append("circle")
          .attr("transform", function(d) { return "translate(" + projection(d) + ")"; })
          .attr("r", function(d, i) { return Math.sqrt(d.count); });

}

d3.select("input[type=checkbox]").on("change", function() {
      cells.classed("voronoi", this.checked);
    });
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js