Update 3d scatter plot without resetting view

[dwastberg]

Hi

I have a streamlit app where I’m displaying a bunch of points as a 3d scatter plot using plotly (plotly.express.scatter_3d). I have a couple of sliders that are used to as input to the function filters and colors certain points for plotting. All that works as expected.

The problem is that every time I change the sliders the view of my 3D plot resets. I want to be able to first rotate/zoom my 3d plot to get the optimal view of my data and then change some arguments with my sliders to see how my data changes. Is there any way to achieve this?

Dag

[thunderbug1]

Maybe wrapping up your plot and your sliders into a form will solve your problem:

st.form - Streamlit Docs

then you can adjust your sliders and enter your new state by clicking the submit button.

Hope this helps

[akraemr]

I have encountered a similar situation. The issue is that when streamlit reruns the python code, the Plotly 3D viewer somehow ends up in a different state. Here is a simple example:

import streamlit as st
from pandas import DataFrame
from numpy.random import random
import plotly.graph_objects as go

data1 = DataFrame(random((100, 3)))
data2 = DataFrame(random((100, 3)))

trace1 = [go.Scatter3d(x=data1[0], y=data1[1], z=data1[2])]
trace2 = [go.Scatter3d(x=data2[0], y=data2[1], z=data2[2])]

fig = go.Figure(trace1 + trace2, layout=go.Layout())

st.plotly_chart(fig, use_container_width=True)

To reproduce:

• copy the above code into test.py
• Bring up the webpage with streamlit run test.py
• interactively rotate the 3D view
• toggle one of the traces in the legend
• observation: the 3D view doesn’t change when the traces are toggled
• now re-run the code by clicking “rerun” in the menu on the right
• toggle one of the traces in the legend
• observation: the 3D view now snaps back to the initial view when toggling traces

The same happens when any control elements like sliders or text input are used since the code is rerun each time their value changes.

Reloading the page leads back to the original state where toggling traces doesn’t change the 3D view, but this obviously doesn’t work when any input elements are present.

This issue is somehow critical to the app I’m working on, but I haven’t found any way to prevent Plotly for behaving like this yet. Not sure if this should be viewed as a Plotly bug or Streamlit bug, but if it is the former it would illustrate a situation where Streamlit’s basic design idea (rerunning everything on input change and caching computationally expensive parts) does not work.

I really hope this can be resolved, because otherwise Streamlit is just so cool

[akshaybaldota]

If you use plotly.graph_objects, you can set a uirevision=‘foo’ as part of go.Layout()(doesn’t matter what the variable is set to). Then as long as the uirevision hold the same value each time you change the slider, the view of your 3d plot should stay the same.

import plotly.graph_objs as go

figure = {"data": [go.Surface(z=z,
                                y=y,
                                x=x)],
            "layout": go.Layout(height=700,
                                margin=dict(l=0, r=0, b=0, t=30),
                                uirevision='foo')}

st.plotly_chart(figure)

[akraemr]

I tried this in the code above, and it still doesn’t change the behavior I see:

import streamlit as st
from pandas import DataFrame
from numpy.random import random
import plotly.graph_objects as go

data1 = DataFrame(random((100, 3)))
data2 = DataFrame(random((100, 3)))

trace1 = [go.Scatter3d(x=data1[0], y=data1[1], z=data1[2])]
trace2 = [go.Scatter3d(x=data2[0], y=data2[1], z=data2[2])]

fig = go.Figure(trace1 + trace2, layout=go.Layout(uirevision='foo'))

title = st.text_input('Movie title', 'Life of Brian')
st.plotly_chart(fig, use_container_width=True)

After rerun or changing the input in the text box, the 3D plot still snaps backs to the initial position upon trace toggle.