Inconsistent rendering of map by d3.geoEquirectangular()

Question

I recently made some maps using D3 and had some problems with paths not closing properly as you can see in the first example below. I assume this is some kind of data issue around precision at -90 degrees latitude, but I'm not sure how to validate that suspicion. Interestingly, when I include the most recent version of the d3-geo module on the page, the map renders as expected (see second example below). What's going on here?

var svg = d3.select("#map").style("border","0px solid #000000");

    var width = 600;
    var height = 300;

    var proj = d3.geoEquirectangular().scale(95).translate([300,150]);
    var path = d3.geoPath(proj);

    //countries from natural earth dataset
    var url = "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson";
    
    d3.json(url, function(err, json){

        //draw paths once
        svg.selectAll("path").data(json.features).enter().append("path")
            .attr("d", path).attr("stroke","#00aaff");
            
    });

<script src="https://d3js.org/d3.v4.min.js"></script>

<h2>Fig. 1 Multiple paths not closed properly</h2>

<svg width="600px" height="300px" id="map"></svg>

<p>Uses D3 Version 4.13.0</p>
<p>GeoJson data source: <a href="https://github.com/nvkelso/natural-earth-vector/tree/master/geojson">https://github.com/nvkelso/natural-earth-vector/tree/master/geojson</a></p>

var svg = d3.select("#map").style("border","0px solid #000000");

    var width = 600;
    var height = 300;

    var proj = d3.geoEquirectangular().scale(95).translate([300,150]);
    var path = d3.geoPath(proj);

    //countries from natural earth dataset
    var url = "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson";
    
    d3.json(url, function(err, json){

        //draw paths once
        svg.selectAll("path").data(json.features).enter().append("path")
            .attr("d", path).attr("stroke","#00aaff");
            
    });

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>

<h2>Fig. 2 Map renders as expected</h2>
<p>The only difference from above is the inclusion of <a href="https://d3js.org/d3-geo.v1.min.js">https://d3js.org/d3-geo.v1.min.js</a></p>

<svg width="600px" height="300px" id="map"></svg>

<p>Uses D3 Version 4.13.0</p>
<p>GeoJson data source: <a href="https://github.com/nvkelso/natural-earth-vector/tree/master/geojson">https://github.com/nvkelso/natural-earth-vector/tree/master/geojson</a></p>

Andrew Reid · Accepted Answer · 2018-03-16T03:52:03.263

I believe you are referencing an issue on github that was concerned with how d3 referenced polygons. The issue can cause the inversion of polygons that overlap the south pole on certain projections.

The current version of d3-geo.v1.min.js, located at https://d3js.org/d3-geo.v1.min.js, is 1.10, was in released in March. This version implements the fix. The most recent version of d3v4(4.13) was released on January 29th, and therefore doesn't include the fix, hence the behavior found.

Inconsistent rendering of map by d3.geoEquirectangular()

1 Answers1