✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

Example for freehand drawing in Plotly JS

Is there any example of freehand drawing in Plotly JS that I can start from? I’ve seen a few in Dash, but Dash is just Plotly underneath, right?
Thanks!

1 Like

Hi @supermario! For now the tool developed by the plotly team for freehand drawing is dash-canvas (https://dash.plot.ly/canvas), which is indeed a component for Dash, but not a part of the plotly.js library. We’re planning to add some drawing capabilities to plotly.js in the coming months, could you please tell more about what you would like to do, it could help us design these drawing tools to come. Thanks!

1 Like

Hi @Emmanuelle, the existing functionality in dash/canvas like pencil, line, rectangle, would be cool as a start. plus a circle tool (similar to rectangle). also the ability to get the traces drawn by the user programmatically in JS (as a JSON). Thanks for the prompt response!

1 Like

Thanks @supermario! I’m curious to know about your application: is it in order to annotate a figure (ie to highlight some part of the data etc.), or for another purpose? One thing which you can do already is to create shapes (rectangles, lines, circles etc., see https://plot.ly/javascript/shapes/) in a figure in “edit mode” (https://plot.ly/javascript/configuration-options/#edit-mode), so that you can modify the shapes after you’ve created the figure. For drawing capabilities with modebar buttons, please stay tuned :slight_smile:

1 Like

it’s a ML Angular app where data scientists, geophysicists are trying to label subsurface images so that a model is trained to id further imagery based on his/her selections. they need to freely draw or create boxes, circles delimiting areas on top of an existing image. we keep a b/w mask of his drawing, but would be better if we could keep the original traces to save storage space. Would be better do all in Plotly rather than involve Dash as it’s a JS based webapp.

1 Like

just spoke to another engineer involved in the project and a lasso tool like in photoshop would be good. he also mentioned the ability to select an x or y region. this would be similar to what you have now for zooming in, except it would be drawing a box from the corners of the image w/ delimitation in x or y. also, would you have idea of ETA on this? would that be for next Plotly release version? Thanks @Emmanuelle !

Thanks @supermario for the interesting information. So this is basically what we intend to develop but the amount of work is quite subsequent, at least several months. We will try to release early features (rectangles drawing for example) in one of the next few releases, please stay tuned!
For the lasso or rectangle selections, you can actually already make already these selections in plotly.js (and you can have multiple selections by clicking on shift), and retrieve their geometry in selectedData. Although lasso selections are not available for an image trace, you can still display images as layout images (https://plot.ly/javascript/images/) and make selections. Hope this helps in the mid term!

1 Like