How can i animate every frame from scratch using px

📊 Plotly Python
1

I want to animate lines of different number in each frame.
Please refer to the code. the data has 3 frame divided by “ts”. The 1st and 3rd frame have 2 lines. The 2nd frame has 1 line only.
But the final figure shows that, the 2nd picture has two lines.

import plotly
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
df2 = pd.DataFrame(
    np.array([
        [0, 0, 0, 1],
        [0, 0, 1, 2],
        [0, 1, 1, 0],
        [0, 1, 2, 1],

        [1, 0, 2, 1],
        [1, 0, 3, 2],

        [2, 0, 2, 3],
        [2, 0, 3, 4],
        [2, 1, 3, 2],
        [2, 1, 4, 3],
    ]),
    columns=["ts", "id", "x", "y"]
)
fig2 = px.line(df2,
              x="x",
              y="y",
              animation_frame="ts",
                animation_group="id",
                line_group="id",
)

fig2

Selection_201
Selection_2011383×528 11.2 KB

The 2nd picture has two lines(two lines with one head as the others tail ). I hope keep line segment [2, 1] to [3, 2] only.
What is the best way to solve my problem?

3

I do appreciate if anyone cloud help. I have struggle with this for a few days

4

Hello @pooluut,

Welcome to the community!

Sorry no one has responded until now. I am sort of confused as to what you are trying to accomplish here. According to the data that you are passing it does look like there is only supposed to be 1 line on the 2nd frame of the animation.

Could you draw on the image of what you are trying to accomplish? This might give us a direction in which to help you.

2 Likes
5

@jinnyzor thank you for your replay.
Sorry for not making it clear.
I added markers=True to px.line and redraw the 2nd frame

image
image1154×419 20.4 KB

since the 2nd frame data is

     "ts", "id", "x", "y"
        [1, 0, 2, 1],
        [1, 0, 3, 2],

I hope to keep the line in the red circle only. This is what I mean animating every frame from an empty figure instead of updating the last trace.

6

another example here.

import plotly
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
df2 = pd.DataFrame(
    np.array([
        [0, 0, 0, 1],
        [0, 0, 1, 2],
        [0, 1, 1, 0],
        [0, 1, 2, 1],

        [1, 0, 3, 1],
        [1, 0, 2, 2],

        [2, 0, 2, 3],
        [2, 0, 3, 4],
        [2, 1, 3, 2],
        [2, 1, 4, 3],
    ]),
    columns=["ts", "id", "x", "y"]
)
fig2 = px.line(df2,
              x="x",
              y="y",
              animation_frame="ts",
                animation_group="id",
                line_group="id",
               markers=True,
)
fig2

image
image1235×408 17.4 KB

In the 2nd frame, the line in red circle is only line I want to have.