Merge pull request #4 from plotly/fix-d3-geo-dblclick

More consistent geo maps configs

Author: etpinard

.gitignore

@@ -3,7 +3,4 @@ node_modules
 build/*
 !build/README.md
 
-dist/*
-!dist/README.md
-
 npm-debug.log

devtools/test_dashboard/index.html

@@ -11,12 +11,15 @@
 
     <script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
 
-    <script type="text/javascript" src="../../dist/plotly.js" charset="utf-8"></script>
-    <script>PLOTLYENV = { TOPOJSON_URL: '../../src/assets/topojson/' };</script>
+    <!-- use dev plotly.js build -->
+    <script type="text/javascript" src="../../build/plotly.js" charset="utf-8"></script>
+
+    <!-- use local topojson files -->
+    <script>Plotly.setPlotConfig({ topojsonURL: '../../dist/topojson/' });</script>
 
     <script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
 
-    <!-- helper functions to manipulate graph div -->
+    <!-- helper functions to manipulate the graph div -->
     <script>
     var Tabs = {
         getGraph: function() {

dist/plotly-geo-assets.js

@@ -64,6 +64,7 @@
     "delaunay-triangulate": "^1.1.6",
     "es6-promise": "^3.0.2",
     "fast-isnumeric": "^1.1.1",
+    "fs-extra": "^0.26.2",
     "gl-error2d": "^1.0.0",
     "gl-error3d": "^1.0.0",
     "gl-line2d": "^1.2.1",
@@ -87,6 +88,7 @@
     "node-sass": "^3.4.1",
     "right-now": "^1.0.0",
     "robust-orientation": "^1.1.3",
+    "sane-topojson": "^1.2.0",
     "superscript-text": "^1.0.0",
     "through2": "^2.0.0",
     "tinycolor2": "1.1.2",

dist/plotly-with-meta.js

@@ -1,17 +1,3 @@
-exports.topojsons = {};
+var saneTopojson = require('sane-topojson');
 
-exports.topojsons['world_110m'] = require('./topojson/world_110m.json');
-exports.topojsons['africa_110m'] = require('./topojson/africa_110m.json');
-exports.topojsons['asia_110m'] = require('./topojson/asia_110m.json');
-exports.topojsons['europe_110m'] = require('./topojson/europe_110m.json');
-exports.topojsons['north-america_110m'] = require('./topojson/north-america_110m.json');
-exports.topojsons['south-america_110m'] = require('./topojson/south-america_110m.json');
-exports.topojsons['usa_110m'] = require('./topojson/usa_110m');
-
-exports.topojsons['world_50m'] = require('./topojson/world_50m.json');
-exports.topojsons['africa_50m'] = require('./topojson/africa_50m.json');
-exports.topojsons['asia_50m'] = require('./topojson/asia_50m.json');
-exports.topojsons['europe_50m'] = require('./topojson/europe_50m.json');
-exports.topojsons['north-america_50m'] = require('./topojson/north-america_50m.json');
-exports.topojsons['south-america_50m'] = require('./topojson/south-america_50m.json');
-exports.topojsons['usa_50m'] = require('./topojson/usa_50m.json');
+exports.topojson = saneTopojson;

dist/plotly.js

@@ -450,14 +450,14 @@ proto.toImage = function() {
 
     var ev = Plotly.Snapshot.toImage(this.graphInfo, {format: format});
 
-    var filename = this.graphInfo.fn || "newplot";
+    var filename = this.graphInfo.fn || 'newplot';
     filename += '.' + format;
 
     ev.once('success', function(result) {
 
         _this._snapshotInProgress = false;
 
-        var downloadLink = document.createElement("a");
+        var downloadLink = document.createElement('a');
         downloadLink.href = result;
         downloadLink.download = filename; // only supported by FF and Chrome
 

dist/plotly.min.js

@@ -25,6 +25,7 @@ exports.Plots = Plotly.Plots;
 exports.Fx = Plotly.Fx;
 exports.Snapshot = Plotly.Snapshot;
 exports.PlotSchema = Plotly.PlotSchema;
+exports.Queue = Plotly.Queue;
 
 // export d3 used in the bundle
 exports.d3 = require('d3');

src/assets/topojson/africa_110m.json renamed to dist/topojson/africa_110m.json

@@ -1,5 +1,7 @@
 'use strict';
 
+/* global $:false */
+
 var EventEmitter = require('events').EventEmitter;
 
 var Events = {

src/assets/topojson/africa_50m.json renamed to dist/topojson/africa_50m.json

@@ -13,11 +13,8 @@ topojsonUtils.getTopojsonName = function(geoLayout) {
     ].join('');
 };
 
