D3 Examples - Globe

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/topojson-client@2"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var w = 960,
            h = 500;
    
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)
​
    svg.append("text")
      .text(land)
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
​
    //set projection
    var projection = d3.geoOrthographic()
        .scale((h-10)/2)
        .translate([w/2,h/2]);
    
    // set path
        var path = d3.geoPath()
    .projection(projection);
    
    var land = []
    
    
    drawMap = d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;
 
  var sphere = {type: "Sphere"},
      land = topojson.feature(world, world.objects.land);
      
      svg.append("text")
      .text(land)
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    })
//render globe
    renderglobe = function(feature){
      
      svg.selectAll("path")
      .data(feature).enter()
      .append("path")
      .attr("class", "feature")
      .style("fill", "steelblue")
      .attr("d", path);
    };
    renderglobe(land)
  </script>
</body>
​
    