D3 Examples - demoD3

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]
    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>
​
    