simple globe canvas

_.md

[ Launch: simple globe canvas ] 4674440 by gleitz
[ Launch: simple globe canvas ] 4670598 by ejfox
[ Launch: simple globe ] 4669854 by enjalot
[ Launch: Tributary inlet ] 4661803 by enjalot

config.json

{"description":"simple globe canvas","endpoint":"","display":"canvas","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"},{"name":"d3.geo.projection","url":"http://d3js.org/d3.geo.projection.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world110.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},"leap.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//http://bl.ocks.org/4188334

var world = tributary.world110;

var globe = {type: "Sphere"};
var countries = topojson.object(world, world.objects.countries)


var projection = d3.geo.orthographic()
    .scale(478)
    .translate([495, 430])
    .rotate([0,6,0])
    .clipAngle(74);

var context = tributary.ctx;

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

context.fillStyle = "#115311";
context.beginPath();
path(countries);
context.fill();
  
context.strokeStyle = "#0D3500";
context.beginPath(), path(globe), context.stroke();
  
tributary.events.off("leap");
tributary.events.on("leap", function(d) {
  if(d.pointables[0] != undefined){
    tributary.clear(); 
  }
   
    //console.log(d.pointables[0].tipPosition);
  
  	tip = d.pointables[0].tipPosition
    
    var zoom = tip[2]
    if( zoom > 100 ) { zoom = 100 }
  else if ( zoom < 10 ) { zoom = 10 }
    
    
    
    tip[2] = 0
    
	projection.rotate(tip)
    projection.clipAngle(zoom)
    path.projection(projection)

    context.fillStyle = "#0B304D";
    context.beginPath();
    path(countries);
    context.fill();
	context.beginPath(), path(globe), context.stroke();

})

leap.js

if(!tributary.leap) tributary.leap = {};

var ws;

// Support both the WebSocket and MozWebSocket objects
if ((typeof(WebSocket) == 'undefined') &&
    (typeof(MozWebSocket) != 'undefined')) {
  WebSocket = MozWebSocket;
}

// Create the socket with event handlers
tributary.leap.init = function() {
  
  console.log("Starting");
  //Create and open the socket
  ws = new WebSocket("ws://localhost:6437/");

  // On successful connection
  ws.onopen = function(event) {
    //document.getElementById("connection").innerHTML = "WebSocket connection open!";
    //$("#textoutput").html("Open...")
    console.log("Open");
  };

  // On message received
  ws.onmessage = function(event) {
    tributary.events.trigger("leap", JSON.parse(event.data));
  };

  // On socket close
  ws.onclose = function(event) {
    ws = null;
  }

  //On socket error
  ws.onerror = function(event) {
    alert("Received error");
  };
}

//control flow. we don't want to reinit
if(!tributary.leap.initialized) {
  tributary.leap.init();
}

world110.json