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="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js?9823229"></script> | |
| <script src="http://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> |
