Multiple traces in multiple animation plots

📊 Plotly Python
1

Hi,

I am using two linked animation plots, in a similar way to that described here:

This works fine, albeit a little slow with bigger data sets. My question is whether it is possible to also plot multiple traces on one of the linked animation plots. As far as I can tell the answer is no, but I may be missing something and am interested to hear if there is a way to do this.

Thanks

2

@harry11733, You can define more than one trace in a subplot cell to be animated.
The example you linked here has the drawback that the definition of each frame data includes attributes that are not changed from a frame to frame.

Here https://plot.ly/~empet/15012 is the above example where I included one more trace in the cell (1,1), and redefined the frames to avoid passing unnecessary info to each one.

3

This is great. I will try to incorporate these ideas into my plot. Thank you. I like the Bcl2 gene family plot you made I would like to know how you did that as well.

I was going to show you the plot I was making but when I load it up onto the plotly web site the animation no longer works: https://plot.ly/~harry11733/33

I noticed your plot doesn’t work either after I load it onto the web site, although it works fine locally. Not sure what I am doing wrong.

4

@harry11733, You can generate offline and online Plotly animations, with a slightly different code. Only the online animations are active in Plotly cloud.

This is an online animation: https://plot.ly/~empet/14228/
and this is the corresponding notebook: https://plot.ly/~empet/14243.

Notebook for bcl2 (circular phylogram): https://plot.ly/~empet/14834.

5

OK, got the multiple traces per graph working fine by following your example. Thank you for your help. Still have to get plotting online working or I would show results.

With respect to your Bcl2 graph. Is it possible to label the outermost leaf of each branch? I saw the hover labels but a static label for each gene in the tree would be useful. May not be possible.

6

@harry11733, To attach and display a static label to each leaf I can suggest two methods:

1. replace in trace_nodes definition
the line

text=tooltip

by

hovertext=tooltip

In the cell that starts with tooltip=[], insert text=[], textposition=[], and while iterating over the tree clades append ' ' to text, and ‘top center’ to textposition as long as the leaf is not reached yet.
When you arrived to a leaf append the info you want to display to text, and an adequate textposition for that leaf ( read here about textposition https://plot.ly/python/reference/#scatter-textposition).

Perhaps you want a radial label. If this is the case, then:

2. you should extract the x, y-coordinates of the leafs from xnodes, ynodes, and attach a radial annotation following the explanation in this notebook: https://plot.ly/~empet/14803.

7

Got the animation working online, following your example code. I had to reduce the number of particles and time to fit under my data limit but it works fine.

https://plot.ly/~harry11733/105

I have two questions:

  1. I do not understand the relationship between the graph and the uploaded data table (grid). I never reference the grid name while plotting and I can delete the grid on the web site and the plot still works fine. It seems the data is loaded with the plot and the plot is independent of the uploaded data grid. Why bother uploading the grid?
  2. Can I change the rate at which frames are displayed during the playback? I would like to slow down during some parts of the simulation and then speed up again during the more boring bits.
8

@harry11733

  1. Could you please give a minimal code you used to generate what you called online animation, without using grid data? I tried to retrieve your fig definition from Plotly cloud, but I’ve already installed Plotly 3.4.0
    and it appears that you ran your code with a version < 3.4, because your slider definition generates an error during the fig retrieval.
    More precisely, from Python code displayed here: https://plot.ly/~harry11733/105/#code, a slider step is defined as follows:
"steps": [
        {
          "args": [
            [0], {
              "frame": {
                "duration": 0.0, 
                "easing": "linear", 
                "redraw": False
              }, 
              "transition": {
                "duration": 0, 
                "easing": "linear"
              }
            }
          ], 
          "label": 0, 
          "method": "animate"
        },
       ....
]

In the latest version the frame number [0] should be simply 0 (not a list with a single element).

  1. Both updatemenus and sliders definition contain frame duration:
sliders=[dict(steps= [dict(method= 'animate',
                           args= [ f'{k+1}',
                                  dict(mode= 'immediate',
                                       frame= dict( duration=200, redraw= False ),
                                       transition=dict( duration= 0))
                                    ],
                           label=f'day {k+1}'
                             ) for k in range(31)], 
                transition= dict(duration= 30 ),
                x=0,
                y=0, 
                currentvalue=dict(font=dict(size=12), 
                                  prefix='Day: ', 
                                  visible=True, 
                                  xanchor= 'center'
                                 ),  
                len=1.0)#slider length)
           ]

(I copied this slider definition from this notebook: https://plot.ly/~empet/14896)
Hence you can set non-uniform frame duration according to some rule.