Mapping with D3: Feature clipping error in my spinning globe

Question

I'm using D3 to create a world map with an orthographic projection that the user can "spin" with their mouse like they would a globe.

I ran into some problems with jittery rendering in Firefox so I simplified my map features using an implementation of the Douglas-Peuker Algorithm in R. I dumped this into geoJSON and have it rendered by D3 as in this example: http://jsfiddle.net/cmksA/8/. (Note that the problem I describe below doesn't occur with the non-simplified features, but Firefox is unusable if I don't simplify.)

Performance is still poor (getting better) in Firefox, but a new issue has crept in. When you pan the globe so that Indonesia is roughly in the center of the globe, one of the polygons gets transformed to cover the entire globe. The same issue happens when North and South America are centered.

As part of the panning, I re-project/re-draw the globe using the following function (line 287 of the jsfiddle):

function panglobe(){
    var x=d3.event.dx;
    var y=d3.event.dy;
    var r = mapProj.rotate();
    r[0] = r[0]+lonScale(x)
    r[1] = r[1]+latScale(y)
    mapProj.rotate(r);
    countries.attr("d",function(d){
        var dee=mapPath(d)
        return dee ? dee : "M0,0";
    });

}

Any help/insight/advice would be much appreciated. Cheers

Answer 1

A common problem with line-simplification algorithms when applied to polygons is that they can introduce self-intersections, which generally cause havoc with geometry algorithms.

It's quite possible that your simplified polygons contain some self-intersections, e.g. a segment that goes back on itself. This might cause problems for D3, e.g. when sorting intersections along the clip region edge (although in future releases I hope to support self-intersecting polygons, too).

A better algorithm to use might be Visvalingam–Whyatt, e.g. as used by TopoJSON, as it simplifies based on area. However, it can also produce self-intersecting polygons, although perhaps less often than Douglas–Peucker.

For interactive globes I’d recommend world-110m.json from Mike Bostock’s world-atlas.