Custom marker shapes

[tbreloff]

I would like the ability to create custom marker shapes dynamically (i.e. I don't know the shape beforehand). I don't want the "shapes" that are defined in the layout... I want to take advantage of the mechanisms of traces (scatter markers).

I thought it would be as easy as adding to or overwriting an entry here: https://github.com/plotly/plotly.js/blob/master/src/components/drawing/symbol_defs.js. However, I can't figure out how to access this object from client javascript.

If this is currently possible to do (a hack is fine) please let me know and maybe supply a simple example. If it's not possible, can you give me options of how this can be implemented? Thanks.

[etpinard]

However, I can't figure out how to access this object from client javascript.

That's correct. The symbol definitions aren't exposed to users. Adding or modifying these definitions must be done before the bundling step.

If this is currently possible to do (a hack is fine)

Here's my hacky solution: master...etpinard:custom-symbol-list

then npm run build which outputs a new custom bundle is ./dist/plotly.js

[tbreloff]

Adding or modifying these definitions must be done before the bundling step.

Ok so it's impossible then. This is really too bad.

Is there any other way to override the drawing of scatter markers? At some level they're just functions... when the markers are drawn, I want to use a function which was defined after the plotly.js has been loaded.

then npm run build which outputs a new custom bundle is ./dist/plotly.js

Thanks, but this is not what I want... I want to be able to specify the shape on the fly, not during the build process.

[etpinard]

I want to use a function which was defined after the plotly.js has been loaded.

Can I ask why you would want to do that?

[tbreloff]

Because it's fun?

But seriously, there's a bunch of visualizations where the shape is determined dynamically... in graphs, etc. Plotly has so many features... this is one of the few things that is missing.

[cpsievert]

FWIW, if I need a "custom shape" in our R client, I usually draw a polygon

[tbreloff]

@cpsievert I don't follow exactly what you're doing... how do you specify the custom shape in your polygon?

Also if I understand your code, you lose the ability to have different fills/colors/sizes? (or is that just a bug with the stroke/border?) Would it be hard to extend my earlier example to do this?

scatter(rand(100), zcolor=1:100, marker = (shape, rand(10:50,100), 0.4, stroke(0)))

Thanks for the help!

[cpsievert]

how do you specify the custom shape in your polygon?

with x/y values

you lose the ability to have different fills/colors/sizes?

Not necessarily, if I need two polygons with different fill, for instance, I draw two traces. Most of these plots are made with polygons -- https://beta.rstudioconnect.com/cpsievert/ggplotlyDashBoard/

[jnothman]

+1 for custom symbol paths (or even images as per #197, but polygons would suffice). I don't get why the symbol_defs are parametrised by r when I presume the same could be accomplished by a scale transform in SVG/D3...?

[wtluke]

+1 for this, and ideally to use local pngs as the marker symbol.

[gregorybleiker]

I think this would be a good feature (and something I could use just now, as I would like a rectangular marker, which is not available in the standard list...)

[jason-curtis]

This would be very helpful to me. Higher precision markers like the thinner "+" and "x" available in matplotlib make it easier for me to see what's going on in the data, and I've also had the need to use my own png or svg markers on web plots in the past. It'd be great to be able to "bring your own" marker in some way.

[alexcjohnson]

Thinner + and x exist already (with thickness set just by marker.line.width):
https://rreusser.github.io/plotly-mock-viewer/#marker_symbols

I won't reopen the issue just yet without some more discussion, but I could imagine extending the system we have for path shapes - where we let you specify path strings with data values in them and we extract the numbers from the strings and rescale them to the specific marker. My only concern doing this is performance, shapes aren't really expected to be repeated thousands of times.

That said, it's possible we could also improve the performance of regular pre-defined markers by reusing the same path each time, scaling with a transform, and using vector-effect: non-scaling-stroke. If we did that, custom marker paths would be almost trivial to implement.