# Cumulative Lines Animation in Python

**URL:** https://community.plotly.com/t/cumulative-lines-animation-in-python/25707
**Category:** 📊 Plotly Python
**Created:** [July 10, 2019, 7:27pm UTC](https://community.plotly.com/t/cumulative-lines-animation-in-python/25707 "2019-07-10T19:27:30Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![will.zhao09](https://avatars.discourse-cdn.com/v4/letter/w/c37758/32.png) [@will.zhao09](https://community.plotly.com/u/will.zhao09)
#### Post date: [July 10, 2019, 7:27pm UTC](https://community.plotly.com/t/cumulative-lines-animation-in-python/25707/1 "2019-07-10T19:27:30Z")

</div>

Hi all,

Does anyone know how to implement the [Cumulative Lines Animation](https://plot.ly/r/cumulative-animations/#cumulative-lines-animation) from the R library in Python?

I have tried to follow the Python [Intro to Animations](https://plot.ly/python/animations/#offline-mode) offline example, but the slider doesn’t seem to be responding to the play button, and moving the slider does not change the frame of the plot.

Also, does anyone know a solution to plotting missing data in such a graph? Some of my traces are shorter than others due to missing time points.

Any help would be greatly appreciated.  
Thank you,  
Will

---

<div class="post-metadata">

### Author: ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)
#### Post date: [July 12, 2019, 8:23pm UTC](https://community.plotly.com/t/cumulative-lines-animation-in-python/25707/2 "2019-07-12T20:23:54Z")

</div>

@will.zhao09

Here is an example to see how you can imitate the R animation, above.

```auto
import numpy as np
import pandas as pd
import plotly.graph_objects as go #plotly 4.0.0rc1

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
low = df['AAPL.Low'].tolist()
high = np.array(df['AAPL.High'])+20 # artificially added 20 to get the second graph above the first one

trace1 = go.Scatter(x=df.Date[:2],
                    y=low[:2],
                    mode='lines',
                    line=dict(width=1.5))

trace2 = go.Scatter(x = df.Date[:2],
                    y = high[:2],
                    mode='lines',
                    line=dict(width=1.5))

frames = [dict(data= [dict(type='scatter',
                           x=df.Date[:k+1],
                           y=low[:k+1]),
                      dict(type='scatter',
                           x=df.Date[:k+1],
                           y=high[:k+1])],
               traces= [0, 1], #this means that frames[k]['data'][0] updates trace1, and frames[k]['data'][1], trace2 
              )for k in range(1, len(low)-1)] 

layout = go.Layout(width=650,
                   height=400,
                   showlegend=False,
                   hovermode='closest',
                   updatemenus=[dict(type='buttons', showactive=False,
                                y=1.05,
                                x=1.15,
                                xanchor='right',
                                yanchor='top',
                                pad=dict(t=0, r=10),
                                buttons=[dict(label='Play',
                                              method='animate',
                                              args=[None, 
                                                    dict(frame=dict(duration=3, 
                                                                    redraw=False),
                                                         transition=dict(duration=0),
                                                         fromcurrent=True,
                                                         mode='immediate')])])])

layout.update(xaxis =dict(range=[df.Date[0], df.Date[len(df)-1]], autorange=False),
              yaxis =dict(range=[min(low)-0.5, high.max()+0.5], autorange=False));
fig = go.Figure(data=[trace1, trace2], frames=frames, layout=layout)
fig.show()

```

If you are interested in animating only a single line, then remove trace2 and `frames[k]['data'][1]`, i.e. the second data dict from each frame. In this case frames[k][‘traces’]=[0], because each frame updates the first trace (the unique one).

---

<div class="post-metadata">

### Author: ![khalido](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/khalido/32/4775_2.png) [@khalido](https://community.plotly.com/u/khalido)
#### Post date: [December 6, 2019, 2:55am UTC](https://community.plotly.com/t/cumulative-lines-animation-in-python/25707/3 "2019-12-06T02:55:38Z")

</div>

Is there a way to do this in plotly express?

px gets me almost all the way there, I just wish there was a way to specify `cumulative=True` in px - that would make it a breeze to show growing trend lines, or a animated scatter plot which hows how more points appear.

The current plotly express `animation_frame` stuff is designed to only show one frame at a time. The way described above works but is so much more verbose than plotly express that I really don’t want to use the old way of plotly anymore, only express!

Also, using frames like with this code, doesn’t this end up repeating the data for each frame essentially? Seems to produce very large outputs.

I just want to declare one data, then each animation image just uses a sliding range of frames to show the plot, e.g frame 10 shows `[1:10]` and frame 100 shows `[1:100]`

---

<div class="post-metadata">

### Author: ![haiming](https://avatars.discourse-cdn.com/v4/letter/h/e9bcb4/32.png) [@haiming](https://community.plotly.com/u/haiming)
#### Post date: [February 2, 2020, 4:16am UTC](https://community.plotly.com/t/cumulative-lines-animation-in-python/25707/4 "2020-02-02T04:16:46Z")

</div>

I don’t think express can cover your need right now. You have to define each frame as @empet mentioned.

---

<div class="post-metadata">

### Author: ![shinokada](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/shinokada/32/11360_2.png) [@shinokada](https://community.plotly.com/u/shinokada)
#### Post date: [June 16, 2020, 10:57am UTC](https://community.plotly.com/t/cumulative-lines-animation-in-python/25707/7 "2020-06-16T10:57:33Z")

</div>

What do I need to change to draw 3 lines?
