GEO Satellite Map not canvas WIP

forked from apratt2003's block: GEO Satellite Map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 <canvas width="960" height="600"></canvas>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/topojson-client@2"></script>
  <style>
    .satellite{
      fill:#8E8883
    }
    .over{
      fill:null
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var w = 960,
    		h = 500;
     
    var canvas = d3.select("canvas")//.append("svg")
      .attr("width", w)
      .attr("height", h)
    
    var context = canvas.node().getContext("2d");
    
    var projection = d3.geoOrthographic()
    	.scale((h-10)/2)
    	.translate([w/2,h/2]);
    
    var path = d3.geoPath().projection(projection)
        .context(context);

//draw globe
    //inserted
    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);

d3.select("body").select("land")
    .data(land)
    .enter().append("path")
    .attr("class", "land")
    .attr("d", path);
      
  renderglobe = function() {
    context.clearRect(0, 0, w, h);
    context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill();
    context.beginPath(), path(land), context.fillStyle = "#000", context.fill();
    context.beginPath(), path(sphere), context.stroke();
    
  };
      
     renderglobe();
    });
      
      //draw satellites
var GEOprojection = d3.geoOrthographic()
    	.scale((h-10)/1.9)
    	.translate([w/2,h/2]);
    
GEOs = d3.csv("GEOs.csv", function(GEOs){
     // var fakeCoord = ([-71, 41.5]);
      var inclination = GEOs.map(function(d) {return +d.Inclinationdegrees});
     var SatCoord = GEOs.map(function(d) { return GEOprojection([+d.LongitudeOfGEO, +d.Inclinationdegrees]);
       });
var over = d3.select("body").append("svg")
			.attr("class", "over")
			.attr("width", w)
      .attr("height", h);
            
// add circles to svg
  renderGEOs = function() {
   over.selectAll("circle")
		.data(SatCoord)
    	.enter()
        .append("circle")
        .attr("cx", function (d) { return (d[0]);}) //Longitude
        .attr("cy", function (d) { return (d[1]);}) //Latitude
        .attr("r", 5)
        .attr("class", "satellite");
   }
 	renderGEOs();
  
 });
  </script>
</body>

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

https://unpkg.com/topojson-client@2