block by mbostock 1246403

Spinny Globe

Full Screen

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.

Updated Example →

index.html

<!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 = [71, -42],
    velocity = [.010, -.002],
    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("/mbostock/raw/4090846/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 = 1;
    context.strokeStyle = "#000";
    context.stroke();
  });
});

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

</script>