Globe for Google Cardboard - experiment

How to view this globe in 3D using Google Cardboard: Open the raw version of the bl.ock /allardw/641fd92683303ab4e4d53cef22594c2a/example/ on your phones browser Put your phone in Google Carboard and enjoy :-)

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

var diameter = width / 2.1,
    radius = diameter >> 1,
    zoom = radius/1.5,
    velocity = .01,
    then = Date.now();

var projection = d3.geo.orthographic()
    .scale(zoom - 2)
    .translate([radius, radius])
    .clipAngle(90)
    .precision(0);

var canvas = d3.select("#viz").selectAll("canvas")
    .data(d3.range(2))
  .enter().append("canvas")
    .attr("class", "myCanvas")
    .attr("width", diameter)
    .attr("height", diameter);

var path = d3.geo.path()
    .projection(projection);

d3.json("world-110m2.json", function(error, _map) {
  if (error) throw error;

var land = topojson.feature(_map, _map.objects.land),
      globe = {type: "Sphere"};

d3.timer(function() {
    var angle = velocity * (Date.now() - then);
    canvas.each(function(i) {
      var rotate = [0, 0, 0], context = this.getContext("2d");
      rotate[0] = angle-(i*10), projection.rotate(rotate);
      //rotate[1] = angle, projection.rotate(rotate);
      context.clearRect(0, 0, diameter, diameter);
      context.beginPath(), path(globe), context.fillStyle="steelblue", context.fill();
      context.beginPath(), path.context(context)(land), context.fillStyle="darkgreen", context.fill();
    });
  });
});
</script>

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

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