Time animation graph

📊 Plotly Python
1

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

image
image962×305 6.55 KB

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

2

Bonjour @Ghita
Welcome to the Plotly community. Have you tried looking at the animation documentation?
Maybe you can use the plotly express line chart and it’s animation parameters.

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

3

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:

image
image858×525 12.2 KB

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

4

Can you share a portion of your data, so I can try to run this on my computer?

5
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

6

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:

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 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
7

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.

image
image962×305 38 KB

I am going to try to melt it, thank you for your idea

8

Hey @adamschroeder

I melted my data and it worked, thank you for your help.

1 Like