Skip to content

Commit b1bccdc

Browse files
etpinardetpinard
committedJun 12, 2017
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
·
v3.0.1v1.28.0
1 parent fe4cbe0 commit b1bccdc

File tree

2 files changed

+252
-79
lines changed

2 files changed

+252
-79
lines changed
 

Diff for: ‎src/constants/gl2d_markers.js

+218-64
Original file line numberDiff line numberDiff line change
@@ -10,68 +10,222 @@
1010
'use strict';
1111

1212
module.exports = {
13-
'circle': '●',
14-
'circle-open': '○',
15-
'square': '■',
16-
'square-open': '□',
17-
'diamond': '◆',
18-
'diamond-open': '◇',
19-
'cross': '✚',
20-
'triangle-up': '▲',
21-
'triangle-up-open': '△',
22-
'triangle-down': '▼',
23-
'triangle-down-open': '▽',
24-
'triangle-left': '◄',
25-
'triangle-left-open': '◁',
26-
'triangle-right': '►',
27-
'triangle-right-open': '▷',
28-
'triangle-ne': '◥',
29-
'triangle-ne-open': '◹',
30-
'triangle-nw': '◤',
31-
'triangle-nw-open': '◸',
32-
'triangle-se': '◢',
33-
'triangle-se-open': '◿',
34-
'triangle-sw': '◣',
35-
'triangle-sw-open': '◺',
36-
'pentagon': '⬟',
37-
'pentagon-open': '⬠',
38-
'hexagon': '⬢',
39-
'hexagon-open': '⬡',
40-
'hexagon2': '⬣',
41-
'star': '★',
42-
'star-open': '☆',
43-
'diamond-tall': '♦',
44-
'diamond-tall-open': '♢',
45-
'diamond-wide': '▰',
46-
'diamond-wide-open': '▱',
47-
'bowtie': '⧓',
48-
'bowtie-open': '⋈',
49-
'circle-cross': '⨁',
50-
'circle-x': '⨂',
51-
'square-cross': '⊞',
52-
'square-x': '⊠',
53-
'diamond-cross': '⟠',
54-
'diamond-x': '❖',
55-
'cross-thin': '+',
56-
'cross-thin-open': '+',
57-
'x-thin': '╳',
58-
'x-thin-open': '╳',
59-
'asterisk': '✳',
60-
'asterisk-open': '✳',
61-
'y-up': '⅄',
62-
'y-up-open': '⅄',
63-
'y-down': 'Y',
64-
'y-down-open': 'Y',
65-
'y-left': '≺',
66-
'y-left-open': '≺',
67-
'y-right': '≻',
68-
'y-right-open': '≻',
69-
'line-ew': '─',
70-
'line-ew-open': '─',
71-
'line-ns': '│',
72-
'line-ns-open': '│',
73-
'line-ne': '╱',
74-
'line-ne-open': '╱',
75-
'line-nw': '╲',
76-
'line-nw-open': '╲'
13+
'circle': {
14+
unicode: '●'
15+
},
16+
'circle-open': {
17+
unicode: '○'
18+
},
19+
'square': {
20+
unicode: '■'
21+
},
22+
'square-open': {
23+
unicode: '□'
24+
},
25+
'diamond': {
26+
unicode: '◆'
27+
},
28+
'diamond-open': {
29+
unicode: '◇'
30+
},
31+
'cross': {
32+
unicode: '✚'
33+
},
34+
'triangle-up': {
35+
unicode: '▲'
36+
},
37+
'triangle-up-open': {
38+
unicode: '△'
39+
},
40+
'triangle-down': {
41+
unicode: '▼'
42+
},
43+
'triangle-down-open': {
44+
unicode: '▽'
45+
},
46+
'triangle-left': {
47+
unicode: '◄',
48+
},
49+
'triangle-left-open': {
50+
unicode: '◁',
51+
},
52+
'triangle-right': {
53+
unicode: '►',
54+
},
55+
'triangle-right-open': {
56+
unicode: '▷',
57+
},
58+
'triangle-ne': {
59+
unicode: '◥',
60+
},
61+
'triangle-ne-open': {
62+
unicode: '◹',
63+
},
64+
'triangle-nw': {
65+
unicode: '◤',
66+
},
67+
'triangle-nw-open': {
68+
unicode: '◸',
69+
},
70+
'triangle-se': {
71+
unicode: '◢',
72+
},
73+
'triangle-se-open': {
74+
unicode: '◿',
75+
},
76+
'triangle-sw': {
77+
unicode: '◣',
78+
},
79+
'triangle-sw-open': {
80+
unicode: '◺',
81+
},
82+
'pentagon': {
83+
unicode: '⬟',
84+
},
85+
'pentagon-open': {
86+
unicode: '⬠',
87+
},
88+
'hexagon': {
89+
unicode: '⬢',
90+
},
91+
'hexagon-open': {
92+
unicode: '⬡',
93+
},
94+
'hexagon2': {
95+
unicode: '⬣',
96+
},
97+
'star': {
98+
unicode: '★',
99+
},
100+
'star-open': {
101+
unicode: '☆',
102+
},
103+
'diamond-tall': {
104+
unicode: '♦',
105+
},
106+
'diamond-tall-open': {
107+
unicode: '♢',
108+
},
109+
'diamond-wide': {
110+
unicode: '▰',
111+
},
112+
'diamond-wide-open': {
113+
unicode: '▱',
114+
},
115+
'bowtie': {
116+
unicode: '⧓',
117+
},
118+
'bowtie-open': {
119+
unicode: '⋈',
120+
bwFactor: 0.25
121+
},
122+
'circle-cross': {
123+
unicode: '⨁',
124+
bwFactor: 0.25
125+
},
126+
'circle-x': {
127+
unicode: '⨂',
128+
bwFactor: 0.25
129+
},
130+
'square-cross': {
131+
unicode: '⊞',
132+
bwFactor: 0.25
133+
},
134+
'square-x': {
135+
unicode: '⊠',
136+
bwFactor: 0.25
137+
},
138+
'diamond-cross': {
139+
unicode: '⟠',
140+
bwFactor: 0.25
141+
},
142+
'diamond-x': {
143+
unicode: '❖',
144+
bwFactor: 0.25
145+
},
146+
'cross-thin': {
147+
unicode: '+',
148+
noBorder: true
149+
},
150+
'cross-thin-open': {
151+
unicode: '+',
152+
},
153+
'x-thin': {
154+
unicode: '╳',
155+
noBorder: true
156+
},
157+
'x-thin-open': {
158+
unicode: '╳',
159+
},
160+
'asterisk': {
161+
unicode: '✳',
162+
noBorder: true
163+
},
164+
'asterisk-open': {
165+
unicode: '✳',
166+
},
167+
'y-up': {
168+
unicode: '⅄',
169+
noBorder: true
170+
},
171+
'y-up-open': {
172+
unicode: '⅄',
173+
noBorder: true
174+
},
175+
'y-down': {
176+
unicode: 'Y',
177+
noBorder: true
178+
},
179+
'y-down-open': {
180+
unicode: 'Y',
181+
noBorder: true
182+
},
183+
'y-left': {
184+
unicode: '≺',
185+
noBorder: true
186+
},
187+
'y-left-open': {
188+
unicode: '≺',
189+
noBorder: true
190+
},
191+
'y-right': {
192+
unicode: '≻',
193+
noBorder: true
194+
},
195+
'y-right-open': {
196+
unicode: '≻',
197+
noBorder: true
198+
},
199+
'line-ew': {
200+
unicode: '─',
201+
noBorder: true
202+
},
203+
'line-ew-open': {
204+
unicode: '─',
205+
noBorder: true
206+
},
207+
'line-ns': {
208+
unicode: '│',
209+
noBorder: true
210+
},
211+
'line-ns-open': {
212+
unicode: '│',
213+
noBorder: true
214+
},
215+
'line-ne': {
216+
unicode: '╱',
217+
noBorder: true
218+
},
219+
'line-ne-open': {
220+
unicode: '╱',
221+
noBorder: true
222+
},
223+
'line-nw': {
224+
unicode: '╲',
225+
noBorder: true
226+
},
227+
'line-nw-open': {
228+
unicode: '╲',
229+
noBorder: true
230+
}
77231
};

