D3 Examples - Rotating Orthographic

xxxxxxxxxx
 
<!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>
​
    