improve scattergl symbol coloring and border width

- add per-symbol specs (w/ 'noBorder' and 'bwFactor')
- color `-open` symbols using `marker.color`
- color symbols with no border (e.g. 'line-ne', 'asterisk')
  using `marker.line.color` only
- puts us close to on-par with SVG

src/constants/gl2d_markers.js

@@ -10,68 +10,222 @@
 'use strict';
 
 module.exports = {
-    'circle': '●',
-    'circle-open': '○',
-    'square': '■',
-    'square-open': '□',
-    'diamond': '◆',
-    'diamond-open': '◇',
-    'cross': '✚',
-    'triangle-up': '▲',
-    'triangle-up-open': '△',
-    'triangle-down': '▼',
-    'triangle-down-open': '▽',
-    'triangle-left': '◄',
-    'triangle-left-open': '◁',
-    'triangle-right': '►',
-    'triangle-right-open': '▷',
-    'triangle-ne': '◥',
-    'triangle-ne-open': '◹',
-    'triangle-nw': '◤',
-    'triangle-nw-open': '◸',
-    'triangle-se': '◢',
-    'triangle-se-open': '◿',
-    'triangle-sw': '◣',
-    'triangle-sw-open': '◺',
-    'pentagon': '⬟',
-    'pentagon-open': '⬠',
-    'hexagon': '⬢',
-    'hexagon-open': '⬡',
-    'hexagon2': '⬣',
-    'star': '★',
-    'star-open': '☆',
-    'diamond-tall': '♦',
-    'diamond-tall-open': '♢',
-    'diamond-wide': '▰',
-    'diamond-wide-open': '▱',
-    'bowtie': '⧓',
-    'bowtie-open': '⋈',
-    'circle-cross': '⨁',
-    'circle-x': '⨂',
-    'square-cross': '⊞',
-    'square-x': '⊠',
-    'diamond-cross': '⟠',
-    'diamond-x': '❖',
-    'cross-thin': '+',
-    'cross-thin-open': '+',
-    'x-thin': '╳',
-    'x-thin-open': '╳',
-    'asterisk': '✳',
-    'asterisk-open': '✳',
-    'y-up': '⅄',
-    'y-up-open': '⅄',
-    'y-down': 'Y',
-    'y-down-open': 'Y',
-    'y-left': '≺',
-    'y-left-open': '≺',
-    'y-right': '≻',
-    'y-right-open': '≻',
-    'line-ew': '─',
-    'line-ew-open': '─',
-    'line-ns': '│',
-    'line-ns-open': '│',
-    'line-ne': '╱',
-    'line-ne-open': '╱',
-    'line-nw': '╲',
-    'line-nw-open': '╲'
+    'circle': {
+        unicode: '●'
+    },
+    'circle-open': {
+        unicode: '○'
+    },
+    'square': {
+        unicode: '■'
+    },
+    'square-open': {
+        unicode: '□'
+    },
+    'diamond': {
+        unicode: '◆'
+    },
+    'diamond-open': {
+        unicode: '◇'
+    },
+    'cross': {
+        unicode: '✚'
+    },
+    'triangle-up': {
+        unicode: '▲'
+    },
+    'triangle-up-open': {
+        unicode: '△'
+    },
+    'triangle-down': {
+        unicode: '▼'
+    },
+    'triangle-down-open': {
+        unicode: '▽'
+    },
+    'triangle-left': {
+        unicode: '◄',
+    },
+    'triangle-left-open': {
+        unicode: '◁',
+    },
+    'triangle-right': {
+        unicode: '►',
+    },
+    'triangle-right-open': {
+        unicode: '▷',
+    },
+    'triangle-ne': {
+        unicode: '◥',
+    },
+    'triangle-ne-open': {
+        unicode: '◹',
+    },
+    'triangle-nw': {
+        unicode: '◤',
+    },
+    'triangle-nw-open': {
+        unicode: '◸',
+    },
+    'triangle-se': {
+        unicode: '◢',
+    },
+    'triangle-se-open': {
+        unicode: '◿',
+    },
+    'triangle-sw': {
+        unicode: '◣',
+    },
+    'triangle-sw-open': {
+        unicode: '◺',
+    },
+    'pentagon': {
+        unicode: '⬟',
+    },
+    'pentagon-open': {
+        unicode: '⬠',
+    },
+    'hexagon': {
+        unicode: '⬢',
+    },
+    'hexagon-open': {
+        unicode: '⬡',
+    },
+    'hexagon2': {
+        unicode: '⬣',
+    },
+    'star': {
+        unicode: '★',
+    },
+    'star-open': {
+        unicode: '☆',
+    },
+    'diamond-tall': {
+        unicode: '♦',
+    },
+    'diamond-tall-open': {
+        unicode: '♢',
+    },
+    'diamond-wide': {
+        unicode: '▰',
+    },
+    'diamond-wide-open': {
+        unicode: '▱',
+    },
+    'bowtie': {
+        unicode: '⧓',
+    },
+    'bowtie-open': {
+        unicode: '⋈',
+        bwFactor: 0.25
+    },
+    'circle-cross': {
+        unicode: '⨁',
+        bwFactor: 0.25
+    },
+    'circle-x': {
+        unicode: '⨂',
+        bwFactor: 0.25
+    },
+    'square-cross': {
+        unicode: '⊞',
+        bwFactor: 0.25
+    },
+    'square-x': {
+        unicode: '⊠',
+        bwFactor: 0.25
+    },
+    'diamond-cross': {
+        unicode: '⟠',
+        bwFactor: 0.25
+    },
+    'diamond-x': {
+        unicode: '❖',
+        bwFactor: 0.25
+    },
+    'cross-thin': {
+        unicode: '+',
+        noBorder: true
+    },
+    'cross-thin-open': {
+        unicode: '+',
+    },
+    'x-thin': {
+        unicode: '╳',
+        noBorder: true
+    },
+    'x-thin-open': {
+        unicode: '╳',
+    },
+    'asterisk': {
+        unicode: '✳',
+        noBorder: true
+    },
+    'asterisk-open': {
+        unicode: '✳',
+    },
+    'y-up': {
+        unicode: '⅄',
+        noBorder: true
+    },
+    'y-up-open': {
+        unicode: '⅄',
+        noBorder: true
+    },
+    'y-down': {
+        unicode: 'Y',
+        noBorder: true
+    },
+    'y-down-open': {
+        unicode: 'Y',
+        noBorder: true
+    },
+    'y-left': {
+        unicode: '≺',
+        noBorder: true
+    },
+    'y-left-open': {
+        unicode: '≺',
+        noBorder: true
+    },
+    'y-right': {
+        unicode: '≻',
+        noBorder: true
+    },
+    'y-right-open': {
+        unicode: '≻',
+        noBorder: true
+    },
+    'line-ew': {
+        unicode: '─',
+        noBorder: true
+    },
+    'line-ew-open': {
+        unicode: '─',
+        noBorder: true
+    },
+    'line-ns': {
+        unicode: '│',
+        noBorder: true
+    },
+    'line-ns-open': {
+        unicode: '│',
+        noBorder: true
+    },
+    'line-ne': {
+        unicode: '╱',
+        noBorder: true
+    },
+    'line-ne-open': {
+        unicode: '╱',
+        noBorder: true
+    },
+    'line-nw': {
+        unicode: '╲',
+        noBorder: true
+    },
+    'line-nw-open': {
+        unicode: '╲',
+        noBorder: true
+    }
 };

