Skip to content

More gl2d symbols! #1781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jun 14, 2017
Merged

More gl2d symbols! #1781

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
2ab37c7
Add 49 more unicode symbols for scattergl symbol types
Mar 15, 2017
9890966
revert devtools folder to master
Mar 16, 2017
ee67e23
Changed gl_marker 'cross' back to original symbol and ran npm lint-fix
Mar 21, 2017
083b00a
add 'scatter' marker symbol mock
etpinard Jun 12, 2017
151b986
update gl symbol list so that they all render in `imagetest` container
etpinard Jun 12, 2017
70fe756
split gl markers into gl2d and gl3d lists
etpinard Jun 12, 2017
fe4cbe0
add gl3d marker symbols mock
etpinard Jun 12, 2017
b1bccdc
improve scattergl symbol coloring and border width
etpinard Jun 12, 2017
b4db0ef
update gl2d marker symbols mock
etpinard Jun 12, 2017
5b89cf2
new scattergl baselines (w/ gl-scatter2d-sdf#4)
etpinard Jun 12, 2017
bb9a46c
AJ-proof gl2d marker symbols
etpinard Jun 13, 2017
612921f
bump gl-scatter2d-sdf to ^1.3.10
etpinard Jun 13, 2017
f15db4b
add non-white bg to marker symbols mock
etpinard Jun 13, 2017
c35fcb3
check in font-atlas-sdf in dependencies
etpinard Jun 13, 2017
9c9346a
add back 'x' and add 'cross-open' & 'x-open'
etpinard Jun 13, 2017
39618de
update gl2d baselines for [email protected]
etpinard Jun 13, 2017
fffc702
simplify scattergl per-symbol logic
etpinard Jun 13, 2017
c7a49eb
replace bwFactor logic with minBorderWidth
etpinard Jun 14, 2017
4444c36
add svg and gl2d mocks for marker line width scaling
etpinard Jun 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"delaunay-triangulate": "^1.1.6",
"es6-promise": "^3.0.2",
"fast-isnumeric": "^1.1.1",
"font-atlas-sdf": "^1.3.3",
"gl-contour2d": "^1.1.2",
"gl-error2d": "^1.2.1",
"gl-error3d": "^1.0.6",
Expand All @@ -76,7 +77,7 @@
"gl-plot3d": "^1.5.4",
"gl-pointcloud2d": "^1.0.0",
"gl-scatter2d": "^1.2.2",
"gl-scatter2d-sdf": "^1.3.9",
"gl-scatter2d-sdf": "^1.3.10",
"gl-scatter3d": "^1.0.4",
"gl-select-box": "^1.0.1",
"gl-shader": "4.2.0",
Expand Down
133 changes: 133 additions & 0 deletions src/constants/gl2d_markers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/**
* Copyright 2012-2017, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/


'use strict';

var extendFlat = require('../lib/extend').extendFlat;

var symbolsWithOpenSupport = {
'circle': {
unicode: '●'
},
'square': {
unicode: '■'
},
'diamond': {
unicode: '◆'
},
'cross': {
unicode: '✚'
},
'x': {
unicode: '❌'
},
'triangle-up': {
unicode: '▲'
},
'triangle-down': {
unicode: '▼'
},
'triangle-left': {
unicode: '◄'
},
'triangle-right': {
unicode: '►'
},
'triangle-ne': {
unicode: '◥'
},
'triangle-nw': {
unicode: '◤'
},
'triangle-se': {
unicode: '◢'
},
'triangle-sw': {
unicode: '◣'
},
'pentagon': {
unicode: '⬟'
},
'hexagon': {
unicode: '⬢'
},
'hexagon2': {
unicode: '⬣'
},
'star': {
unicode: '★'
},
'diamond-tall': {
unicode: '♦'
},
'bowtie': {
unicode: '⧓'
},
'diamond-x': {
unicode: '❖',
bwFactor: 0.25
},
'cross-thin': {
unicode: '+',
noBorder: true
},
'asterisk': {
unicode: '✳',
noBorder: true
},
'y-up': {
unicode: '⅄',
noBorder: true
},
'y-down': {
unicode: 'Y',
noBorder: true
},
'line-ew': {
unicode: '─',
noBorder: true
},
'line-ns': {
unicode: '│',
noBorder: true
}
};

var openSymbols = {};
var keys = Object.keys(symbolsWithOpenSupport);

for(var i = 0; i < keys.length; i++) {
var k = keys[i];
openSymbols[k + '-open'] = extendFlat({}, symbolsWithOpenSupport[k]);
}

var otherSymbols = {
'circle-cross-open': {
unicode: '⨁',
noFill: true
},
'circle-x-open': {
unicode: '⨂',
noFill: true
},
'square-cross-open': {
unicode: '⊞',
noFill: true
},
'square-x-open': {
unicode: '⊠',
noFill: true
}
};

module.exports = extendFlat({},
symbolsWithOpenSupport,
openSymbols,
otherSymbols
);
0 src/constants/gl_markers.js → src/constants/gl3d_markers.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/traces/scatter3d/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ var colorAttributes = require('../../components/colorscale/color_attributes');
var errorBarAttrs = require('../../components/errorbars/attributes');
var DASHES = require('../../constants/gl3d_dashes');

var MARKER_SYMBOLS = require('../../constants/gl_markers');
var MARKER_SYMBOLS = require('../../constants/gl3d_markers');
var extendFlat = require('../../lib/extend').extendFlat;

var scatterLineAttrs = scatterAttrs.line,
Expand Down
2 changes: 1 addition & 1 deletion src/traces/scatter3d/convert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ var str2RgbaArray = require('../../lib/str2rgbarray');
var formatColor = require('../../lib/gl_format_color');
var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
var DASH_PATTERNS = require('../../constants/gl3d_dashes');
var MARKER_SYMBOLS = require('../../constants/gl_markers');
var MARKER_SYMBOLS = require('../../constants/gl3d_markers');

var calculateError = require('./calc_errors');

Expand Down
2 changes: 1 addition & 1 deletion src/traces/scatter3d/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ var Scatter3D = {};

Scatter3D.plot = require('./convert');
Scatter3D.attributes = require('./attributes');
Scatter3D.markerSymbols = require('../../constants/gl_markers');
Scatter3D.markerSymbols = require('../../constants/gl3d_markers');
Scatter3D.supplyDefaults = require('./defaults');
Scatter3D.colorbar = require('../scatter/colorbar');
Scatter3D.calc = require('./calc');
Expand Down
2 changes: 1 addition & 1 deletion src/traces/scattergl/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ var scatterAttrs = require('../scatter/attributes');
var colorAttributes = require('../../components/colorscale/color_attributes');

var DASHES = require('../../constants/gl2d_dashes');
var MARKERS = require('../../constants/gl_markers');
var MARKERS = require('../../constants/gl2d_markers');
var extendFlat = require('../../lib/extend').extendFlat;
var extendDeep = require('../../lib/extend').extendDeep;

Expand Down
74 changes: 55 additions & 19 deletions src/traces/scattergl/convert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ var formatColor = require('../../lib/gl_format_color');
var subTypes = require('../scatter/subtypes');
var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
var getTraceColor = require('../scatter/get_trace_color');
var MARKER_SYMBOLS = require('../../constants/gl_markers');
var MARKER_SYMBOLS = require('../../constants/gl2d_markers');
var DASHES = require('../../constants/gl2d_dashes');

var AXES = ['xaxis', 'yaxis'];

var transparent = [0, 0, 0, 0];

function LineWithMarkers(scene, uid) {
this.scene = scene;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -251,8 +251,17 @@ function _convertColor(colors, opacities, count) {
return result;
}

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

function fillColor(colorIn, colorOut, offsetIn, offsetOut) {
for(var j = 0; j < 4; j++) {
colorIn[4 * offsetIn + j] = colorOut[4 * offsetOut + j];
}
}

proto.update = function(options) {
if(options.visible !== true) {
this.isVisible = false;
this.hasLines = false;
Expand Down Expand Up @@ -441,7 +450,7 @@ proto.updateFancy = function(options) {
var getX = (xaxis.type === 'log') ? xaxis.d2l : function(x) { return x; };
var getY = (yaxis.type === 'log') ? yaxis.d2l : function(y) { return y; };

var i, j, xx, yy, ex0, ex1, ey0, ey1;
var i, xx, yy, ex0, ex1, ey0, ey1;

for(i = 0; i < len; ++i) {
this.xData[i] = xx = getX(x[i]);
Expand Down Expand Up @@ -491,29 +500,56 @@ 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, isOpen;

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

for(i = 0; i < pId; ++i) {
index = idToIndex[i];
symbol = symbols[index];
symbolSpec = MARKER_SYMBOLS[symbol];
isOpen = isSymbolOpen(symbol);

if(symbolSpec.noBorder && !isOpen) {
_colors = borderColors;
} else {
_colors = colors;
}

if(isOpen) {
_borderColors = colors;
} else {
_borderColors = borderColors;
}

if(symbolSpec.bwFactor) {
bwFactor = symbolSpec.bwFactor;
} else if(symbolSpec.noBorder) {
bwFactor = 0.25;
} else if(symbolSpec.noFill) {
bwFactor = 0.1;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so... this means that for these symbols with a smaller bwFactor the border will grow more slowly than the others? The result being that for small borderWidth these ones be thicker than other symbols, and for large borderWidth they will be thinner, and somewhere in the middle they will look similar right? I would think we'd do better with something like a minimum border width, as a fraction of size, that corresponds to the line width already baked into the unicode symbol, so the symbol gets no explicit border until you provide a width greater than this, and at greater widths you set a border borderWidth - minBorderWidth.

Copy link
Contributor Author

@etpinard etpinard Jun 14, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

. this means that for these symbols with a smaller bwFactor the border will grow more slowly than the others?

You're correct. Thanks for the headsup! For documentation purposes, using https://codepen.io/etpinard/pen/JJRMxo?editors=0010 as of commit fffc702

SVG gives:

image

and gl:

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnson here's my latest attempt:

gl2d-more-symbols...gl2d-more-symbols-line-width

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

//this.scatter.options.borderWidths[i] = (bw > minBorderWidth) ? bw - minBorderWidth : 0;

// but I found better results with:
this.scatter.options.borderWidths[i] = (bw > minBorderWidth) ? bw - minBorderWidth : bw;

minBorderWidth should only be nonzero for noBorder or noFill symbols right? Does that make it work better to use bw - minBorderWidth : 0? As it is it looks funny, as border width is non-monotonic.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think that's better:

3f664a1

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome - I think we've got it 🎉 💃

} else {
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];
if(isOpen && !symbolSpec.noBorder && !symbolSpec.noFill) {
fillColor(this.scatter.options.colors, transparent, i, 0);
} else {
fillColor(this.scatter.options.colors, _colors, i, index);
}
fillColor(this.scatter.options.borderColors, _borderColors, i, index);
}

this.fancyScatter.update();
Expand Down
Binary file modified test/image/baselines/gl2d_10.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_12.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_14.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_17.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_axes_booleans.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_axes_labels.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_axes_lines.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_axes_range_manual.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_axes_range_mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_axes_range_type.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_date_axes.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_error_bars.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_marker_symbols.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_multiple_subplots.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_scatter-colorscale-colorbar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_scatter-marker-line-colorscales.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_simple_inset.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_size_margins.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_stacked_coupled_subplots.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl2d_stacked_subplots.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/image/baselines/gl3d_marker_symbols.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/image/baselines/marker_symbols.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading