Three views, side by side. Drag to rotate, mouse wheel to zoom.
Built with d3gl
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>D3GL Hello Earth</title> | |
<link rel="stylesheet" href="http://dcpos.ch/d3gl/css/demo.css" /> | |
</head> | |
<body> | |
<script type="text/javascript" src="http://dcpos.ch/d3gl/js/d3gl.min.js"></script> | |
<script type="text/javascript"> | |
$(function(){ | |
// get some data | |
var textures = [ | |
"http://dcpos.ch/d3gl/img/earth-tex.png", // day | |
"http://dcpos.ch/d3gl/img/earth-night-tex.jpg", // night | |
"http://dcpos.ch/d3gl/img/earth-bump.jpg" // altitude | |
]; | |
// create a d3gl chart... | |
var globe = d3.gl.globe() | |
.width(320).height(320) | |
.texture(function(d){return d;}); | |
// use it to paint three views, side by side | |
d3.select("body").selectAll("span") | |
.data(textures).enter().append("span") | |
.call(globe); | |
}); | |
</script> | |
</body> | |
</html> |