A D3 plugin to display spatial data on a globe. Uses WebGL and ThreeJS.
d3.csv("rainfall.csv", function(data) {
var rainMax = d3.max(data, function(d,i){return d.rainfall});
var rainHeight = d3.scale.linear()
.domain([0, rainMax]) // inches of rain per year
.range([0,1]); // globe radii (0 = flush to the surface)
var rainColor = d3.scale.linear()
.domain([0,rainMax]).range(["#b00","#0f0"]);
var globe = d3.gl.globe()
.width(500).height(500)
.texture('img/countries.png')
.bars()
.latitude(function(d,i){ return d.lat; })
.longitude(function(d,i){ return d.lon; })
.height(function(d,i){ return rainScale(d.rainfall); })
.color(function(d,i){ return rainColor(d.rainfall); });
d3.select("canvas").datum(data).call(globe);
});
API inspired by Towards Reusable Charts.
Code and documentation on Github. Tutorials here.