Hello!
I am relatively new to plotly and working on animating some plots I have that contain a very large amount of data.
The format of the specific plot is a large plot of x-y coordinates that are time dependent with a timeline of properties of the coordinates below, so something like this:
| ---------------------------------------------------- |
|---|
| ---------------------------------------------------- |
| ------ position coordinate plane-------- |
| ---------------------------------------------------- |
| ---------------------------------------------------- |
| ---------------------------------------------------- |
|-------time history of -----------------------|
|-------------------properties------------------|
The position coordinate plane has 17 small data traces that correspond to boundaries.
It also contains any number of traces corresponding to multiple moving points with the full time history of those paths as lines.
The time history has a domain of date-time information and a range [1,4] (re-labeled) showing color coded properties for the position information.
I currently have these plots animated to show a moving point along the required traces and a line to move along the time history to indicate what time the current position was indicated.
My problem is that after hitting the “Play” button, the zoom functionality removes every piece of information except the animated frames AND I am having trouble connecting a time scrollbar to the animation.
I want to stress that the datasets are very large and adding the entire time history to every frame for redraw will crump the html’s ability to be effective because it will be too large.
Begin code:
fig = make_subplots(rows=2, cols=1,
row_heights=[0.8,0.2],
vertical_spacing=0.05)
#16 of these
for bound in boundary:
fig.add_trace(go.Scattergl(x=bound['x'], y=bound['y'])
#Any number of these
for trace in time:
fig.add_trace(go.Scattergl(x=trace['x'],y=trace['y'])
#Two of these
for color in ['red','blue']:
fig.add_trace(go.Scattergl(x=[...],y=[...],marker_color=color)
#Time history of properties
#Any number of traces here
for property in properties:
fig.add_trace(go.Scattergl(x=time,y=property['y'])
#Then buttons
fig.layout.updatemenus = [
dict(type='buttons',buttons=[
dict(label="Play",
method='animate',
args=[None,{'frame': {
'duration':0,
'transition':{
'duration':15,
'easing': 'cubic-in-out'},
'redraw':False},
'fromcurrent':True}]),
dict(label="Pause",
method='animate',
args=[[None],{'frame': {
'duration':0,
'transition':{
'duration':15,
'easing': 'cubic-in-out'},
'redraw':False
'mode':'immediate'},
'fromcurrent':True}]))]
#Finally the animation frames
fig.update(frames=[
go.Frame(data = [
list of go.Scatter with x and y values as singular points from required traces,
go.Scatter(x=[currentTiime,currentTime], y=[1,4])
],
traces=listOfTracesBeingAnimated) for k in range(number of time points)])
It seems the recommended methods are to add all data to every frame, but, again, there are thousands of data points in most of these traces, so adding the entire trace to every frame will make the plot unusable, but I would like to keep zoom functionality and maybe be able to add a time scroll bar.
Update:
Changing “Scattergl” to “Scatter” increases the data weight of the whole HTML, but not by more than putting every trace in every frame and seems to fix the problem when adding extra traces as recommended by examples.
It seems the stress put on the “name” argument of go.Frame for animation with a slider bar wasn’t stressed enough for me to get it. the “name” argument of go.Frame must match the args passed to the slider steps.