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

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.

xxxxxxxxxx
 
<!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>
​
    