Rotating Orthographic

forked from mbostock's block: Rotating Orthographic

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fcfcfa;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script>

var width = 960,
    height = 720,
    speed = 1e-3,
    start = Date.now();

var sphere = {type: "Sphere"};

var projection = d3.geoOrthographic()
    .scale(height / 2.1)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.5);

var graticule = d3.geoGraticule();

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

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

var path = d3.geoPath()
    .projection(projection)
    .context(context);

// load data
queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json")
    .defer(d3.tsv, "countries.tsv")
    .defer(d3.csv, "stations.csv")
    .await(ready);

function ready(error, topo, countries, stations) {
  if (error) throw error;

var land = topojson.feature(topo, topo.objects.land),
      borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }),
      grid = graticule();

d3.timer(function() {
    longitude = speed * (Date.now() - start);
		rotateGlobe(sphere, land, borders, grid, longitude);
  });
};

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

function rotateGlobe(sphere, land, borders, grid, longitude){
  projection.rotate([longitude, 0]);

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

context.beginPath();
  path(sphere);
  context.lineWidth = 3;
  context.strokeStyle = "#000";
  context.stroke();

context.beginPath();
  path(sphere);
  context.fillStyle = "#A7DBD8";
  context.fill();

context.beginPath();
  path(land);
  context.fillStyle = "#353";
  context.fill();

context.beginPath();
  path(borders);
  context.lineWidth = .5;
  context.strokeStyle = "#fff";
  context.stroke();

context.beginPath();
  path(grid);
  context.lineWidth = .5;
  context.strokeStyle = "rgba(119,119,119,.5)";
  context.stroke();
}  
</script>

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

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

https://d3js.org/queue.v1.min.js