Mike Bostock - Spinning Globe

_.md

[ Launch: Mike Bostock - Spinning Globe ] 9064199 by ljbrown238

config.json

{"description":"Mike Bostock - Spinning Globe","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/TUJ15kO.png"}

inlet.js

// http://bl.ocks.org/mbostock/6747043

///
/// THIS IS NOT WORKING!!! :-/
///

var width = 160,
    height = 160,
    speed = -1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

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

var graticule = d3.geo.graticule();

var context = tributary.ctx;

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

var topo = tributary.world;

  var land = topojson.feature(topo, topo.objects.land),
      grid = graticule();

  d3.timer(function() {
    // context = tributary.ctx;
    
    var lambda = speed * (Date.now() - start),
        theta = -15;

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

    context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    context.save();
    context.translate(width / 2, 0);
    context.scale(-1, 1);
    context.translate(-width / 2, 0);
    projection.rotate([lambda + 180, -1 * theta]);

    context.beginPath();
    path(land);
    context.fillStyle = "#dadac4";
    context.fill();

    context.beginPath();
    path(grid);
    context.lineWidth = 0.5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    context.restore();
    projection.rotate([lambda, theta]);

    context.beginPath();
    path(grid);
    context.lineWidth = 0.5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    context.beginPath();
    path(land);
    context.fillStyle = "#737368";
    context.fill();
    context.lineWidth = 0.5;
    context.strokeStyle = "#000";
    context.stroke();
  });

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

style.css

body {
  background: #FCFCFA;
}

world.json