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 :-)
xxxxxxxxxx
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<body style="background-color: black">
<div id="viz"></div>
<script>
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