Forward and Backward Button instead of Slider

📊 Plotly Python
1

Hi

I have got a huge dataset of latitude and longitude that I need to visualize by timestamp. Hence, when I am using the animation frame in the plotly slider, I am not able to see the steps clearly and transition smoothly between one frame and the next. I am also having the Play and Pause button animations to visualize the mobility of the individual but I would like something similar to have a forward and backward button instead of the slider to visualize the individual frames.

I am unable to reproduce the same code here due to privacy issues of the data. But I am using a small self created dataframe to show the gist of the plot.

import plotly
import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame(
    {'City': ['Buenos Aires', 'Brasilia', 'Santiago', 'Bogota', 'Caracas'],
     'Country': ['Argentina', 'Brazil', 'Chile', 'Colombia', 'Venezuela'],
     'lat': [-34.58, -15.78, -33.45, 4.60, 10.48],
     'lon': [-58.66, -47.91, -70.66, -74.08, -66.86]})

fig=go.Figure(go.Scattermapbox(
               lat=[df.loc[0, 'lat']],
               lon=[df.loc[0, 'lon']],
               mode='markers',
               marker=dict(size=10, color='red')
            ))
        

fig.update_layout(mapbox=dict(#accesstoken=mapbox_access_token,
                              bearing=0,
                              center=dict(lat=33.49,
                              lon=-112.05),
                              pitch=0,
                              zoom=8.5,
                              style='carto-positron'))
frames = [go.Frame(data= [go.Scattermapbox(
                                       lat=df.loc[:k+1, 'lat'], 
                                       lon=df.loc[:k+1, 'lon'])], 
                   traces= [0],
                   name=f'frame{k}'      
                  )for k  in  range(len(df))]    
fig.update(frames=frames);

sliders = [dict(steps= [dict(method= 'animate',
                           args= [[ f'frame{k}'],
                                  dict(mode= 'immediate',
                                  frame= dict(duration=100, redraw= True ),
                                              transition=dict( duration= 0))
                                 ],
                            label='{:d}'.format(k)
                             ) for k in range(len(df))], 
                transition= dict(duration= 0 ),
                x=0,#slider starting position  
                y=0, 
                currentvalue=dict(font=dict(size=12), 
                                  prefix='Point: ', 
                                  visible=True, 
                                  xanchor= 'center'),  
                len=1.0)
           ]
fig.update_layout(updatemenus=[dict(type='buttons', showactive=False,
                                y=0,
                                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=100, 
                                                                    redraw=True),
                                                         transition=dict(duration=0),
                                                         fromcurrent=True,
                                                         mode='immediate'
                                                        )
                                                   ]
                                             )
                                        ]
                               )
                          ],
                  sliders=sliders);
fig.show()

It would be great if someone could advise on achieving the same effect of a slider using custom buttons, named Next and Back to help in better visualizations on a huge dataset when the steps go missing.

Thank you in advance!

1 Like