More gl2d symbols! #1781

etpinard · 2017-06-12T22:58:00Z

Supersedes #1550 with better mocks and fine tuning via gl-vis/gl-scatter2d-sdf#4 and b1bccdc

TODO:

bump gl-scatter2d-sdf once @dfcreative 's Update markers alignment gl-vis/gl-scatter2d-sdf#4 is merged/published

- showing off ALL available symbols!

- so that gl3d list remains the same until we spend more time tweaking each symbol's positioning in gl3d

- 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

- so that it match the svg version - see https://codepen.io/etpinard/pen/WOxxaO for reproducible codepen

etpinard · 2017-06-12T22:59:24Z

test/image/mocks/marker_symbols.json

@@ -0,0 +1,505 @@
+{
+  "data": [


generated with https://codepen.io/etpinard/pen/LLZGZV

etpinard · 2017-06-12T23:01:31Z

SVG:

gl2d:

etpinard · 2017-06-12T23:03:56Z

test/image/mocks/gl3d_marker_symbols.json

+        "marker symbol: 'diamond-open'",
+        "marker symbol: 'cross'"
+      ],
+      "marker": {


We should make sure new marker symbols are positioned and scaled properly in gl3d before adding them. To be completed in a future PR.

dy · 2017-06-12T23:26:15Z

@etpinard if marker set is going to be limited, a better solution would be pre-generated sdf sprite with all markers included. That would enable all svg markers in scattergl and allow to get rid of font-atlas-sdf, which would make code of gl-scatter2d way simpler and performant.
Probably it should be addressed in #949.

alexcjohnson · 2017-06-13T00:46:06Z

Could we make some of the markers be rotated characters? So like ➕ could rotate 45 degrees to make ✖️ rather than having to use letter X.

dy · 2017-06-13T00:58:39Z

@alexcjohnson we use font-atlas-sdf to render symbols, which in turn uses tiny-sdf internally to draw characters with API call draw(letter). It is possible, but would unnecessarily bloat API. In fact it is not the X letter used, but valid unicode box cross symbol ╳, which is rendered so with default ubuntu sans-serif font. We can replace it with any other cross.

alexcjohnson · 2017-06-13T01:22:56Z

OK - just trying to get closer to parity. Lots of good additions here, but I don't think we should include symbols that don't match fairly closely what we do in SVG. To my eye the red ones below are not close enough as shown, and the green ones could probably be used unfilled but not filled.

etpinard · 2017-06-13T14:47:07Z

@alexcjohnson

To my eye the red ones below are not close enough as shown, and the green ones could probably be used unfilled but not filled.

Done in ➡️ bb9a46c

Thanks for taking a look 🔬

dy · 2017-06-13T16:50:16Z

@alexcjohnson thanks for the good point! Fixed in dy/font-atlas-sdf@1f610fe

etpinard · 2017-06-13T18:39:54Z

it's a bit of a shame not to have any "X" symbols...

Yeah, it's a shame. Actually, I should put it back in even it doesn't render in imagetest.

- so that -open symbols are noticeabily NOT filled in white

- used in 'fancy' scattergl traces - control its version here, instead of it being a 3rd-party dep

- fill 'cross-open' and 'x-open' with transparent so that they match the svg version - N.B. 'x' does not render in `imagetest` (appears as []) but appears to work ok in other browsers/OS

- dynamically list -open symbols - draw -open symbol as filled unicode symbols with transparent fill so that the border width scales the same as their non-open versions -> this adds support for heaxgon2-open 🎉 - add annotation about 'x' and 'x-open' in `imagetest`

alexcjohnson · 2017-06-13T23:19:40Z

src/traces/scattergl/convert.js

+            } else if(symbolSpec.noBorder) {
+                bwFactor = 0.25;
+            } else if(symbolSpec.noFill) {
+                bwFactor = 0.1;


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.

. 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:

and gl:

@alexcjohnson here's my latest attempt:

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

//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.

Yeah, I think that's better:

3f664a1

Awesome - I think we've got it 🎉 💃

alexcjohnson · 2017-06-13T23:25:15Z

@etpinard nice work! just the one more question about how we calculate border widths https://github.com/plotly/plotly.js/pull/1781/files#r121820798 and we should be ready to go. The available symbols are looking really good now. Thanks for bearing with all my nitpicks, I just want to get this all as final as possible so we don't need to come back to it again...

includes PRs: - #1657 - gl-vis/gl-scatter2d-sdf#5 - #1781 - #1770

- see #1781 (review) for more info.

alexcjohnson · 2017-06-14T20:44:41Z

💃 💃 💃 !

David Estrada and others added 10 commits June 12, 2017 13:55

Add 49 more unicode symbols for scattergl symbol types

2ab37c7

revert devtools folder to master

9890966

Changed gl_marker 'cross' back to original symbol and ran npm lint-fix

ee67e23

add 'scatter' marker symbol mock

083b00a

- showing off ALL available symbols!

update gl symbol list so that they all render in imagetest container

151b986

split gl markers into gl2d and gl3d lists

70fe756

- so that gl3d list remains the same until we spend more time tweaking each symbol's positioning in gl3d

add gl3d marker symbols mock

fe4cbe0

improve scattergl symbol coloring and border width

b1bccdc

- 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

update gl2d marker symbols mock

b4db0ef

- so that it match the svg version - see https://codepen.io/etpinard/pen/WOxxaO for reproducible codepen

new scattergl baselines (w/ gl-scatter2d-sdf#4)

5b89cf2

etpinard added status: reviewable type: feature labels Jun 12, 2017

etpinard added this to the 1.28.0 milestone Jun 12, 2017

etpinard mentioned this pull request Jun 12, 2017

More symbols for gl2d and gl3d plots #1550

Closed

etpinard commented Jun 12, 2017

View reviewed changes

AJ-proof gl2d marker symbols

bb9a46c

bump gl-scatter2d-sdf to ^1.3.10

612921f

etpinard added 4 commits June 13, 2017 16:08

add non-white bg to marker symbols mock

f15db4b

- so that -open symbols are noticeabily NOT filled in white

check in font-atlas-sdf in dependencies

c35fcb3

- used in 'fancy' scattergl traces - control its version here, instead of it being a 3rd-party dep

add back 'x' and add 'cross-open' & 'x-open'

9c9346a

- fill 'cross-open' and 'x-open' with transparent so that they match the svg version - N.B. 'x' does not render in `imagetest` (appears as []) but appears to work ok in other browsers/OS

update gl2d baselines for font-atlas-sdf@1.3.3

39618de

alexcjohnson reviewed Jun 13, 2017

View reviewed changes

etpinard added a commit that referenced this pull request Jun 14, 2017

pre 1.28.0 dist

b848a0d

includes PRs: - #1657 - gl-vis/gl-scatter2d-sdf#5 - #1781 - #1770

etpinard added 2 commits June 14, 2017 13:54

replace bwFactor logic with minBorderWidth

c7a49eb

- see #1781 (review) for more info.

add svg and gl2d mocks for marker line width scaling

4444c36

etpinard merged commit 91c0b8d into master Jun 14, 2017

etpinard deleted the gl2d-more-symbols branch June 14, 2017 20:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More gl2d symbols! #1781

More gl2d symbols! #1781

etpinard commented Jun 12, 2017 •

edited

Loading

etpinard Jun 12, 2017

etpinard commented Jun 12, 2017

etpinard Jun 12, 2017

dy commented Jun 12, 2017

alexcjohnson commented Jun 13, 2017

dy commented Jun 13, 2017 •

edited

Loading

alexcjohnson commented Jun 13, 2017

etpinard commented Jun 13, 2017

dy commented Jun 13, 2017 •

edited

Loading

etpinard commented Jun 13, 2017

alexcjohnson Jun 13, 2017

etpinard Jun 14, 2017 •

edited

Loading

etpinard Jun 14, 2017

alexcjohnson Jun 14, 2017

etpinard Jun 14, 2017

alexcjohnson Jun 14, 2017

alexcjohnson commented Jun 13, 2017

alexcjohnson commented Jun 14, 2017

More gl2d symbols! #1781

More gl2d symbols! #1781

Conversation

etpinard commented Jun 12, 2017 • edited Loading

etpinard Jun 12, 2017

Choose a reason for hiding this comment

etpinard commented Jun 12, 2017

etpinard Jun 12, 2017

Choose a reason for hiding this comment

dy commented Jun 12, 2017

alexcjohnson commented Jun 13, 2017

dy commented Jun 13, 2017 • edited Loading

alexcjohnson commented Jun 13, 2017

etpinard commented Jun 13, 2017

dy commented Jun 13, 2017 • edited Loading

etpinard commented Jun 13, 2017

alexcjohnson Jun 13, 2017

Choose a reason for hiding this comment

etpinard Jun 14, 2017 • edited Loading

Choose a reason for hiding this comment

etpinard Jun 14, 2017

Choose a reason for hiding this comment

alexcjohnson Jun 14, 2017

Choose a reason for hiding this comment

etpinard Jun 14, 2017

Choose a reason for hiding this comment

alexcjohnson Jun 14, 2017

Choose a reason for hiding this comment

alexcjohnson commented Jun 13, 2017

alexcjohnson commented Jun 14, 2017

etpinard commented Jun 12, 2017 •

edited

Loading

dy commented Jun 13, 2017 •

edited

Loading

dy commented Jun 13, 2017 •

edited

Loading

etpinard Jun 14, 2017 •

edited

Loading