src/traces/scattergl/convert.js

@@ -214,7 +214,7 @@ function _convertArray(convert, data, count) {
 var convertNumber = convertArray.bind(null, function(x) { return +x; });
 var convertColorBase = convertArray.bind(null, str2RGBArray);
 var convertSymbol = convertArray.bind(null, function(x) {
-    return MARKER_SYMBOLS[x] || '●';
+    return MARKER_SYMBOLS[x] ? x : 'circle';
 });
 
 function convertColor(color, opacity, count) {
@@ -251,8 +251,11 @@ function _convertColor(colors, opacities, count) {
     return result;
 }
 
-proto.update = function(options) {
+function isSymbolOpen(symbol) {
+    return symbol.split('-open')[1] === '';
+}
 
+proto.update = function(options) {
     if(options.visible !== true) {
         this.isVisible = false;
         this.hasLines = false;
@@ -491,28 +494,44 @@ proto.updateFancy = function(options) {
         this.scatter.options.colors = new Array(pId * 4);
         this.scatter.options.borderColors = new Array(pId * 4);
 
-        var markerSizeFunc = makeBubbleSizeFn(options),
-            markerOpts = options.marker,
-            markerOpacity = markerOpts.opacity,
-            traceOpacity = options.opacity,
-            colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len),
-            glyphs = convertSymbol(markerOpts.symbol, len),
-            borderWidths = convertNumber(markerOpts.line.width, len),
-            borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len),
-            index;
+        var markerSizeFunc = makeBubbleSizeFn(options);
+        var markerOpts = options.marker;
+        var markerOpacity = markerOpts.opacity;
+        var traceOpacity = options.opacity;
+        var symbols = convertSymbol(markerOpts.symbol, len);
+        var colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len);
+        var borderWidths = convertNumber(markerOpts.line.width, len);
+        var borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len);
+        var index, symbol, symbolSpec, _colors, _borderColors, bwFactor;
 
         sizes = convertArray(markerSizeFunc, markerOpts.size, len);
 
         for(i = 0; i < pId; ++i) {
             index = idToIndex[i];
+            symbol = symbols[index];
+            symbolSpec = MARKER_SYMBOLS[symbol];
+
+            if(isSymbolOpen(symbol)) {
+                _colors = colors;
+                _borderColors = colors;
+                bwFactor = 0.25;
+            } else if(symbolSpec.noBorder) {
+                _colors = borderColors;
+                _borderColors = borderColors;
+                bwFactor = 0.25;
+            } else {
+                _colors = colors;
+                _borderColors = borderColors;
+                bwFactor = symbolSpec.bwFactor || 0.5;
+            }
 
             this.scatter.options.sizes[i] = 4.0 * sizes[index];
-            this.scatter.options.glyphs[i] = glyphs[index];
-            this.scatter.options.borderWidths[i] = 0.5 * borderWidths[index];
+            this.scatter.options.glyphs[i] = symbolSpec.unicode;
+            this.scatter.options.borderWidths[i] = bwFactor * borderWidths[index];
 
             for(j = 0; j < 4; ++j) {
-                this.scatter.options.colors[4 * i + j] = colors[4 * index + j];
-                this.scatter.options.borderColors[4 * i + j] = borderColors[4 * index + j];
+                this.scatter.options.colors[4 * i + j] = _colors[4 * index + j];
+                this.scatter.options.borderColors[4 * i + j] = _borderColors[4 * index + j];
             }
         }