D3 Examples - Carto école d'été

xxxxxxxxxx
 
<!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>
​
    