More symbols for gl2d and gl3d plots #1550
Conversation
| "y": [1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5], | ||
| "mode": "markers", | ||
| "text": [ | ||
| "marker number: 0<br>marker string: 'circle'", |
There was a problem hiding this comment.
@alexcjohnson Turns out we didn't have a mock testing all our marker symbols.
I dug out https://github.com/plotly/streambed/pull/358 and plotly/documentation#16 and made this one here.
There was a problem hiding this comment.
Good catch! Can you include just a few examples of 1xx (-open), 2xx (-dot) and 3xx (-open-dot) in this mock? It should be able to support just one more row 😉
And then we'll be able to see how this compares with the gl implementation, where I'm pretty sure colors are handled differently in the -open case than they currently are for svg, ie we would never have a double line like gl2d currently has.
| "y": 1, | ||
| "xref": "paper", | ||
| "yref": "paper", | ||
| "text": "Add 100 (or '-open') to marker number (or string) to remove the fill color,<br>Add 200 (or '-dot') to marker number (or string) to add a dot in the middle,<br>Add 300 (or '-open-dot', 'dot-open') to marker number (or string) for both.", |
There was a problem hiding this comment.
I presume (-open)?-dot is not supported in gl? That's fine, but we should be clear about this.
| 'circle-x': '⊗', | ||
| 'square-cross': '⊞', | ||
| 'square-x': '⊠', | ||
| 'asterisk': '✱' |
There was a problem hiding this comment.
There are two other tweaks this is going to need before it can really match how the svg symbols behave:
- all the symbols should have roughly the same scale. You can see from the svg test image that this is a little bit subjective, for example the side of the square is the same as the diameter of the circle, but the outer width of X and + are a little bigger - basically I tweaked each one until put on a plot next to the other I thought they all looked "about the same size"
- the symbol should be placed with its centroid at the data location, not the center of the bounding rect. For most of the symbols these are the same, but for the triangles they are not (and I guess also for the pentagons and 5-sided stars, to a lesser extent).
There was a problem hiding this comment.
Basically this is going to require passing symbol-dependent offsets and scales to the relevant gl-vis modules. @destradafilm not sure if you want to take a crack at this, I'm afraid it'll be a little bit tedious and @etpinard and I may not be able to get to it for a while.
There was a problem hiding this comment.
@alexcjohnson I'd like to take a crack at it, but it will take a while for me since I've got a full plate at the moment, as well.
|
fyi @dfcreative |
|
@dfcreative you're ok taking over this one? |
|
@etpinard yes. To clarify: it is expected to just extend various symbols, or to consider @alexcjohnson's suggestions on optical alignment? Also some OS don't have symbols declared, eg. for me it looks like: As a workaround, it is possible to replace bad symbols with ones from http://www.copypastecharacter.com/. But manual alignment is unsustainable in this case because symbol size/glyph vary across different OS. Good solution − come up with optically balanced marker font (with technique similar to wavefont) and load is via add-font or alike. |
Yes, make sure @alexcjohnson 's #1550 (comment) is addressed.
Do you have an idea of which symbols are available on each of the major OS? (Plotly has a https://www.browserstack.com if you need one). We don't have to include all of them. If we can add the triangles and a few star-like symbols that work in most OS in this PR, I'd be very happy.
That's sounds like a better long-term solution. I would prefer waiting for |
|
Ok just finished a tool for normalizing markers size/alignment, following @alexcjohnson suggestions. We can use that in order to look markers consistent across devices/OS, because right now glyphs are very different. Introduced that into font-atlas-sdf. |
Excellent. |
|
Branch https://github.com/dfcreative/plotly.js/tree/pr-1482-gl-symbols includes merged master and extends symbols to be cross-platform. gl-vis/gl-scatter2d-sdf#4 normalizes markers alignment/size. The result is more or less consistent across platforms:
Exact size of points can be adjusted here https://github.com/gl-vis/gl-scatter2d-sdf/blob/fit-symbols/scatter.js#L51. That can break some tests not significantly. |
|
Superseded by #1781 |
This PR supersedes @destradafilm's #1482