geoCircle in d3.v4 (geoOrthographic) by fil

This example to illustrate d3.geoCircle for Spaxe.

forked from mbostock‘s block: Two Point Equidistant

forked from Fil‘s block: geoCircle in d3.v4

index.html

<!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.v4.0.0-rc.2.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var a = [0, 90], // NORTH POLE
    b = [-77, 39], // Washington, DC
    circle = d3.geoCircle();

  console.log(d3)
  
var projection = d3.geoOrthographic()
    .scale(140)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geoPath()
    .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(5, 90, 5))
  .enter().append("path")
    .attr("d", function(r) { return path(circle.center(a).radius(r)()); });

svg.append("g")
    .attr("class", "circle b")
  .selectAll("path")
    .data(d3.range(5, 90, 5))
  .enter().append("path")
    .attr("d", function(r) { return path(circle.center(b).radius(r)()); });

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/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>