Get help from the marimo community

Updated 6 months ago

Putting draggable objects on a plotted 2D array using plotly

At a glance

The community member is new to Plotly and wants to create an interactive 2D plot with a draggable object, such as a rectangle, that can be used to sum the pixel values inside the shape. The community members discuss that this level of interactivity may not be directly supported in Plotly, but suggest exploring alternatives like anywidget or using Dash. One community member mentions they could build a pixel sum widget based on Konva.js in 1-2 days. Another community member found a Dash-based implementation for similar interactivity, but notes that writing callback functions may be challenging. The community members also discuss the possibility of achieving this with other visualization packages like Altair, but note that Plotly/Dash may not support the required box/lasso select tool on 2D heatmaps.

Useful resources
Hi,
I've just started using plotly and want to play around with the interactivity, but I cannot find a lot of information on things like 2D plots. How can I make a draggable object (e.g. a rectangle) that the user can move around on an interactive 2D plot? I would like to e.g. sum the pixel values inside the draggable shape.

Thanks in advance!
A
J
c
5 comments
Hey! That level of interactivity is likely not supported in Plotly. But maybe you could build something like this with an existing anywidget? cc @Jan-Hendrik Müller
hi @crystalmath8450 !
I would like to e.g. sum the pixel values inside the draggable shape.
Yes, that would be possible to build with anywidget.
I can think of a a widget based on https://konvajs.org/docs/sandbox/index.html for calculating pixel values inside the draggable shape. I think it would take me about 1-2 days to build a pixel sum widget.
Hey all, thanks for the replies. I found the implementation below using Dash for this kind of interactivity:
https://dash.plotly.com/interactive-graphing?_gl=1*18hn11a*_gcl_au*MTg2NzkzNTU5NS4xNzI0MDg2NDM2LjE2MjA0OTQ3ODMuMTcyNDEwNjQ1NC4xNzI0MTA2NDc0*_ga*NTkyNTg5NDEyLjE3MjQwODY0MzY.*_ga_6G7EE0JNSC*MTcyNDI0OTg3Mi42LjEuMTcyNDI1MDEyMS42MC4wLjA.

But you would have to write callback functions (and again I am not very familiar with these kinds of things, so I thought marimo would have made it easier). In any case, is something like this possible with another visualisation package like Altair?
I'll have a look at anywidget though!
Looking more into this, actually plotly/Dash do not support the box/lasso select tool on 2D heatmaps, so this would be a bit tricky to implement that way
Add a reply
Sign up and join the conversation on Discord