# Time animation graph
**URL:** https://community.plotly.com/t/time-animation-graph/39152
**Category:** đ Plotly Python
**Created:** [May 9, 2020, 5:14pm UTC](https://community.plotly.com/t/time-animation-graph/39152 "2020-05-09T17:14:55Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Ghita](https://community.plotly.com/u/Ghita)
#### Post date: [May 9, 2020, 5:14pm UTC](https://community.plotly.com/t/time-animation-graph/39152/1 "2020-05-09T17:14:55Z")
hello,
I am working with python, I have a time series dataset. My data contains 16 columns for distances as distance\_0 for segment 0 and distance\_1 for segment 1âŠ, time. I want to plot segment (x) and distance (y) with time animation
Is there a way to plot a graph with time animation, I tried plotly.express:
#Défénir le module pour le dessin des graphiques
def plot\_1(data,title\_typ):
```
a=px.scatter(data1, x="0", y="Dist_0", animation_frame="Time",size="Ampl_0", range_x=[-1,16], range_y=[-1,40])
b=px.scatter(data1, x="1", y="Dist_1", animation_frame="Time",size="Ampl_1", range_x=[-1,16], range_y=[-1,40])
c=px.scatter(data1, x="2", y="Dist_2", animation_frame="Time",size="Ampl_2", range_x=[-1,16], range_y=[-1,40])
d=px.scatter(data1, x="3", y="Dist_3", animation_frame="Time",size="Ampl_3", range_x=[-1,16], range_y=[-1,40])
e=px.scatter(data1, x="4", y="Dist_4", animation_frame="Time",size="Ampl_4", range_x=[-1,16], range_y=[-1,40])
f=px.scatter(data1, x="5", y="Dist_5", animation_frame="Time",size="Ampl_5", range_x=[-1,16], range_y=[-1,40])
g=px.scatter(data1, x="6", y="Dist_6", animation_frame="Time",size="Ampl_6", range_x=[-1,16], range_y=[-1,40])
h=px.scatter(data1, x="7", y="Dist_7", animation_frame="Time",size="Ampl_7", range_x=[-1,16], range_y=[-1,40])
i=px.scatter(data1, x="8", y="Dist_8", animation_frame="Time",size="Ampl_8", range_x=[-1,16], range_y=[-1,40])
j=px.scatter(data1, x="9", y="Dist_9", animation_frame="Time",size="Ampl_9", range_x=[-1,16], range_y=[-1,40])
k=px.scatter(data1, x="10", y="Dist_10", animation_frame="Time",size="Ampl_10", range_x=[-1,16], range_y=[-1,40])
l=px.scatter(data1, x="11", y="Dist_11", animation_frame="Time",size="Ampl_11", range_x=[-1,16], range_y=[-1,40])
m=px.scatter(data1, x="12", y="Dist_12", animation_frame="Time",size="Ampl_12", range_x=[-1,16], range_y=[-1,40])
n=px.scatter(data1, x="13", y="Dist_13", animation_frame="Time",size="Ampl_13", range_x=[-1,16], range_y=[-1,40])
o=px.scatter(data1, x="14", y="Dist_14", animation_frame="Time",size="Ampl_14", range_x=[-1,16], range_y=[-1,40])
p=px.scatter(data1, x="15", y="Dist_15", animation_frame="Time",size="Ampl_15", range_x=[-1,16], range_y=[-1,40])
data=[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p]
layout= dict(title=title_typ, xaxis=dict(title='Segment'),yaxis=dict(title='Distance (mĂštres)'))
fig= dict(data=data, layout=layout)
iplot(fig, filename=title_typ)
```
it gave me this error: ValueError:
Invalid element(s) received for the âsizeâ property of scatter.marker
Invalid elements include: [nan]
```
The 'size' property is a number and may be specified as:
- An int or float in the interval [0, inf]
- A tuple, list, or one-dimensional numpy array of the above
```
I tried with go\_scatter but i donât know how to add animation.
Thank you
---
### Author:  [@adamschroeder](https://community.plotly.com/u/adamschroeder)
#### Post date: [May 9, 2020, 5:27pm UTC](https://community.plotly.com/t/time-animation-graph/39152/2 "2020-05-09T17:27:16Z")
Bonjour @Ghita
Welcome to the Plotly community. Have you tried looking at the [animation documentation](https://plotly.com/python/animations/)?
Maybe you can use the plotly express line chart and itâs [animation parameters](https://plotly.com/python-api-reference/generated/plotly.express.line.html).
Try to build it that way, and if youâre not successful, we can try to help. Just make sure to share your code and date with us if possible.
Adam
---
### Author:  [@Ghita](https://community.plotly.com/u/Ghita)
#### Post date: [May 9, 2020, 5:47pm UTC](https://community.plotly.com/t/time-animation-graph/39152/3 "2020-05-09T17:47:28Z")
hey @adamschroeder
Thank you for your answer, yeah I started there, the problem is I donât have the same type of data. If I put this code just for one segment:
px.scatter(data1, x=â0â, y=âDist\_0â, animation\_frame=âTimeâ,size=âAmpl\_0â, size\_max=55, range\_x=[-1,16], range\_y=[-1,40])
Output:
which is good but I need to add all the point for all the segment and attach all the points in one timestamp with a line, But I canât find how to do it.
Itâ not working with plotly express line
---
### Author:  [@adamschroeder](https://community.plotly.com/u/adamschroeder)
#### Post date: [May 9, 2020, 6:11pm UTC](https://community.plotly.com/t/time-animation-graph/39152/4 "2020-05-09T18:11:44Z")
Can you share a portion of your data, so I can try to run this on my computer?
---
### Author:  [@Ghita](https://community.plotly.com/u/Ghita)
#### Post date: [May 9, 2020, 6:37pm UTC](https://community.plotly.com/t/time-animation-graph/39152/5 "2020-05-09T18:37:40Z")
| Time | Dist\_0 | Dist\_1 | Dist\_2 | Dist\_3 | Dist\_4 | Dist\_5 | Dist\_6 | Dist\_7 | Dist\_8 | Dist\_9 | Dist\_10 | Dist\_11 | Dist\_12 | Dist\_13 | Dist\_14 | Dist\_15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 120633 | 2.83 | 3.16 | 3.31 | -0.17 | 0.04 | 4.67 | 0.15 | 8.35 | 9.36 | 0.04 | 0.01 | 0.03 | 0.02 | 0 | 5.49 | 4.04 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 120953 | -0.16 | 3.16 | 3.31 | 3.72 | 0.04 | -0.13 | -0.15 | 8.05 | 0.05 | 0.04 | 12.31 | 12.29 | 12.28 | -0.01 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 121273 | 2.83 | 3.16 | 3.31 | -0.17 | 0.03 | -0.13 | 0.15 | 6.85 | 0.04 | 0.04 | 12.32 | 12.29 | 12.27 | 0 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 121592 | -0.16 | 3.16 | 3.3 | -0.17 | 0.04 | -0.13 | 0.15 | 6.85 | 0.04 | 0.03 | 12.32 | 12.29 | 12.27 | 0 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 121912 | -0.16 | 3.16 | 3.3 | -0.17 | 4.01 | -0.13 | 0.15 | 6.85 | 0.04 | 0.04 | 12.31 | 12.29 | 12.27 | 7.57 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 122232 | -0.16 | 3.16 | 3.31 | 3.72 | 0.04 | -0.13 | 0.15 | 7.2 | 9.36 | 0.04 | 12.32 | 12.29 | 12.28 | 0.01 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 122551 | 2.83 | 3.16 | 3.31 | -0.17 | 4.02 | -0.13 | 0.15 | 6.25 | 0.04 | 0.04 | 12.32 | 0.03 | 12.27 | 9.07 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 122871 | 2.83 | 3.16 | 3.31 | -0.17 | 0.03 | -0.13 | 0.15 | 0.04 | 0.04 | 0.04 | 12.32 | 12.29 | 12.28 | 7.57 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 123191 | -0.16 | 3.16 | 3.31 | -0.17 | 4.01 | -0.13 | 0.15 | 0.04 | 9.36 | 0.05 | 12.32 | 12.29 | 12.27 | 9.07 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 123510 | 2.83 | 3.16 | 3.3 | 3.72 | 0.03 | -0.13 | 0.15 | 8.35 | 0.04 | 0.05 | 12.32 | 12.29 | 12.28 | 0 | 0.09 | 0.15 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
this the dataset, I add 16 columns contains number of segments to present in x
Thank you for uour time
---
### Author:  [@adamschroeder](https://community.plotly.com/u/adamschroeder)
#### Post date: [May 9, 2020, 7:15pm UTC](https://community.plotly.com/t/time-animation-graph/39152/6 "2020-05-09T19:15:20Z")
Iâm not sure exactly how you would like to plot this data. What is your x\_axis and y\_axis. According to the data you shared, one of your axes wonât change. Is that what you want?
this code is for using two columns only:
```auto
fig = px.scatter(
data_frame=df,
x='two',
y='Dist_2',
animation_frame='Time',
)
```
If you want to plot all columns, you would need to use pandas.melt() so your data is [tidy](https://en.wikipedia.org/wiki/Tidy_data) for animations. Your data should end up looking like this:
| Time | districts (xaxis) | rates (yaxis) |
| --- | --- | --- |
| 120633 | 3.16 | 2 |
| 120953 | -0.17 | 3 |
| 121273 | 0.04 | 4 |
| 121592 | 4.67 | 5 |
---
### Author:  [@Ghita](https://community.plotly.com/u/Ghita)
#### Post date: [May 9, 2020, 8:50pm UTC](https://community.plotly.com/t/time-animation-graph/39152/7 "2020-05-09T20:50:19Z")
Hey,
Thank you for you answer, I want to plot something exactly like this (in the image from excel) but instead of showing all the (séries), we show one at time.
I am going to try to melt it, thank you for your idea
---
### Author:  [@Ghita](https://community.plotly.com/u/Ghita)
#### Post date: [May 10, 2020, 3:47pm UTC](https://community.plotly.com/t/time-animation-graph/39152/8 "2020-05-10T15:47:38Z")
Hey @adamschroeder
I melted my data and it worked, thank you for your help.