如何从 Altair 中的选定数据中检索属性?
How to retrieve attributes from selected datum in Altair?
我有一个 Streamlit 仪表板,它让我可以使用 Altair 图交互式地探索 t-SNE 嵌入。我想弄清楚如何访问所选数据的元数据,以便我可以可视化相应的图像。换句话说,给定:
selector = alt.selection_single()
chart = (
alt.Chart(df)
.mark_circle()
.encode(x="tSNE_dim1", y="tSNE_dim2", color="predicted class", tooltip=["image url", "predicted class"])
.add_selection(selector)
)
...有没有类似于
的东西
selected_metadata = selector.tooltip
update_dashboard_img(img=selected_metadata["image url"], caption=selected_metadata["predicted class"])
我知道 但图片在 S3 上,而且图片太多,不适合情节。
不幸的是,Altair 不提供任何将信息从 javascript 渲染传递回 Python 内核的机制,因此通常无法执行您想要执行的操作。
(编辑:如果您使用他们的平台,streamlit 似乎有一个解决方案,但我不知道有任何普遍适用的解决方案)。
我讨厌不同意 Altair 的创造者,但我能够使用 streamlit-vega-lite package 实现这一点。这通过使用 altair_component()
:
包装对图表创建函数的调用来实现
from streamlit_vega_lite import altair_component
...
event_dict = altair_component(altair_chart=create_tsne_chart(tsne_df))
# note: works with selector = alt.selection_interval(), not selection_single()
dim1_bounds, dim2_bounds = event_dict.get("dim1"), event_dict.get("dim2")
if dim1_bounds:
(dim1_min, dim1_max), (dim2_min, dim2_max) = dim1_bounds, dim2_bounds
selected_images = tsne_df[
(tsne_df.dim1 >= dim1_min)
& (tsne_df.dim1 <= dim1_max)
& (tsne_df.dim2 >= dim2_min)
& (tsne_df.dim2 <= dim2_max)
]
st.write("Selected Images")
st.write(selected_images)
if len(selected_images) > 0:
for _index, row in selected_images.iterrows():
img = get_img(row["image url"])
st.image(img, caption=f"{row['image url']} {row['predicted class']}", use_column_width=True)
event_dict
仅包含有关 selector
范围的信息。因此,您必须使用这些值来重新选择在交互式图表中选择的数据。
请注意,这个包是一个 POC,有各种限制。请为 streamlit_vega_lite
的作者创建的 Streamlit feature request 点赞。
当 0.13 版本发布时,Panel 也可以监听 Vega 事件。有关详细信息,请参阅 https://github.com/holoviz/panel/pull/2592。
我有一个 Streamlit 仪表板,它让我可以使用 Altair 图交互式地探索 t-SNE 嵌入。我想弄清楚如何访问所选数据的元数据,以便我可以可视化相应的图像。换句话说,给定:
selector = alt.selection_single()
chart = (
alt.Chart(df)
.mark_circle()
.encode(x="tSNE_dim1", y="tSNE_dim2", color="predicted class", tooltip=["image url", "predicted class"])
.add_selection(selector)
)
...有没有类似于
的东西selected_metadata = selector.tooltip
update_dashboard_img(img=selected_metadata["image url"], caption=selected_metadata["predicted class"])
我知道
不幸的是,Altair 不提供任何将信息从 javascript 渲染传递回 Python 内核的机制,因此通常无法执行您想要执行的操作。
(编辑:如果您使用他们的平台,streamlit 似乎有一个解决方案,但我不知道有任何普遍适用的解决方案)。
我讨厌不同意 Altair 的创造者,但我能够使用 streamlit-vega-lite package 实现这一点。这通过使用 altair_component()
:
from streamlit_vega_lite import altair_component
...
event_dict = altair_component(altair_chart=create_tsne_chart(tsne_df))
# note: works with selector = alt.selection_interval(), not selection_single()
dim1_bounds, dim2_bounds = event_dict.get("dim1"), event_dict.get("dim2")
if dim1_bounds:
(dim1_min, dim1_max), (dim2_min, dim2_max) = dim1_bounds, dim2_bounds
selected_images = tsne_df[
(tsne_df.dim1 >= dim1_min)
& (tsne_df.dim1 <= dim1_max)
& (tsne_df.dim2 >= dim2_min)
& (tsne_df.dim2 <= dim2_max)
]
st.write("Selected Images")
st.write(selected_images)
if len(selected_images) > 0:
for _index, row in selected_images.iterrows():
img = get_img(row["image url"])
st.image(img, caption=f"{row['image url']} {row['predicted class']}", use_column_width=True)
event_dict
仅包含有关 selector
范围的信息。因此,您必须使用这些值来重新选择在交互式图表中选择的数据。
请注意,这个包是一个 POC,有各种限制。请为 streamlit_vega_lite
的作者创建的 Streamlit feature request 点赞。
当 0.13 版本发布时,Panel 也可以监听 Vega 事件。有关详细信息,请参阅 https://github.com/holoviz/panel/pull/2592。