Why you arrive from the North when flying to the US from Iceland.

When flying to the US via Iceland, you never arrive from the East, but always cross the North US border. This two-point equidistant projection focused on Keflavik airport, Iceland (red) and San José airport, USA (blue) demonstrates why.

The circles are great circles centered on either airport spaced at 10° intervals.

The projection implementation is still a work in progress, hence the visual artifacts; it requires elliptical clipping. Based on a gist by Mike Bostock.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.land {
  fill: #eee;
  stroke: #444;
  stroke-width: .5px;
}

.circle {
  fill: none;
}

.circle.a {
  stroke: #f00;
}

.circle.b {
  stroke: #00a2f3;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js?9823229"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 960;

var a = [-22.623408, 63.996136], // KEF, Iceland
    b = [-121.925906,37.366695], // SJC, USA
    circle = d3.geo.circle();

var projection = d3.geo.twoPointEquidistant()
    .points([a, b])
    .scale(185)
    .translate([width / 2, height / 2])
    .precision(.1);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height).append("g")
    .attr("transform", "rotate(-90,480,480)");

svg.append("g")
    .attr("class", "circle a")
  .selectAll("path")
    .data(d3.range(10, 180, 10))
  .enter().append("path")
    .attr("d", function(r) { return path(circle.origin(a).angle(r)()); });

svg.append("g")
    .attr("class", "circle b")
  .selectAll("path")
    .data(d3.range(10, 180, 10))
  .enter().append("path")
    .attr("d", function(r) { return path(circle.origin(b).angle(r)()); });

d3.json("/d/4090846/world-110m.json", function(error, world) {
  svg.insert("path", ".circle")
      .datum(topojson.object(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);
});

d3.select(self.frameElement).style("height", height + "px");

</script>

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

Modified http://d3js.org/d3.geo.projection.v0.min.js?9823229 to a secure url

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

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

https://d3js.org/d3.geo.projection.v0.min.js?9823229

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