| license: gpl-3.0 |
This example demonstrates the unique property of the two-point equidistant projection: great circles centered around either of the two reference points (here Honolulu and Washington, D.C.) are projected as circles.
The projection implementation is still a work in progress, hence the visual artifacts; it requires elliptical clipping.
| <!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="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 960; | |
| var a = [-158, 21.5], // Honolulu, HI | |
| b = [-77, 39], // Washington, DC | |
| 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); | |
| 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("/mbostock/raw/4090846/world-110m.json", function(error, world) { | |
| if (error) throw error; | |
| svg.insert("path", ".circle") | |
| .datum(topojson.feature(world, world.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
