improve scattermapbox convert step:

etpinard · etpinard · commit b30b8fbd12fe · 2016-05-31T13:40:19.000-04:00
- add support for arrayOk 'marker.color' and 'marker.size'
- add make 'lines' render as 'MultiLineString' GeoJSON
diff --git a/src/traces/scattermapbox/convert.js b/src/traces/scattermapbox/convert.js
@@ -13,22 +13,31 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var subTypes = require('../scatter/subtypes');
+var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
+var hasColorscale = require('../../components/colorscale/has_colorscale');
+var makeColorScaleFn = require('../../components/colorscale/make_scale_function');
+
+var COLOR_PROP = 'circle-color';
+var SIZE_PROP = 'circle-size';
 
 
 module.exports = function convert(trace) {
     var isVisible = (trace.visible === true),
         hasLines = subTypes.hasLines(trace),
         hasMarkers = subTypes.hasMarkers(trace);
 
-    var coordinates = (isVisible) ? calcCoords(trace) : [];
+    var geojsonLines = makeBlankGeoJSON(),
+        layoutLines = { visibility: 'none' },
+        paintLines = {};
 
-    var geojsonLines = makeGeoJson('LineString', coordinates);
-    var layoutLines = {
-        visibility: (isVisible && hasLines) ? 'visible' : 'none'
-    };
-    var paintLines = {};
+    var geojsonMarkers = makeBlankGeoJSON(),
+        layoutMarkers = { visibility: 'none' },
+        paintMarkers = {};
+
+    if(isVisible && hasLines) {
+        geojsonLines = makeLineGeoJSON(trace);
+        layoutLines.visibility = 'visible';
 
-    if(hasLines) {
         var line = trace.line;
 
         Lib.extendFlat(paintLines, {
@@ -41,23 +50,19 @@ module.exports = function convert(trace) {
         // line-dasharray and line-pattern
     }
 
-    var geojsonMarkers = makeGeoJson('MultiPoint', coordinates);
-    var layoutMarkers = {
-        visibility: (isVisible && hasMarkers) ? 'visible' : 'none'
-    };
-    var paintMarkers = {};
+    if(isVisible && hasMarkers) {
+        var hash = {};
+        hash[COLOR_PROP] = {};
+        hash[SIZE_PROP] = {};
 
-    if(hasMarkers) {
-        var marker = trace.marker;
+        geojsonMarkers = makeMarkerGeoJSON(trace, hash);
+        layoutMarkers.visibility = 'visible';
 
         Lib.extendFlat(paintMarkers, {
-            'circle-radius': marker.size / 2,
-            'circle-color': marker.color,
-            'circle-opacity': trace.opacity * marker.opacity
+            'circle-opacity': trace.opacity * trace.marker.opacity,
+            'circle-color': calcMarkerColor(trace, hash),
+            'circle-radius': calcMarkerSize(trace, hash)
         });
-
-        // could probably translate arrayOk properties into
-        // multiple layers by making paintMarkers a array!
     }
 
     return {
@@ -71,6 +76,130 @@ module.exports = function convert(trace) {
     };
 };
 
+function makeBlankGeoJSON() {
+    return {
+        type: 'Point',
+        coordinates: []
+    };
+}
+
+function makeLineGeoJSON(trace) {
+    return {
+        type: 'MultiLineString',
+        coordinates: [calcCoords(trace)]
+    };
+}
+
+// N.B. `hash` is mutated here
+function makeMarkerGeoJSON(trace, hash) {
+    var marker = trace.marker,
+        len = trace.lon.length,
+        hasColorArray = Array.isArray(marker.color),
+        hasSizeArray = Array.isArray(marker.size);
+
+    // translate vals in trace arrayOk containers
+    // into a val-to-index hash object
+    function translate(props, key, cont, index) {
+        var value = cont[index];
+
+        if(!hash[key][value]) hash[key][value] = index;
+
+        props[key] = hash[key][value];
+    }
+
+    var features = [];
+
+    for(var i = 0; i < len; i++) {
+        var lon = trace.lon[i],
+            lat = trace.lat[i];
+
+        var props = {};
+        if(hasColorArray) translate(props, COLOR_PROP, marker.color, i);
+        if(hasSizeArray) translate(props, SIZE_PROP, marker.size, i);
+
+        if(isNumeric(lon) && isNumeric(lat)) {
+            features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: [+lon, +lat]
+                },
+                properties: props
+            });
+        }
+    }
+
+    return {
+        type: 'FeatureCollection',
+        features: features
+    };
+}
+
+function calcMarkerColor(trace, hash) {
+    var marker = trace.marker;
+    var out;
+
+    if(Array.isArray(marker.color)) {
+        var colorFn = hasColorscale(trace, 'marker') ?
+                makeColorScaleFn(marker.colorscale, marker.cmin, marker.cmax) :
+                Lib.identity;
+
+        var vals = Object.keys(hash[COLOR_PROP]),
+            stops = [];
+
+        for(var i = 0; i < vals.length; i++) {
+            var val = vals[i];
+
+            stops.push([ hash[COLOR_PROP][val], colorFn(val) ]);
+        }
+
+        out = {
+            property: SIZE_PROP,
+            stops: stops
+        };
+
+    }
+    else {
+        out = marker.color;
+    }
+
+    return out;
+}
+
+function calcMarkerSize(trace, hash) {
+    var marker = trace.marker;
+    var out;
+
+    if(Array.isArray(marker.size)) {
+        var sizeFn = makeBubbleSizeFn(trace);
+
+        var vals = Object.keys(hash[SIZE_PROP]),
+            stops = [];
+
+        for(var i = 0; i < vals.length; i++) {
+            var val = vals[i];
+
+            stops.push([ hash[SIZE_PROP][val], sizeFn(val) ]);
+        }
+
+        // stops indices must be sorted
+        stops.sort(function(a, b) {
+            return a[0] - b[0];
+        });
+
+        out = {
+            property: SIZE_PROP,
+            stops: stops
+        };
+    }
+    else {
+        out = marker.size / 2;
+    }
+
+    return out;
+}
+
+
 function calcCoords(trace) {
     var len = trace.lon.length;
     var coordinates = [];
@@ -86,16 +215,3 @@ function calcCoords(trace) {
 
     return coordinates;
 }
-
-function makeGeoJson(geometryType, coordinates) {
-    return {
-        type: 'FeatureCollection',
-        features: [{
-            type: 'Feature',
-            geometry: {
-                type: geometryType,
-                coordinates: coordinates
-            }
-        }]
-    };
-}
diff --git a/src/traces/scattermapbox/index.js b/src/traces/scattermapbox/index.js
@@ -16,10 +16,9 @@ var ScatterMapbox = {};
 //  - Different line dashes
 //  - no `locations` support
 //  - no 'text' mode support
-//  - arrayOk properties would require multi layers per source
-//  - support for marker.line ???
-ScatterMapbox.attributes = require('../scattergeo/attributes');
-ScatterMapbox.supplyDefaults = require('../scattergeo/defaults');
+//  - limited arrayOk
+//  - support for marker.line (could do it using two concentric circles)
+
 ScatterMapbox.attributes = require('./attributes');
 ScatterMapbox.supplyDefaults = require('./defaults');
 ScatterMapbox.colorbar = require('../scatter/colorbar');
