implement makeBubbleSizeFn to proportionally size bubble type scatter plots using the following inputs:

greg · greg · commit 7ea8b88d7160 · 2018-02-06T21:52:20.000-05:00
- sizemin - min size of marker in pixels
- sizemax - max size of marker in pixels
- sizedatamin - any values 'size' array equal to or less than this value will have a marker size of sizemin
- sizedatamax - any values 'size' array equal to or greater than this value will have a marker size of sizemax
- sizedataislog - if the data in size array is logarithmic
- supports negative values in size array
- sizeref is NOT used.
diff --git a/dist/plot-schema.json b/dist/plot-schema.json
@@ -891,6 +891,35 @@
                         "editType": "calc",
                         "description": "Has an effect only if `marker.size` is set to a numerical array. Sets the minimum size (in px) of the rendered marker points."
                     },
+                    "sizemax": {
+                        "valType": "number",
+                        "min": 0,
+                        "dflt": 0,
+                        "role": "style",
+                        "editType": "calc",
+                        "description": "Has an effect only if `marker.size` is set to a numerical array. Sets the maximum size (in px) of the rendered marker points."
+                    },
+                    "sizedatamin": {
+                        "valType": "number",                  
+                        "dflt": 0,
+                        "role": "style",
+                        "editType": "calc",
+                        "description": "Has an effect only if `marker.size` is set to a numerical array.  Data values less than or equal to this value will have the minimum allowed symbol size."
+                    },
+                    "sizedatamax": {
+                        "valType": "number",
+                        "dflt": 0,
+                        "role": "style",
+                        "editType": "calc",
+                        "description": "Has an effect only if `marker.size` is set to a numerical array.  Data values equal to or greater than what is defined here will have the maximum allowed symbol size."
+                    },
+                    "sizedataislog": {
+                        "valType": "boolean",
+                        "dflt": false,
+                        "role": "style",
+                        "editType": "calc",
+                        "description": "Has an effect only if `marker.size` is set to a numerical array.  Data values are log scale.  They will be converted with Math.log10 before being used for sizing."
+                    },
                     "sizemode": {
                         "valType": "enumerated",
                         "values": [
diff --git a/src/components/legend/style.js b/src/components/legend/style.js
@@ -122,9 +122,14 @@ module.exports = function style(s, gd) {
                 dEdit.mlc = boundVal('marker.line.color', pickFirst);
                 dEdit.mlw = boundVal('marker.line.width', Lib.mean, [0, 5]);
                 tEdit.marker = {
+                    sizemode: 'diameter',
                     sizeref: 1,
                     sizemin: 1,
-                    sizemode: 'diameter'
+                    sizemax: null,
+                    sizedatamin: null,
+                    sizedatamax: null,
+                    sizedataislog: false,
+                    sizeforlegend: true
                 };
             }
 
diff --git a/src/traces/scatter/attributes.js b/src/traces/scatter/attributes.js
@@ -302,14 +302,52 @@ module.exports = {
         sizemin: {
             valType: 'number',
             min: 0,
-            dflt: 0,
+            dflt: 8,
             role: 'style',
             editType: 'calc',
             description: [
                 'Has an effect only if `marker.size` is set to a numerical array.',
                 'Sets the minimum size (in px) of the rendered marker points.'
             ].join(' ')
         },
+        sizemax: {
+            valType: 'number',
+            dflt: 48,
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Has an effect only if `marker.size` is set to a numerical array.',
+                'Sets the maximum size (in px) of the rendered marker points.'
+            ].join(' ')
+        },
+        sizedatamin: {
+            valType: 'number',
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Has an effect only if `marker.size` is set to a numerical array.',
+                'Data values less than or equal to this value will have the minimum allowed symbol size.'
+            ].join(' ')
+        },
+        sizedatamax: {
+            valType: 'number',
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Has an effect only if `marker.size` is set to a numerical array.',
+                'Data values equal to or greater than what is defined here will have the maximum allowed symbol size.'
+            ].join(' ')
+        },
+        sizedataislog: {
+            valType: 'boolean',
+            dflt: false,
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Has an effect only if `marker.size` is set to a numerical array.',
+                'Data values are log scale.  They will be converted with Math.log10 before being used for sizing.'
+            ].join(' ')
+        },
         sizemode: {
             valType: 'enumerated',
             values: ['diameter', 'area'],
diff --git a/src/traces/scatter/calc.js b/src/traces/scatter/calc.js
@@ -18,6 +18,7 @@ var subTypes = require('./subtypes');
 var calcColorscale = require('./colorscale_calc');
 var arraysToCalcdata = require('./arrays_to_calcdata');
 var calcSelection = require('./calc_selection');
+var makeBubbleSizeFn = require('./make_bubble_size_func');
 
 function calc(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis || 'x');
@@ -101,31 +102,32 @@ function calcMarkerSize(trace, serieslen) {
     // Treat size like x or y arrays --- Run d2c
     // this needs to go before ppad computation
     var marker = trace.marker;
-    var sizeref = 1.6 * (trace.marker.sizeref || 1);
-    var markerTrans;
-
-    if(trace.marker.sizemode === 'area') {
-        markerTrans = function(v) {
-            return Math.max(Math.sqrt((v || 0) / sizeref), 3);
-        };
-    } else {
-        markerTrans = function(v) {
-            return Math.max((v || 0) / sizeref, 3);
-        };
-    }
+
+    // use a modified version of the bubble size function
+    // with smaller sizeref (resulting in a pad factor)
+    // and making non-numeric and size-0 points count as pad=3.
+    var sizeFn = makeBubbleSizeFn({
+        marker: Lib.extendFlat({}, marker, {
+            sizemode: marker.sizemode || 'diameter',
+            sizeref: 0.8 * (marker.sizeref || 1),
+        })
+    });
+    var markerTrans = function(v) {
+        return Math.max(sizeFn(v), 3);
+    };
 
     if(Array.isArray(marker.size)) {
-        // I tried auto-type but category and dates dont make much sense.
+        // no need to auto-type as category and dates do not make much sense.
         var ax = {type: 'linear'};
         Axes.setConvert(ax);
 
         var s = ax.makeCalcdata(trace.marker, 'size');
         if(s.length > serieslen) s.splice(serieslen, s.length - serieslen);
 
         return s.map(markerTrans);
-    } else {
-        return markerTrans(marker.size);
     }
+
+    return markerTrans(marker.size);
 }
 
 module.exports = {
diff --git a/src/traces/scatter/make_bubble_size_func.js b/src/traces/scatter/make_bubble_size_func.js
@@ -11,30 +11,71 @@
 
 var isNumeric = require('fast-isnumeric');
 
-
-// used in the drawing step for 'scatter' and 'scattegeo' and
-// in the convert step for 'scatter3d'
 module.exports = function makeBubbleSizeFn(trace) {
-    var marker = trace.marker,
-        sizeRef = marker.sizeref || 1,
-        sizeMin = marker.sizemin || 0;
-
-    // for bubble charts, allow scaling the provided value linearly
-    // and by area or diameter.
-    // Note this only applies to the array-value sizes
-
-    var baseFn = (marker.sizemode === 'area') ?
-            function(v) { return Math.sqrt(v / sizeRef); } :
-            function(v) { return v / sizeRef; };
-
-    // TODO add support for position/negative bubbles?
-    // TODO add 'sizeoffset' attribute?
-    return function(v) {
-        var baseSize = baseFn(v / 2);
-
-        // don't show non-numeric and negative sizes
-        return (isNumeric(baseSize) && (baseSize > 0)) ?
-            Math.max(baseSize, sizeMin) :
-            0;
-    };
-};
+    // if (!subTypes.hasMarkers(trace)) return;
+
+    // Treat size like x or y arrays --- Run d2c
+    // this needs to go before ppad computation
+    var marker = trace.marker;
+    
+    // only size the marker if Not called from the legend sytle code or maker.size set
+    // sizeforlegend is only ever set in src/components/legend/sytle.js, not part of json interface.
+    var sizemarker = marker.sizeforlegend ? false : (Array.isArray(marker.size) && marker.size.filter(isNumeric).length > 0);
+    // ideally the sizemin and sizemax should always be set, try to pick a reasonable value when not set.
+    // I've set default values in attributes.js for sizemin of 8 and sizemax of 48
+    var markersizemin = marker.sizemin || 8;    
+    var markersizemax = marker.sizemax || markersizemin + 50; //(sizemarker ? marker.size.length : 50);
+    var validateCalcSize = function (markersize) { 
+        if (markersize < markersizemin) {
+            markersize = markersizemin;
+        }
+        else if (markersize > markersizemax) {
+            markersize = markersizemax;
+        }
+        return markersize;
+    }
+    
+    var sizeByFunc = function (v) {
+        var markersize;
+        if (sizemarker) {            
+            var plotrangemin = marker.sizedatamin || Math.min(...marker.size.filter(isNumeric));
+            var plotrangemax = marker.sizedatamax || Math.max(...marker.size.filter(isNumeric));
+            if (marker.sizedataislog) {
+                // convert to log base 10 equivalents
+                plotrangemin = Math.log10(plotrangemin);
+                plotrangemax = Math.log10(plotrangemax);
+            }
+            var plotrange = plotrangemax - plotrangemin;
+            plotrange = (plotrange === Number.POSITIVE_INFINITY || Number.isNaN(plotrange)) ? Number.MAX_VALUE : plotrange;
+            var makersizerange = markersizemax - markersizemin;
+            var s = marker.sizedataislog ? Math.log10(v) : v;
+            markersize = Math.round((((s - plotrangemin) / plotrange) * makersizerange) + markersizemin);
+            return markersize;
+        }
+        else {
+            return v / 2; // no sizing array (old way)
+        }
+    }
+    var markerTrans;
+
+    if (trace.marker.sizemode === 'area') {
+        markerTrans = function (v) {
+            // don't display marker for non numeric size values (allow override to min?)
+            if (!isNumeric(v)) return 0; 
+            var s = sizeByFunc(v);
+            var area = Math.sqrt(s);
+            return validateCalcSize(area);
+        };
+    } else {
+        markerTrans = function (v) {
+            // don't display marker for non numeric size values (allow override to min?)
+            if (!isNumeric(v)) return 0; 
+            var s = sizeByFunc(v);
+            // don't let the symbol size go outside of the allowed range
+            return validateCalcSize(s);
+        };
+    }
+
+    return markerTrans;
+}
+
diff --git a/src/traces/scatter/marker_defaults.js b/src/traces/scatter/marker_defaults.js
@@ -70,6 +70,10 @@ module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout
         coerce('marker.sizeref');
         coerce('marker.sizemin');
         coerce('marker.sizemode');
+        coerce('marker.sizemax');
+        coerce('marker.sizedatamin');
+        coerce('marker.sizedatamax');
+        coerce('marker.sizedataislog');
     }
 
     if(opts.gradient) {
diff --git a/src/traces/scatter3d/attributes.js b/src/traces/scatter3d/attributes.js
@@ -139,9 +139,13 @@ var attrs = module.exports = overrideAll({
             description: 'Sets the marker symbol type.'
         },
         size: extendFlat({}, scatterMarkerAttrs.size, {dflt: 8}),
+        sizemode: scatterMarkerAttrs.sizemode,
         sizeref: scatterMarkerAttrs.sizeref,
         sizemin: scatterMarkerAttrs.sizemin,
-        sizemode: scatterMarkerAttrs.sizemode,
+        sizemax: scatterMarkerAttrs.sizemax,
+        sizedatamin: scatterMarkerAttrs.sizedatamin,
+        sizedatamax: scatterMarkerAttrs.sizedatamax,
+        sizedataislog: scatterMarkerAttrs.sizedataislog,
         opacity: extendFlat({}, scatterMarkerAttrs.opacity, {
             arrayOk: false,
             description: [
diff --git a/src/traces/scattercarpet/attributes.js b/src/traces/scattercarpet/attributes.js
@@ -92,9 +92,13 @@ module.exports = {
         opacity: scatterMarkerAttrs.opacity,
         maxdisplayed: scatterMarkerAttrs.maxdisplayed,
         size: scatterMarkerAttrs.size,
+        sizemode: scatterMarkerAttrs.sizemode,
         sizeref: scatterMarkerAttrs.sizeref,
         sizemin: scatterMarkerAttrs.sizemin,
-        sizemode: scatterMarkerAttrs.sizemode,
+        sizemax: scatterMarkerAttrs.sizemax,
+        sizedatamin: scatterMarkerAttrs.sizedatamin,
+        sizedatamax: scatterMarkerAttrs.sizedatamax,
+        sizedataislog: scatterMarkerAttrs.sizedataislog,
         line: extendFlat({
             width: scatterMarkerLineAttrs.width,
             editType: 'calc'
diff --git a/src/traces/scattergeo/attributes.js b/src/traces/scattergeo/attributes.js
@@ -89,9 +89,13 @@ module.exports = overrideAll({
         symbol: scatterMarkerAttrs.symbol,
         opacity: scatterMarkerAttrs.opacity,
         size: scatterMarkerAttrs.size,
+        sizemode: scatterMarkerAttrs.sizemode,
         sizeref: scatterMarkerAttrs.sizeref,
         sizemin: scatterMarkerAttrs.sizemin,
-        sizemode: scatterMarkerAttrs.sizemode,
+        sizemax: scatterMarkerAttrs.sizemax,
+        sizedatamin: scatterMarkerAttrs.sizedatamin,
+        sizedatamax: scatterMarkerAttrs.sizedatamax,
+        sizedataislog: scatterMarkerAttrs.sizedataislog,
         showscale: scatterMarkerAttrs.showscale,
         colorbar: scatterMarkerAttrs.colorbar,
         line: extendFlat({
diff --git a/src/traces/scattergl/attributes.js b/src/traces/scattergl/attributes.js
@@ -59,9 +59,13 @@ var attrs = module.exports = overrideAll({
     marker: extendFlat({}, colorAttributes('marker'), {
         symbol: scatterMarkerAttrs.symbol,
         size: scatterMarkerAttrs.size,
+        sizemode: scatterMarkerAttrs.sizemode,
         sizeref: scatterMarkerAttrs.sizeref,
         sizemin: scatterMarkerAttrs.sizemin,
-        sizemode: scatterMarkerAttrs.sizemode,
+        sizemax: scatterMarkerAttrs.sizemax,
+        sizedatamin: scatterMarkerAttrs.sizedatamin,
+        sizedatamax: scatterMarkerAttrs.sizedatamax,
+        sizedataislog: scatterMarkerAttrs.sizedataislog,
         opacity: scatterMarkerAttrs.opacity,
         showscale: scatterMarkerAttrs.showscale,
         colorbar: scatterMarkerAttrs.colorbar,
diff --git a/src/traces/scattermapbox/attributes.js b/src/traces/scattermapbox/attributes.js
@@ -85,9 +85,13 @@ module.exports = overrideAll({
         },
         opacity: markerAttrs.opacity,
         size: markerAttrs.size,
+        sizemode: markerAttrs.sizemode,
         sizeref: markerAttrs.sizeref,
         sizemin: markerAttrs.sizemin,
-        sizemode: markerAttrs.sizemode,
+        sizemax: markerAttrs.sizemax,
+        sizedatamin: markerAttrs.sizedatamin,
+        sizedatamax: markerAttrs.sizedatamax,
+        sizedataislog: markerAttrs.sizedataislog,
         color: markerAttrs.color,
         colorscale: markerAttrs.colorscale,
         cauto: markerAttrs.cauto,
diff --git a/src/traces/scatterternary/attributes.js b/src/traces/scatterternary/attributes.js
@@ -121,9 +121,13 @@ module.exports = {
         opacity: scatterMarkerAttrs.opacity,
         maxdisplayed: scatterMarkerAttrs.maxdisplayed,
         size: scatterMarkerAttrs.size,
+        sizemode: scatterMarkerAttrs.sizemode,
         sizeref: scatterMarkerAttrs.sizeref,
         sizemin: scatterMarkerAttrs.sizemin,
-        sizemode: scatterMarkerAttrs.sizemode,
+        sizemax: scatterMarkerAttrs.sizemax,
+        sizedatamin: scatterMarkerAttrs.sizedatamin,
+        sizedatamax: scatterMarkerAttrs.sizedatamax,
+        sizedataislog: scatterMarkerAttrs.sizedataislog,
         line: extendFlat({
             width: scatterMarkerLineAttrs.width,
             editType: 'calc'
diff --git a/test/image/mocks/bubble_nonnumeric-sizes.json b/test/image/mocks/bubble_nonnumeric-sizes.json
@@ -131,7 +131,9 @@
                     -759812.2658780153
                 ],
                 "sizeref": 10000,
-                "sizemin": 3
+                "sizemin": 5,
+                "sizemax": 60,
+                "sizedatamax": 600000
             },
             "text": [
                 "sup",
diff --git a/test/image/mocks/bubble_scale.json b/test/image/mocks/bubble_scale.json
