Carto école d'été

<!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 ]
    
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", 960)
      .attr("height", 500)
			
// 		projection = d3.geoOrthographic()
//     projection = d3.geoEquirectangular()
		projection = d3.geoLarrivee()
    	.rotate([80,-10])	
    
    path = d3.geoPath(projection)
    
    portee = d3.geoCircle()
    	.radius(6700 * 360 / ( 2 * Math.PI * 6371))
    	.center(pyongyang)()
    
    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(error, continents) {
  			if (error) throw error;
        
        svg.append("path")
        	.attr("d", path(continents))
        	.style("fill", "#e5e5e5")
        
        svg.append("path")
        	.attr("d", path(portee))
        	.style("fill", "rgba(200,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-dasharray", "5,5")
        	.style("stroke", "red")
        
    })
  </script>
</body>

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

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