Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

180 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

D3 plugin for WebGL

Resources

Stars

49 stars

Watchers

9 watching

Forks

Releases

Packages

Used by

Contributors

Languages