如何在動畫散點圖中有多個數據框？

Question

我試圖在動畫散點圖上顯示 3 組 X/Y 坐標，其中動畫關鍵是時間。 目前我的解決方法是將所有坐標集添加到同一個數據框中，但是我相信這會導致我出現問題，因為我需要更改標記屬性以輕松區分每個點。

這是我的解決方法的樣子：

這就是我生成圖表的方式：

x1_trim += x2_trim
x1_trim += x3_trim
y1_trim += y2_trim
y1_trim += y3_trim

d = {
    "x1": x1_trim,
    "y1": y1_trim,
    "time": time_trim
}
df = pd.DataFrame(d)

#Default x and y axis
x_range = [-1,1]
y_range = [-1,1]

fig = px.scatter(df, x="x1", y="y1", animation_frame="time", range_x=x_range, range_y=y_range)
fig.add_shape(type="rect",x0=-0.5, y0=-0.5, x1=0.5, y1=0.5, line=dict(color="Green",width=2))

正如您所看到的，我將 x2/y2 和 x3/y3 數據添加到 x1/y1 列表的末尾，我如何將它們分開，同時仍然擁有我的動畫情節的所有信息？ 我試圖在同一個圖上顯示多個散點圖，但從未設法讓它工作。

我的解決方案嘗試：

#Building the dataframe and drawing graph
d1 = {
    "x": x1_trim,
    "y": y1_trim,
    "time": time_trim
}

d2 = {
    "x": x2_trim,
    "y": y2_trim,
    "time":time_trim
}

d3 = {
    "x": x3_trim,
    "y": y3_trim,
    "time": time_trim
}

dfs = {"d1": d1, "d2": d2, "d3": d3}

fig = go.Figure()

for i in dfs:
   fig = fig.add_trace(go.Scatter(x = dfs[i]["x"], y = dfs[i]["y"], name = i, animation_frame=dfs[0]["time"] ))

Answer 1

• 這可以在單個數據框中非常簡單地完成
  1. x和y是浮點值
  2. 動畫幀時間的時間字符串表示
  3. 對應於x1/y1 、 x2/y2等的x/y對的跟蹤字符串表示
• 使用Plotly Express非常簡單
• 已包含示例數據以顯示此結構是多么簡單

import numpy as np
import itertools
import pandas as pd
import plotly.express as px

# construct a dataframe that has four columns, x, y, trace: 0,1,2 as string for trace, time for animation frame
df = pd.DataFrame(np.random.uniform(1, 5, [288, 2]), columns=["x", "y"]).join(
    pd.DataFrame(
        itertools.product(
            pd.Series(
                pd.date_range("1-jan-2021", freq="1H", periods=24 * 4)
            ).dt.time.astype(str),
            range(3),
        ),
        columns=["time", "trace"],
    ).astype(str)
)

px.scatter(df, x="x", y="y", color="trace", animation_frame="time")

數據幀結構

x        float64
y        float64
time      object
trace     object
dtype: object

樣本數據

	X	是	時間	痕跡
0	4.95457	3.05693	00:00:00	0
1	1.15786	4.26341	00:00:00	1
2	3.68335	2.17825	00:00:00	2
3	3.81562	1.07493	01:00:00	0
4	2.51045	4.05217	01:00:00	1
5	4.2371	1.56905	01:00:00	2
6	3.65818	2.86946	02:00:00	0
7	2.77106	1.3854	02:00:00	1
8	2.71255	1.95146	02:00:00	2
9	3.34112	1.54918	03:00:00	0
10	1.47211	3.73609	03:00:00	1
11	3.55768	1.87527	03:00:00	2
12	4.30915	2.36513	04:00:00	0
13	2.08716	4.63832	04:00:00	1
14	3.37173	2.83171	04:00:00	2
15	4.48062	3.20688	05:00:00	0
16	4.62014	3.90006	05:00:00	1
17	2.42607	4.85346	05:00:00	2
18	3.82512	1.6588	06:00:00	0
19	4.88126	2.52358	06:00:00	1