demoD3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  <style>
    body {
      margin: 0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }
    path {
      fill: none;
      stroke: black;
    }
  </style>
</head>

<body>
  <script>
    pyongyang = [125.75, 39.03]
    washington = [-77.01, 38.89]
    portee = d3.geoCircle().radius(6700 * 360 / ( 2 * Math.PI * 6371))
			.center(pyongyang)()
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
		
    // Projections : TwoPointEquidistant, Equirectangular, Orthographic, Larrivee, Armadillo
    projection = d3.geoEquirectangular()
//    	.points(pyongyang,washington)
    	.rotate([180,0])
    
    path = d3.geoPath(projection)
    
    svg.append("path")
    	.attr("d", path({ type: "Sphere"}) )
    
    d3.json("https://rawgit.com/visionscarto/some-geo-data/master/ne_110m_admin_0_countries/countries.geojson",
      function(err, continents) {
     	
      svg.append("path")
    		.attr("d", path(continents) )
      	.style("fill", "#ddd")
			
      svg.append("path")
    		.attr("d", path(portee) )
      	.style("fill", "rgba(255,0,0,0.5)")
      
      svg.append("path")
    		.attr("d", path({type: "Point", coordinates: pyongyang}) )
      	.style("fill", "red")
      
      svg.append("path")
    		.attr("d", path({type: "Point", coordinates: washington}) )
      	.style("fill", "red")

svg.append("path")
    		.attr("d", path({type: "LineString", coordinates: [pyongyang, washington]}) )
      	.style("stroke", "red")

}
    )

</script>
</body>

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

https://d3js.org/d3-geo-projection.v2.min.js