How to create a create a concrete frame and animate that?

📊 Plotly Python
4

@Zawardo

Here is how you animate 3d points in an interval of time [0,20], with time step=1:

import numpy as np
import plotly.graph_objs as go


nodi = 2*np.random.rand(30, 3)

trace = go.Scatter3d(x=nodi[:,0],y=nodi[:,1],z=nodi[:,2],
                      mode='markers',
                      marker=dict(size=6,
                      color= nodi[:, 2],
                      colorscale='Viridis'),
    )
# Configure the layout.
layout = go.Layout(width=600, height=600,
                  updatemenus=[dict(type='buttons', showactive=False,
                                y=1,
                                x=1.05,
                                xanchor='right',
                                yanchor='top',
                                pad=dict(t=0, r=10),
                                buttons=[dict(label='Play',
                                              method='animate',
                                              args=[None, 
                                                    dict(frame=dict(duration=500, 
                                                                    redraw=True),
                                                         transition=dict(duration=0),
                                                         fromcurrent=True,
                                                         mode='immediate')
                                                   ])
                                        ])])
                  

data = [trace]


#define frames:
t = np.linspace(0, 20, 21)
frames = [dict(data=[dict(type='scatter3d',
                         x=2*np.random.rand(30), 
                         y=2*np.random.rand(30), 
                         z=2*np.random.rand(30) )],
              name=k) for k in range(t.shape[0]) ]

fig = go.Figure(data=data, layout=layout, frames=frames)
fig.update_layout(scene =dict(xaxis= dict(range =[-1,3]), 
                              yaxis=dict(range =[-1,3]), 
                              zaxis=dict(range =[-1,3])
                 ))
fig.show()

to attach a slider that displays the time, just perform this update:

fig.update_layout(sliders=  [{'yanchor': 'top',
                              'xanchor': 'left', 
                              'currentvalue': {'font': {'size': 16}, 
                                               'prefix': 'Time: ', 
                                               'visible': True, 
                                               'xanchor': 'right'},
                              'transition': {'duration': 500.0, 'easing': 'linear'},
                              'pad': {'b': 10, 't': 50}, 
                              'len': 0.9, 'x': 0.1, 'y': 0, 
                              'steps': [{'args': [[k], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False},
                                      'transition': {'duration': 0, 'easing': 'linear'}}], 
                       'label': k, 'method': 'animate'} for k in range(t.shape[0])      
                    ]}])

PS: giving a use case means providing minimal data, too :slight_smile:

1 Like