Animation subplots with common slider

📊 Plotly Python
1

I am trying to create a 4 subplot figure where each subplot is a line chart connected to a common animation slider.

So far I was able to create 4 subplots with line charts but was unable to add the animation w the common slider. Kindly let me know how can I fix this?

import numpy as np
from plotly.offline import download_plotlyjs, init_notebook_mode,  iplot
init_notebook_mode(connected=True)


fig = dict(
    layout = dict(width=900, height=1000,
        xaxis1 = {'domain': [0.0, 0.44], 'anchor': 'y1', 'title': 'Days since infusion', 'range': [-40, 11]},
        yaxis1 = {'domain': [0.0, 0.48], 'anchor': 'x1', 'title': 'lab value 1', 'range': [-1, 11]},
        xaxis2 = {'domain': [0.55, 1.0], 'anchor': 'y2', 'title': 'Days since infusion', 'range': [-40, 11]},
        yaxis2 = {'domain': [0.0, 0.48], 'anchor': 'x2', 'title': 'lab value 2', 'range': [-1, 11]},

        xaxis3 = {'domain': [0.0, 0.44], 'anchor': 'y3', 'title': 'Days since infusion', 'range': [-40, 11]},
        yaxis3 = {'domain': [0.54, 1], 'anchor': 'x3', 'title': 'lab value 3', 'range': [-1, 11]},
        xaxis4 = {'domain': [0.55, 1.0], 'anchor': 'y4', 'title': 'Days since infusion', 'range': [-40, 11]},
        yaxis4 = {'domain': [0.54, 1], 'anchor': 'x4', 'title': 'lab value 4', 'range': [-1, 11]},

        title  = '',
        margin = {'t': 50, 'b': 50, 'l': 50, 'r': 50},
    ),

    data = [
        {'type': 'scatter', 
         'name': 'f1', 
         'x': [-35, -27, -5, -3, 0, 2], 
         'y': [3, 3, 2, 1, 4, 7], 
         'hoverinfo': 'name+text', 
         'legendgroup': 'f1','showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},

        {'type': 'scatter', # subplot 2
         'name': 'f2', 
         'x': [-35, -27, -5, -3, 0, 2], 
         'y': [  2.5,   1,   1, 1,   2.5,   1], 
         'hoverinfo': 'name+text', 
         'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'},
        
        {'type': 'scatter',  # subplot 3
         'name': 'f3', 
         'x': [-35, -27, -5, -3, 0, 2],  
         'y': [  2.5,   1,   1, 1,   2.5,   1], 
         'hoverinfo': 'name+text', 
         'legendgroup': 'f3', 'showlegend': True, 'xaxis': 'x3', 'yaxis': 'y3'},
        
        {'type': 'scatter',   # subplot 4
         'name': 'f4', 
         'x': [-35, -27, -5, -3, 0, 2],  
         'y': [  2.5,   1,   1, 1,   2.5,   1], 
         'hoverinfo': 'name+text', 
         'legendgroup': 'f4', 'showlegend': True, 'xaxis': 'x4', 'yaxis': 'y4'},
                
    ]
)


updatemenus = [dict(type='buttons',
                    buttons=[dict(label='Play',
                                  method='animate',
                                  args=[None, {"frame": {"duration": 500}}]
                                 ),
                             dict(label='Pause',
                                  method='animate',
                                  args=[None, {"frame": {"duration": 500}}]
                                 )],
                    direction= 'left', 
                    pad=dict(r= 10, t=85), 
                    showactive =True, x= 0.1, y= 0, xanchor= 'right', yanchor= 'top')
            ]

sliders = [{'yanchor': 'top',
            'xanchor': 'left', 
            'currentvalue': {
                'font': {'size': 16}, 
                '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': [None, {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False},
                                      'transition': {'duration': 0, 'easing': 'linear'}}], 
                       'label': k, 'method': 'animate'} for k in range(6)       
                    ]
           }]



fig['layout'].update(updatemenus=updatemenus,
          sliders=sliders)

iplot(fig)

image
image1626×1598 209 KB

2

@Aks
To get help you should tell us what you intend to animate in each frame. How each scatter plot changes from frame to frame?

3

My bad @empet Basically, each value of the slider represents one step (animation frame) in drawing the line chart.

The play button should draw all 4 charts with animation, starting from the leftmost point (slider=0), and ending on the rightmost point (slider=5) in each subplot simultaneously.

4

@Aks
I asked how the traces are changing from frame to frame, not how the slider is moving. I think you want to plot each line progresivelly. Initialy the line between the points (x[0], y[0]), (x[1], y[1]), in each cell, and in the next frames you are adding more segments until in the last frame you get the entire scatter line in each subplot cell.

  • I answered this question n times, n sufficiently big. You have just to search this forum.