Spinny Globe

This is a rotating orthographic projection, a type of azimuthal projection. Only the visible front hemisphere is shown, using great-circle clipping. D3 includes support for many other projections, as well as for rendering great arcs.

The geometry for this example comes from Natural Earth’s land dataset via the World Atlas project.

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.v1.min.js"></script>
<script>

var width = 960,
    height = 720,
    origin = [51, 170],
    velocity = [0,0],
    t0 = Date.now();

var sphere = {type: "Sphere"};

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

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

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

var path = d3.geo.path()
    .projection(projection)
    .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.timer(function() {
    var dt = Date.now() - t0;
    projection.rotate([velocity[0] * dt + origin[0], velocity[1] * dt + origin[1]]);

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

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

context.beginPath();
    path(land);
    context.lineWidth = 2;
    context.strokeStyle = "#000";
    context.stroke();
  });
});

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

</script>

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

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