/d3gl

D3 plugin for WebGL

Primary LanguageJavaScript

D3GL

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.

Examples

Built with