-topojsonUtils.getTopojsonPath = function(topojsonName) {
-    var topojsonUrl = (window.PLOTLYENV &&
-                       window.PLOTLYENV.TOPOJSON_URL) || './topojson/';
-
-    return topojsonUrl + topojsonName + '.json';
+topojsonUtils.getTopojsonPath = function(topojsonURL, topojsonName) {
+    return topojsonURL + topojsonName + '.json';
 };
 
 topojsonUtils.getTopojsonFeatures = function(trace, topojson) {

src/assets/topojson/asia_110m.json renamed to dist/topojson/asia_110m.json

@@ -455,10 +455,10 @@ function plotGeo(gd) {
 
     var i, geoId, fullGeoData, geo;
 
-    // if plotlyjs-geo-assets-bundle is not included,
-    // initialize object to keep reference to every loaded topojsons
+    // if 'plotly-geo-assets.js' is not included,
+    // initialize object to keep reference to every loaded topojson
     if(window.PlotlyGeoAssets === undefined) {
-        window.PlotlyGeoAssets = { topojsons : {} };
+        window.PlotlyGeoAssets = { topojson : {} };
     }
 
     for (i = 0; i < geoIds.length; i++) {
@@ -471,7 +471,8 @@ function plotGeo(gd) {
             geo = new Plotly.Geo(
                 {
                     id: geoId,
-                    container: fullLayout._geocontainer.node()
+                    container: fullLayout._geocontainer.node(),
+                    topojsonURL: gd._context.topojsonURL
                 },
                 fullLayout
             );
@@ -1358,7 +1359,9 @@ Plotly.extendTraces = function extendTraces (gd, update, indices, maxPoints) {
     Plotly.redraw(gd);
 
     var undoArgs = [gd, undo.update, indices, undo.maxPoints];
-    Plotly.Queue.add(gd, Plotly.prependTraces, undoArgs, extendTraces, arguments);
+    if (Plotly.Queue) {
+        Plotly.Queue.add(gd, Plotly.prependTraces, undoArgs, extendTraces, arguments);
+    }
 };
 
 Plotly.prependTraces  = function prependTraces (gd, update, indices, maxPoints) {
@@ -1383,7 +1386,9 @@ Plotly.prependTraces  = function prependTraces (gd, update, indices, maxPoints)
     Plotly.redraw(gd);
 
     var undoArgs = [gd, undo.update, indices, undo.maxPoints];
-    Plotly.Queue.add(gd, Plotly.extendTraces, undoArgs, prependTraces, arguments);
+    if (Plotly.Queue) {
+        Plotly.Queue.add(gd, Plotly.extendTraces, undoArgs, prependTraces, arguments);
+    }
 };
 
 /**
@@ -1427,7 +1432,7 @@ Plotly.addTraces = function addTraces (gd, traces, newIndices) {
     // i.e., we can simply redraw and be done
     if (typeof newIndices === 'undefined') {
         Plotly.redraw(gd);
-        Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
+        if (Plotly.Queue) Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
         return;
     }
 
@@ -1450,10 +1455,10 @@ Plotly.addTraces = function addTraces (gd, traces, newIndices) {
 
     // if we're here, the user has defined specific places to place the new traces
     // this requires some extra work that moveTraces will do
-    Plotly.Queue.startSequence(gd);
-    Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
+    if (Plotly.Queue) Plotly.Queue.startSequence(gd);
+    if (Plotly.Queue) Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
     Plotly.moveTraces(gd, currentIndices, newIndices);
-    Plotly.Queue.stopSequence(gd);
+    if (Plotly.Queue) Plotly.Queue.stopSequence(gd);
 };
 
 /**
@@ -1493,7 +1498,8 @@ Plotly.deleteTraces = function deleteTraces (gd, indices) {
     }
 
     Plotly.redraw(gd);
-    Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
+
+    if (Plotly.Queue) Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
 };
 
 /**
@@ -1587,8 +1593,10 @@ Plotly.moveTraces = function moveTraces (gd, currentIndices, newIndices) {
     }
 
     gd.data = newData;
+
     Plotly.redraw(gd);
-    Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
+
+    if (Plotly.Queue) Plotly.Queue.add(gd, undoFunc, undoArgs, redoFunc, redoArgs);
 };
 
 // -----------------------------------------------------
@@ -2025,7 +2033,9 @@ Plotly.restyle = function restyle(gd, astr, val, traces) {
 
     // now all attribute mods are done, as are redo and undo
     // so we can save them
-    Plotly.Queue.add(gd, restyle, [gd, undoit, traces], restyle, [gd, redoit, traces]);
+    if(Plotly.Queue) {
+        Plotly.Queue.add(gd, restyle, [gd, undoit, traces], restyle, [gd, redoit, traces]);
+    }
 
     // do we need to force a recalc?
     var autorangeOn = false;
@@ -2403,7 +2413,9 @@ Plotly.relayout = function relayout(gd, astr, val) {
     }
     // now all attribute mods are done, as are
     // redo and undo so we can save them
-    Plotly.Queue.add(gd, relayout, [gd, undoit], relayout, [gd, redoit]);
+    if(Plotly.Queue) {
+        Plotly.Queue.add(gd, relayout, [gd, undoit], relayout, [gd, redoit]);
+    }
 
     // calculate autosizing - if size hasn't changed,
     // will remove h&w so we don't need to redraw

src/assets/topojson/asia_50m.json renamed to dist/topojson/asia_50m.json

@@ -57,7 +57,10 @@ module.exports = {
 
     // function to add the background color to a different container
     // or 'opaque' to ensure there's white behind it
-    setBackground: defaultSetBackground
+    setBackground: defaultSetBackground,
+
+    // URL to topojson files used in geo charts
+    topojsonURL: 'https://cdn.plot.ly/'
 
 };
 

src/assets/topojson/europe_110m.json renamed to dist/topojson/europe_110m.json

@@ -22,6 +22,7 @@ function Geo(options, fullLayout) {
 
     this.id = options.id;
     this.container = options.container;
+    this.topojsonURL = options.topojsonURL;
 
     // add a few projection types to d3.geo,
     // a subset of https://github.com/d3/d3-geo-projection
@@ -73,27 +74,27 @@ proto.plot = function(geoData, fullLayout) {
 
     _this.framework
         .call(_this.zoom)
-        .on('dblclick', _this.zoomReset);
-
-    // N.B. the on 'dblclick doesn't in d3 3.5+
-    // https://github.com/mbostock/d3/issues/1985
+        .on('dblclick.zoom', _this.zoomReset);
 
     topojsonNameNew = topojsonUtils.getTopojsonName(geoLayout);
 
     if(_this.topojson===null || topojsonNameNew!==_this.topojsonName) {
         _this.topojsonName = topojsonNameNew;
 
-        if(PlotlyGeoAssets.topojsons[_this.topojsonName] !== undefined) {
-            _this.topojson = PlotlyGeoAssets.topojsons[_this.topojsonName];
+        if(PlotlyGeoAssets.topojson[_this.topojsonName] !== undefined) {
+            _this.topojson = PlotlyGeoAssets.topojson[_this.topojsonName];
             _this.onceTopojsonIsLoaded(geoData, geoLayout);
         }
         else {
-            topojsonPath = topojsonUtils.getTopojsonPath(_this.topojsonName);
+            topojsonPath = topojsonUtils.getTopojsonPath(
+                _this.topojsonURL,
+                _this.topojsonName
+            );
 
             // N.B this is async
             d3.json(topojsonPath, function(error, topojson) {
                 _this.topojson = topojson;
-                PlotlyGeoAssets.topojsons[_this.topojsonName] = topojson;
+                PlotlyGeoAssets.topojson[_this.topojsonName] = topojson;
                 _this.onceTopojsonIsLoaded(geoData, geoLayout);
             });
         }

src/assets/topojson/europe_50m.json renamed to dist/topojson/europe_50m.json

@@ -1,3 +1,14 @@
+// jshint ignore: start
+
+/**
+ * Forked from https://github.com/d3/d3-geo-projection
+ * Pasted from https://github.com/etpinard/d3-geo-projection
+ *
+ * Containing only the 'most useful' projection types
+ * and compatible with CommonJs
+ *
+ */
+
 var d3 = require('d3');
 
 function addProjectionToD3() {
@@ -61,7 +72,7 @@ function addProjectionToD3() {
       d3_geo_projectPoints.push([ x, y ]);
     },
     lineEnd: function() {
-      if (d3_geo_projectPoints.length) d3_geo_projectLines.push(d3_geo_projectPoints), 
+      if (d3_geo_projectPoints.length) d3_geo_projectLines.push(d3_geo_projectPoints),
       d3_geo_projectPoints = [];
     },
     result: function() {
@@ -188,7 +199,7 @@ function addProjectionToD3() {
     };
     var projection = d3.geo.projection(forward), stream_ = projection.stream;
     projection.stream = function(stream) {
-      var rotate = projection.rotate(), rotateStream = stream_(stream), sphereStream = (projection.rotate([ 0, 0 ]), 
+      var rotate = projection.rotate(), rotateStream = stream_(stream), sphereStream = (projection.rotate([ 0, 0 ]),
       stream_(stream));
       projection.rotate(rotate);
       rotateStream.sphere = function() {

src/assets/topojson/north-america_110m.json renamed to dist/topojson/north-america_110m.json

@@ -221,7 +221,7 @@ function createCamera(element, options) {
     return true;
   });
 
-  mouseWheel(element, function(dx, dy, dz) {
+  mouseWheel(element, function(dx, dy) {
     var flipX = camera.flipX ? 1 : -1;
     var flipY = camera.flipY ? 1 : -1;
     var t = now();

src/assets/topojson/north-america_50m.json renamed to dist/topojson/north-america_50m.json

@@ -1,3 +1,5 @@
+// jshint ignore: start
+
 var Plotly = require('../../plotly');
 var d3 = require('d3');
 

src/assets/topojson/south-america_110m.json renamed to dist/topojson/south-america_110m.json

@@ -1,3 +1,5 @@
+// jshint ignore: start
+
 'use strict';
 
 //Modified from https://github.com/ArthurClemens/Javascript-Undo-Manager

src/assets/topojson/south-america_50m.json renamed to dist/topojson/south-america_50m.json

@@ -75,7 +75,7 @@ boxes.supplyDefaults = function(traceIn, traceOut, defaultColor) {
         coerce('marker.line.width');
 
         if(boxpoints==='suspectedoutliers') {
-            coerce('marker.line.outliercolor', traceOut.marker.color)
+            coerce('marker.line.outliercolor', traceOut.marker.color);
             coerce('marker.line.outlierwidth');
         }
     }

src/assets/topojson/usa_110m.json renamed to dist/topojson/usa_110m.json

@@ -1,3 +1,5 @@
+'use strict';
+
 var barAttrs = require('../bars/attributes');
 
 

src/assets/topojson/usa_50m.json renamed to dist/topojson/usa_50m.json

@@ -70,7 +70,9 @@ function constructDelaunay(points, color, axis) {
     var v = (axis+2)%3;
     var filteredPoints = [];
     var filteredIds    = [];
-    for(var i=0; i<points.length; ++i) {
+    var i;
+
+    for(i=0; i<points.length; ++i) {
         var p = points[i];
         if(isNaN(p[u]) || !isFinite(p[u]) ||
            isNaN(p[v]) || !isFinite(p[v])) {
@@ -80,7 +82,7 @@ function constructDelaunay(points, color, axis) {
         filteredIds.push(i);
     }
     var cells = triangulate(filteredPoints);
-    for(var i=0; i<cells.length; ++i) {
+    for(i=0; i<cells.length; ++i) {
         var c = cells[i];
         for(var j=0; j<c.length; ++j) {
             c[j] = filteredIds[c[j]];

src/assets/topojson/world_110m.json renamed to dist/topojson/world_110m.json

@@ -13,6 +13,9 @@ var constants = require('./util/constants');
  * Run `npm run build -- dev` or `npm run build -- --dev`
  * to include source map in the plotly.js bundle
  *
+ * N.B. This script is meant for dist builds; the output bundles are placed
+ *      in plotly.js/dist/.
+ *      Use `npm run watch` for dev builds.
  */
 
 var arg = process.argv[2];

src/assets/topojson/world_50m.json renamed to dist/topojson/world_50m.json

@@ -1,4 +1,4 @@
-var fs = require('fs');
+var fs = require('fs-extra');
 
 var sass = require('node-sass');
 
@@ -22,3 +22,10 @@ sass.render({
 fs.readFile(constants.pathToFontSVG, function(err, data) {
     pullFontSVG(data.toString(), constants.pathToFontSVGBuild);
 });
+
+// copy topojson files from sane-topojson to dist/
+fs.copy(constants.pathToTopojsonSrc, constants.pathToTopojsonDist,
+    { clobber: true },
+    function(err) {
+        if(err) throw err;
+});