Upgrade d3 geo projections

package.json

@@ -62,7 +62,7 @@
     ]
   },
   "dependencies": {
-    "@plotly/d3": "^3.6.1",
+    "@plotly/d3": "3.7.0",
     "@plotly/d3-sankey": "0.7.2",
     "@plotly/d3-sankey-circular": "0.33.1",
     "@plotly/point-cluster": "^3.1.9",
@@ -78,6 +78,8 @@
     "convex-hull": "^1.0.3",
     "country-regex": "^1.1.0",
     "d3-force": "^1.2.1",
+    "d3-geo": "^1.12.1",
+    "d3-geo-projection": "^2.9.0",
     "d3-hierarchy": "^1.1.9",
     "d3-interpolate": "^1.4.0",
     "d3-time-format": "^2.2.3",

src/plots/geo/constants.js

@@ -2,7 +2,6 @@
 
 // projection names to d3 function name
 exports.projNames = {
-    // d3.geo.projection
     'equirectangular': 'equirectangular',
     'mercator': 'mercator',
     'orthographic': 'orthographic',
@@ -24,7 +23,107 @@ exports.projNames = {
     'albers usa': 'albersUsa',
     'winkel tripel': 'winkel3',
     'aitoff': 'aitoff',
-    'sinusoidal': 'sinusoidal'
+    'sinusoidal': 'sinusoidal',
+/*
+    // potential projections that could be added to the API
+
+    'airy': 'airy',
+    // 'albers': 'albers',
+    'armadillo': 'armadillo',
+    'august': 'august',
+    'baker': 'baker',
+    'berghaus': 'berghaus',
+    'bertin1953': 'bertin1953',
+    'boggs': 'boggs',
+    'bonne': 'bonne',
+    'bottomley': 'bottomley',
+    'bromley': 'bromley',
+    // 'chamberlin': 'chamberlin',
+    'chamberlin africa': 'chamberlinAfrica',
+    'collignon': 'collignon',
+    'craig': 'craig',
+    'craster': 'craster',
+    'cylindrical equal area': 'cylindricalEqualArea',
+    'cylindrical stereographic': 'cylindricalStereographic',
+    'eckert1': 'eckert1',
+    'eckert2': 'eckert2',
+    'eckert3': 'eckert3',
+    'eckert5': 'eckert5',
+    'eckert6': 'eckert6',
+    'eisenlohr': 'eisenlohr',
+    'fahey': 'fahey',
+    'foucaut': 'foucaut',
+    'foucaut sinusoidal': 'foucautSinusoidal',
+    'gilbert': 'gilbert',
+    'gingery': 'gingery',
+    'ginzburg4': 'ginzburg4',
+    'ginzburg5': 'ginzburg5',
+    'ginzburg6': 'ginzburg6',
+    'ginzburg8': 'ginzburg8',
+    'ginzburg9': 'ginzburg9',
+    'gringorten': 'gringorten',
+    'guyou': 'guyou',
+    'hammer retroazimuthal': 'hammerRetroazimuthal',
+    'healpix': 'healpix',
+    'hill': 'hill',
+    'homolosine': 'homolosine',
+    'hufnagel': 'hufnagel',
+    'hyperelliptical': 'hyperelliptical',
+    'lagrange': 'lagrange',
+    'larrivee': 'larrivee',
+    'laskowski': 'laskowski',
+    'littrow': 'littrow',
+    'loximuthal': 'loximuthal',
+    // 'modified stereographic': 'modifiedStereographic',
+    'modified stereographic alaska': 'modifiedStereographicAlaska',
+    'modified stereographic gs48': 'modifiedStereographicGs48',
+    'modified stereographic gs50': 'modifiedStereographicGs50',
+    'modified stereographic miller': 'modifiedStereographicMiller',
+    'modified stereographic lee': 'modifiedStereographicLee',
+    'mt flat polar parabolic': 'mtFlatPolarParabolic',
+    'mt flat polar quartic': 'mtFlatPolarQuartic',
+    'mt flat polar sinusoidal': 'mtFlatPolarSinusoidal',
+    'natural earth1': 'naturalEarth1',
+    'natural earth2': 'naturalEarth2',
+    'nell hammer': 'nellHammer',
+    'nicolosi': 'nicolosi',
+    'patterson': 'patterson',
+    'polyconic': 'polyconic',
+    'rectangular polyconic': 'rectangularPolyconic',
+    'satellite': 'satellite',
+    'sinu mollweide': 'sinuMollweide',
+    'times': 'times',
+    // 'two point azimuthal': 'twoPointAzimuthal',
+    // 'two point azimuthalUsa': 'twoPointAzimuthalUsa',
+    // 'two point equidistant': 'twoPointEquidistant',
+    // 'two point equidistantUsa': 'twoPointEquidistantUsa',
+    'van der grinten': 'vanDerGrinten',
+    'van der grinten2': 'vanDerGrinten2',
+    'van der grinten3': 'vanDerGrinten3',
+    'van der grinten4': 'vanDerGrinten4',
+    // 'wagner': 'wagner',
+    'wagner4': 'wagner4',
+    'wagner6': 'wagner6',
+    // 'wagner7': 'wagner7',
+    'wiechel': 'wiechel',
+    'winkel3': 'winkel3',
+
+    // 'interrupt': 'interrupt',
+    'interrupted homolosine': 'interruptedHomolosine',
+    'interrupted sinusoidal': 'interruptedSinusoidal',
+    'interrupted boggs': 'interruptedBoggs',
+    'interrupted sinu mollweide': 'interruptedSinuMollweide',
+    'interrupted mollweide': 'interruptedMollweide',
+    'interrupted mollweide hemispheres': 'interruptedMollweideHemispheres',
+    'interrupted quartic authalic': 'interruptedQuarticAuthalic',
+
+    'polyhedral butterfly': 'polyhedralButterfly',
+    'polyhedral collignon': 'polyhedralCollignon',
+    'polyhedral waterman': 'polyhedralWaterman',
+
+    'gringorten quincuncial': 'gringortenQuincuncial',
+    'peirce quincuncial': 'peirceQuincuncial',
+*/
 };
 
 // name of the axes

src/plots/geo/geo.js

@@ -3,6 +3,10 @@
 /* global PlotlyGeoAssets:false */
 
 var d3 = require('@plotly/d3');
+var geo = require('d3-geo');
+var geoPath = geo.geoPath;
+var geoDistance = geo.geoDistance;
+var geoProjection = require('d3-geo-projection');
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
@@ -25,8 +29,6 @@ var geoUtils = require('../../lib/geo_location_utils');
 var topojsonUtils = require('../../lib/topojson_utils');
 var topojsonFeature = require('topojson-client').feature;
 
-require('./projections')(d3);
-
 function Geo(opts) {
     this.id = opts.id;
     this.graphDiv = opts.graphDiv;
@@ -247,29 +249,6 @@ proto.updateProjection = function(geoCalcData, fullLayout) {
     var s = this.fitScale = projection.scale();
     var t = projection.translate();
 
-    if(
-        !isFinite(b[0][0]) || !isFinite(b[0][1]) ||
-        !isFinite(b[1][0]) || !isFinite(b[1][1]) ||
-        isNaN(t[0]) || isNaN(t[0])
-    ) {
-        var attrToUnset = ['fitbounds', 'projection.rotation', 'center', 'lonaxis.range', 'lataxis.range'];
-        var msg = 'Invalid geo settings, relayout\'ing to default view.';
-        var updateObj = {};
-
-        // clear all attributes that could cause invalid bounds,
-        // clear viewInitial to update reset-view behavior
-
-        for(var i = 0; i < attrToUnset.length; i++) {
-            updateObj[this.id + '.' + attrToUnset[i]] = null;
-        }
-
-        this.viewInitial = null;
-
-        Lib.warn(msg);
-        gd._promises.push(Registry.call('relayout', gd, updateObj));
-        return msg;
-    }
-
     if(geoLayout.fitbounds) {
         var b2 = projection.getBounds(makeRangeBox(axLon.range, axLat.range));
         var k2 = Math.min(
@@ -508,7 +487,7 @@ proto.updateFx = function(fullLayout, geoLayout) {
     bgRect.on('mousemove', function() {
         var lonlat = _this.projection.invert(Lib.getPositionFromD3Event());
 
-        if(!lonlat || isNaN(lonlat[0]) || isNaN(lonlat[1])) {
+        if(!lonlat) {
             return dragElement.unhover(gd, d3.event);
         }
 
@@ -648,9 +627,8 @@ proto.render = function() {
     }
 };
 
-// Helper that wraps d3.geo[/* projection name /*]() which:
+// Helper that wraps d3[geo + /* Projection name /*]() which:
 //
-// - adds 'fitExtent' (available in d3 v4)
 // - adds 'getPath', 'getBounds' convenience methods
 // - scopes logic related to 'clipAngle'
 // - adds 'isLonLatOverEdges' method
@@ -663,7 +641,11 @@ function getProjection(geoLayout) {
     var projLayout = geoLayout.projection;
     var projType = projLayout.type;
 
-    var projection = d3.geo[constants.projNames[projType]]();
+    var projName = constants.projNames[projType];
+    // uppercase the first letter and add geo to the start of method name
+    projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+    var projFn = geo[projName] || geoProjection[projName];
+    var projection = projFn();
 
     var clipAngle = geoLayout._isClipped ?
         constants.lonaxisSpan[projType] / 2 :
@@ -686,7 +668,7 @@ function getProjection(geoLayout) {
 
         if(clipAngle) {
             var r = projection.rotate();
-            var angle = d3.geo.distance(lonlat, [-r[0], -r[1]]);
+            var angle = geoDistance(lonlat, [-r[0], -r[1]]);
             var maxAngle = clipAngle * Math.PI / 180;
             return angle > maxAngle;
         } else {
@@ -695,38 +677,13 @@ function getProjection(geoLayout) {
     };
 
     projection.getPath = function() {
-        return d3.geo.path().projection(projection);
+        return geoPath().projection(projection);
     };
 
     projection.getBounds = function(object) {
         return projection.getPath().bounds(object);
     };
 
-    // adapted from d3 v4:
-    // https://github.com/d3/d3-geo/blob/master/src/projection/fit.js
-    projection.fitExtent = function(extent, object) {
-        var w = extent[1][0] - extent[0][0];
-        var h = extent[1][1] - extent[0][1];
-        var clip = projection.clipExtent && projection.clipExtent();
-
-        projection
-            .scale(150)
-            .translate([0, 0]);
-
-        if(clip) projection.clipExtent(null);
-
-        var b = projection.getBounds(object);
-        var k = Math.min(w / (b[1][0] - b[0][0]), h / (b[1][1] - b[0][1]));
-        var x = +extent[0][0] + (w - k * (b[1][0] + b[0][0])) / 2;
-        var y = +extent[0][1] + (h - k * (b[1][1] + b[0][1])) / 2;
-
-        if(clip) projection.clipExtent(clip);
-
-        return projection
-            .scale(k * 150)
-            .translate([x, y]);
-    };
-
     projection.precision(constants.precision);
 
     if(clipAngle) {