Globe with LEO Satellites (WIP)

Work In Progress

Attempting to build off Mike Bostock's Spinning Globe to overlay procedurally generated points representing satellites in Low Earth Orbit (LEO), using the Iridium constellation as inspiration model.

Currently struggling with how to transform Point object coordinates, as the satellites move pole-to-pole independent of Earth rotation.

forked from mbostock's block: Spinny Globe

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v2.min.js"></script>
<script>

var width = 960,
    height = 720,
    origin = [71, -42,0],
    velocity = [0.01,.0005,0],
    satVel = -.05
    t0 = Date.now();

var sphere = {type: "Sphere"};

var globeProjection = d3.geo.orthographic()
    .scale(height / 2.75)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.5);

var plane1Projection = d3.geo.orthographic()
    .scale(height / 2.5)
    .translate([width / 2, height / 2])
    .clipAngle(113)
    .precision(.5);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var globePath = d3.geo.path()
    .projection(globeProjection)
    .context(context);

var satPath = d3.geo.path()
    .projection(plane1Projection)
    .context(context);

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, topo) {
  if (error) throw error;

var land = topojson.feature(topo, topo.objects.land);
  
       d3.json("https://gist.githubusercontent.com/franknoirot/896c8f60338d761753dd0ca98f2a629e/raw/51cdeece8036619bd1e3e614988876754de65a0a/satellites.json", 
  function(error, satellites) {
    if (error) throw error;
         
    var sats = topojson.feature(satellites, satellites.objects.plane1);

d3.timer(function() {
      var dt = Date.now() - t0;
      //Rotate satellite positions (How do TopoJSON transformations work???)
      sats.coordinates[0][1] += 0.01;
      
      //Rotate orbit and globe
      plane1Projection.rotate([velocity[0] * dt + origin[0], velocity[1] * dt + velocity[1] * dt + origin[1], velocity[2] * dt + origin[2]]);
      globeProjection.rotate([velocity[0] * dt + origin[0], velocity[1] * dt + origin[1],velocity[2] * dt + origin[2]]);

context.clearRect(0, 0, width, height);

context.beginPath();
      globePath(sphere);
      context.lineWidth = 4;
      context.strokeStyle = "#999";
      context.stroke();
      
      context.beginPath();
      satPath(sats);
      context.lineWidth = 10;
      context.strokeStyle = "#a44";
      context.stroke();

context.beginPath();
      satPath(sphere);
      context.lineWidth = 4;
      context.strokeStyle = "#77b";
      context.stroke();

context.beginPath();
      globePath(land);
      context.lineWidth = 1;
      context.strokeStyle = "#999";
      context.stroke();
    });
   });       
});

d3.select(self.frameElement).style("height", height + "px");

</script>

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

https://d3js.org/topojson.v2.min.js