Diff for: ‎src/traces/scattergl/convert.js

+34-15
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ function _convertArray(convert, data, count) {
214214
var convertNumber = convertArray.bind(null, function(x) { return +x; });
215215
var convertColorBase = convertArray.bind(null, str2RGBArray);
216216
var convertSymbol = convertArray.bind(null, function(x) {
217-
return MARKER_SYMBOLS[x] || '●';
217+
return MARKER_SYMBOLS[x] ? x : 'circle';
218218
});
219219

220220
function convertColor(color, opacity, count) {
@@ -251,8 +251,11 @@ function _convertColor(colors, opacities, count) {
251251
return result;
252252
}
253253

254-
proto.update = function(options) {
254+
function isSymbolOpen(symbol) {
255+
return symbol.split('-open')[1] === '';
256+
}
255257

258+
proto.update = function(options) {
256259
if(options.visible !== true) {
257260
this.isVisible = false;
258261
this.hasLines = false;
@@ -491,28 +494,44 @@ proto.updateFancy = function(options) {
491494
this.scatter.options.colors = new Array(pId * 4);
492495
this.scatter.options.borderColors = new Array(pId * 4);
493496

494-
var markerSizeFunc = makeBubbleSizeFn(options),
495-
markerOpts = options.marker,
496-
markerOpacity = markerOpts.opacity,
497-
traceOpacity = options.opacity,
498-
colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len),
499-
glyphs = convertSymbol(markerOpts.symbol, len),
500-
borderWidths = convertNumber(markerOpts.line.width, len),
501-
borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len),
502-
index;
497+
var markerSizeFunc = makeBubbleSizeFn(options);
498+
var markerOpts = options.marker;
499+
var markerOpacity = markerOpts.opacity;
500+
var traceOpacity = options.opacity;
501+
var symbols = convertSymbol(markerOpts.symbol, len);
502+
var colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len);
503+
var borderWidths = convertNumber(markerOpts.line.width, len);
504+
var borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len);
505+
var index, symbol, symbolSpec, _colors, _borderColors, bwFactor;
503506

504507
sizes = convertArray(markerSizeFunc, markerOpts.size, len);
505508

506509
for(i = 0; i < pId; ++i) {
507510
index = idToIndex[i];
511+
symbol = symbols[index];
512+
symbolSpec = MARKER_SYMBOLS[symbol];
513+
514+
if(isSymbolOpen(symbol)) {
515+
_colors = colors;
516+
_borderColors = colors;
517+
bwFactor = 0.25;
518+
} else if(symbolSpec.noBorder) {
519+
_colors = borderColors;
520+
_borderColors = borderColors;
521+
bwFactor = 0.25;
522+
} else {
523+
_colors = colors;
524+
_borderColors = borderColors;
525+
bwFactor = symbolSpec.bwFactor || 0.5;
526+
}
508527

509528
this.scatter.options.sizes[i] = 4.0 * sizes[index];
510-
this.scatter.options.glyphs[i] = glyphs[index];
511-
this.scatter.options.borderWidths[i] = 0.5 * borderWidths[index];
529+
this.scatter.options.glyphs[i] = symbolSpec.unicode;
530+
this.scatter.options.borderWidths[i] = bwFactor * borderWidths[index];
512531

513532
for(j = 0; j < 4; ++j) {
514-
this.scatter.options.colors[4 * i + j] = colors[4 * index + j];
515-
this.scatter.options.borderColors[4 * i + j] = borderColors[4 * index + j];
533+
this.scatter.options.colors[4 * i + j] = _colors[4 * index + j];
534+
this.scatter.options.borderColors[4 * i + j] = _borderColors[4 * index + j];
516535
}
517536
}
518537

0 commit comments

Comments
 (0)
Please sign in to comment.