Skip to content

Instantly share code, notes, and snippets.

@benfoxall
Created April 7, 2013 22:54
Show Gist options
  • Save benfoxall/5332944 to your computer and use it in GitHub Desktop.
Save benfoxall/5332944 to your computer and use it in GitHub Desktop.
var data = [ { lat: -28, lng: -55, count: 38 },
{ lat: 29, lng: 38, count: 2 },
{ lat: 36, lng: 117, count: 2 },
{ lat: -22, lng: -48, count: 511 },
{ lat: 41, lng: 133, count: 1 },
{ lat: 51, lng: 13, count: 88 },
{ lat: -25, lng: 158, count: 1 },
// .....5k lines
{ lat: -18, lng: -44, count: 47 },
{ lat: 30, lng: 35, count: 40 },
{ lat: 30, lng: -86, count: 385 },
{ lat: 54, lng: -110, count: 38 },
{ lat: 8, lng: 7, count: 97 } ];
// drawing the globe thing, requires Sylvester and `data` (the lng/lat list)
;(function(data){
// The transform matrix for rotating the ball
var M = Matrix.I(3),
drawn = false;
// set view of the globe based on mouse/touch position
function setView(x,y){
var a = Matrix.RotationY(x/100);
var b = Matrix.RotationX(-y/100);
M = a.x(b);
drawn = false;
}
var handlers = {
touch:function(e){
e.preventDefault();
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
setView(x,y);
},
mouse:function(e){
e.preventDefault();
var x = e.clientX;
var y = e.clientY;
setView(x,y);
}
};
window.addEventListener("mousemove", handlers.mouse, false);
window.addEventListener("touchmove", handlers.touch, false);
window.addEventListener("touchstart", handlers.touch, false);
// map the lat/lngs into cartesian coords and the
// extend of the hist bar
var vectors = data.map(function(point){
var rho = 200;
var phi = (point.lat + 90) * (Math.PI/180);
var theta = (point.lng + 90) * (Math.PI/180);
var x = rho * Math.sin(phi) * Math.cos(theta);
var y = rho * Math.sin(phi) * Math.sin(theta);
var z = rho * Math.cos(phi);
return {
v: $V([x,y,z]),
v2: $V([x,y,z]).x(1.02 + (point.count/6000)),
count: point.count
};
});
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// set up the drawing/animation
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
(function animloop(){
requestAnimFrame(animloop);
// only draw if the transform matrix has changed
if(drawn) return;
drawn = true;
// clear / setup the canvas
canvas.width = canvas.width;
context.translate(300,300);
context.strokeStyle = 'rgba(0,0,0,0.3);';
context.beginPath();
vectors.forEach(function(vector, i){
// transform to the current view
var v = M.x(vector.v);
// skip backface points
if(v.elements[2] < 0) return;
var v2 = M.x(vector.v2);
context.moveTo(v.elements[0],v.elements[1]);
context.lineTo(v2.elements[0],v2.elements[1]);
});
context.closePath();
context.stroke();
})();
})(data);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment