Orthographic to Azimuthal Equidistant Projection

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

path {
  fill: none;
  stroke-linejoin: round;
}

.sphere,
.graticule {
  stroke: #aaa;
}

.boundary {
  stroke: #333;
  stroke-width: 0.5px;
  
}

.coastline {
  stroke: #333;
    stroke-width: 1px;
}

.equator {
  stroke: red;
  stroke-width: 1px;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script>

var width = 960,
    height = 540;
    
var feature;

var projs = {
    ortho : d3.geo.orthographic()
      .rotate([10, -10])
      .center([-10, 10])
      .scale(120)
      .clipAngle(180 - 1e-3)
      .translate([width / 2, height / 2]),
    AEQ : d3.geo.azimuthalEquidistant()
      .rotate([10, -10])
      .center([-10, 10])
      .scale(120)
      .clipAngle(180 - 1e-3)
      .translate([width / 2, height / 2]),
    gingery: d3.geo.gingery()
      .rotate([10, -10])
      .center([-10, 10]) .radius(30)
      .clipAngle(180 - 1e-3)
      .translate([width / 2, height / 2])
      .scale(120)
      .precision(.1)
};

var projection = interpolatedProjection(projs.ortho,projs.AEQ);
var path = d3.geo.path().projection(projection);

var graticule = d3.geo.graticule().step([30,30]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path);

var defs = svg.append("defs");

defs.append("clipPath")
    .attr("id", "clip")
  .append("use")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "background")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

/*
svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
    .attr("class", "equator")
    .attr("d", path);
*/
d3.json("/../../data/world-110m.json", function(error, world) {
  var graticule = d3.geo.graticule()(),
      l//and = topojson.feature(world, world.objects.land),
      //boundary = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }),
      coastline = topojson.mesh(world, world.objects.countries, function(a, b) { return a == b; });
      
      
//  svg.append("path", ".boundary").datum(boundary).attr("class", "boundary").attr("d", path);
  svg.append("path", ".coastline").datum(coastline).attr("class", "coastline").attr("d", path);    
      
  feature = svg.selectAll("path");
  animation();
});

function interpolatedProjection(a, b) {
  var projection = d3.geo.projection(raw).scale(1),
      center = projection.center,
      translate = projection.translate,
      α;

function raw(λ, φ) {
    var pa = a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = b([λ, φ]);
    return [(1 - α) * pa[0] + α * pb[0], (α - 1) * pa[1] - α * pb[1]];
  }

projection.alpha = function(_) {
    if (!arguments.length) return α;
    α = +_;
    var ca = a.center(), cb = b.center(),
        ta = a.translate(), tb = b.translate();
    center([(1 - α) * ca[0] + α * cb[0], (1 - α) * ca[1] + α * cb[1]]);
    translate([(1 - α) * ta[0] + α * tb[0], (1 - α) * ta[1] + α * tb[1]]);
    return projection;
  };

delete projection.scale;
  delete projection.translate;
  delete projection.center;
  return projection.alpha(0);
}

</script>

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

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

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

Changed /mbostock/raw/4090846/world-110m.json to a local referenece

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

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

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