Plotlyグラフで選択された点の表示（Streamlitを使って）

Question

教えていただきたいのですが、
現在、Streamlitを使って、ある横断の表示をPlotlyにて行っているのですが、
Plotly自体に選択するモードがあり、選択自体はできるのですが、
選択した点の表示が上手くできません。（点の座標）

具体的には、横断を間引き前のデータ（線データとして表示）
間引き後のデータ（マーカ表示）
で、間引き後のデータを選択して、それを下に表として表示したいということです。

どうすればよいか、お分かりになる方がいれば、教えていただければと思います。

以下URLに記載されている方法が一番やりたいことに近いのですが、
それとの違いは、
1.点が１種類であること
2.VBOXHBOXがStreamlitでは動かないため、別の方法が必要。

https://plotly.com/python/v3/selection-events/

こちらで記載したソースは以下になります。
よろしくお願いいたします。

import plotly.graph_objs as go
import plotly.offline as py
import streamlit as st
import pandas as pd
import numpy as np
from ipywidgets import HBox, VBox

df = pd.read_excel('test_oudan_point.xlsx',sheet_name='before')

f = go.FigureWidget([
go.Scatter(y = df['Y'], x = df['X'], mode = 'markers')])
scatter = f.data[0]
scatter.marker.opacity = 1

Create a table FigureWidget that updates on selection from points in the scatter plot of f

t = go.FigureWidget([go.Table(
header=dict(values=['X','Y'],
fill = dict(color='#C2D4FF'),
align = ['left'] * 5),
cells=dict(values=[df[col] for col in ['X','Y']],
fill = dict(color='#F5F8FF'),
align = ['left'] * 5))])

def selection_fn(trace,points,selector):
t.data[0].cells.values = [df.loc[points.point_inds][col] for col in ['X','Y']]

scatter.on_selection(selection_fn)

Put everything together

VBox((HBox(),f,t))

st.plotly_chart(go.Figure(data=f),use_container_width=True)
st.plotly_chart(go.Figure(data=t),use_container_width=True)

Answer 1

こちらのissue(https://github.com/streamlit/streamlit/issues/455)のとおり、
そういうことをしたいというリクエストは前からあるけど、現時点では機能が実装されていない状況だと思われます。

こちらのライブラリ https://github.com/null-jones/streamlit-plotly-events は使えないでしょうか。

追加

ためしに作ってみました。(コメントをうけてコードを更新しました)

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import streamlit as st
from streamlit_plotly_events import plotly_events
import plotly.offline as offline

df = pd.DataFrame({'X': [1, 1, 2, 2, 3, 3], 'Y': [1, 3, 2, 3, 1, 2]})
df2 = pd.DataFrame({'X': [0, 0.5, 1, 1.5, 2, 2.5], 'Y': [1, 3, 2, 3, 1, 2]})

fig1 = px.scatter(df, x='X', y='Y')
fig1.update_layout(clickmode='select')
fig2 = px.line(df2,x='X', y='Y')

fig = go.Figure(data=fig1.data + fig2.data)

selected_points = plotly_events(fig, click_event=False, select_event=True)

df.iloc[[v['pointIndex'] for v in selected_points]]

もうちょっとやりたいことが複雑なら、
素直にdashを使った方がいいような気がします。

Comments

[Seven_Sea]

コメントありがとうございます。
教えていただいた、ライブラリを使ってみたのですが、
エラーで動かないようです。
やってみたのは、リンク先に記載されていたプログラムをそのままコピペしてみました。
エラー文は以下のようです。

DuplicateWidgetID: There are multiple identical st.streamlit_plotly_events.plotly_events widgets with the same generated key.

[bsdfan]

それは、書き方が3通りあるという例なので、使いたい一つを残して消すかコメントアウトしないといけないです。(同じグラフを使いまわしているというエラーだと思います)

[Seven_Sea]

ありがとうございます。
そう思いまして、1個だけ表示させたのですが、グラフ枠だけできて、何も表示されないようです。どうしたものかと、、、、、と思いまして。

[bsdfan]

なんか例がよろしくないですね、これ。1点だけのデータをpx.lineしてるので何も表示されていないです。px.scatterにすれば(1, 1)に点が出ます。

[Seven_Sea]

ちなみに、
pip install streamlit-plotly-events
を動作させただけです。

[Seven_Sea]

値はでたのですが、選択しても何も表示されないようです

[Seven_Sea]

何とか選択できたのですが、複数は難しいようです。

[Seven_Sea]

ありがとうございます。
恥を忍んでお聞きしたいのですが、
データフレームが２種類あり、片方をライン、片方をポイントにして、そのポイントを選択状態で表をだしたいのですが、、、。
面倒をおかけします。

import pandas as pd
import plotly.express as px
import streamlit as st
from streamlit_plotly_events import plotly_events
import plotly.offline as offline

df = pd.DataFrame({'X': [1, 1, 2, 2, 3, 3], 'Y': [1, 3, 2, 3, 1, 2]})
df2 = pd.DataFrame({'X': [12, 12, 213, 22, 32, 32], 'Y': [1, 3, 2, 3, 1, 2]})

# Select other Plotly events by specifying kwargs
fig = px.scatter(df, x='X', y='Y')
fig2 = px.line(df2,x='X', y='Y')
fig.update_layout(clickmode='select')
selected_points = plotly_events(fig, click_event=False, select_event=True)

df.iloc[[v['pointIndex'] for v in selected_points]]

[bsdfan]

あまり細かいところまで触ったことがないので、もっといい方法があるかもしれませんが、作ってみました。
streamlitはplotlyも表示できますが、plotlyの機能をちゃんと使いたいならdashを使うほうが苦労も少ないし、参考にできる資料も多いと思います。