Altair图表点击散点弹出含term_ID、谷歌搜索链接等关联信息的实现咨询

你可以通过Altair的选择交互能力实现需求，以下是修改后的可运行代码：

import altair as alt
import pandas as pd
from urllib.parse import urlencode

def make_google_query(name):
    return "https://www.google.com/search?" + urlencode({'q': '"{0}"'.format(name)})

data = [
    ["GO:0005874","microtubule", 0.590923058896654, -4.00372136407618, 3.93380303408685, 5.07433362293908, 0.743307611944267, 0],
    ["GO:0042555","MCM complex",0.0516392267501353,5.29409032883786,-0.438484234906433,4.01582063426207,0.736867388621876,0],
    ["GO:0005886","plasma membrane",15.5064680247866,-2.59930578712986,-4.79438349762051,6.49331205332051,0.980465972776413,4.124E-05],
    ["GO:0030173","integral component of Golgi membrane",0.0482779463204013,-0.0820996416106789,6.61844221537962,3.98659260682221,0.720783016873817,0.16417986],
    ["GO:0031083","BLOC-1 complex",0.0157955281823943,6.03044083325888,2.61728943021364,3.50147007210041,0.638408624494431,0.22740185],
    ["GO:0030532","small nuclear ribonucleoprotein complex",0.138166054523554,2.1939043417736,2.03060434260059,4.44321603416583,0.571526896999077,0.2622474],
    ["GO:0008250","oligosaccharyltransferase complex",0.0394539627330108,2.22238070210506,4.52148800747906,3.89894446686651,0.602647357590838,0.39260902]
]

columns = ["term_ID","description","frequency","plot_X","plot_Y","log_size","uniqueness","dispensability"]

df = pd.DataFrame(data, columns=columns)
df['url'] = df['term_ID'].apply(make_google_query)

# 新增点击选择器
click_selector = alt.selection_single(
    fields=['term_ID', 'url'],
    on='click',
    empty='none',
    clear='dblclick' # 双击清空选中状态
)

base = alt.Chart(df).mark_point(
    filled=True, 
    fillOpacity=0.5,
    cursor='pointer' # 鼠标悬浮显示指针样式，提示可点击
).encode(
    y=alt.Y('plot_Y', title="Semantic Space Y"),
    x=alt.X('plot_X', title="Semantic Space X"),
    size=alt.Size('log_size', scale=alt.Scale(base=0, domain=[3.5,6], range=[1000, 7000])),
    color=alt.Color('uniqueness', scale=alt.Scale(scheme='viridis')),
    href=alt.Href('url:N'), # 关联搜索链接
    tooltip=[
             alt.Tooltip("description"), 
             alt.Tooltip("term_ID"),
             alt.Tooltip("frequency"),
             alt.Tooltip("log_size"), 
             alt.Tooltip("uniqueness"),
             alt.Tooltip("dispensability")]
).add_params(click_selector) # 绑定点击选择器

text = alt.Chart(df).mark_text(
).encode(
    y=alt.Y('plot_Y', title="Semantic Space Y"),
    x=alt.X('plot_X', title="Semantic Space X"),
    color=alt.Color('uniqueness', scale=alt.Scale(scheme='viridis')),
    text="description"
)

# 新增点击后显示的term_ID弹窗层
popup_term = base.mark_text(
    align='left',
    baseline='bottom',
    dx=15,
    dy=-10,
    fontSize=13,
    fontWeight='bold',
    fill='black'
).encode(
    text='term_ID:N',
    opacity=alt.condition(click_selector, alt.value(1), alt.value(0))
)

# 弹窗背景层，可选，让文本更清晰
popup_bg = base.mark_rect(
    fill='white',
    stroke='gray',
    strokeWidth=1,
    padding=4
).encode(
    x=alt.X('plot_X:Q', scale=alt.Scale(zero=False)),
    y=alt.Y('plot_Y:Q', scale=alt.Scale(zero=False)),
    xOffset=10,
    yOffset=-25,
    width=alt.value(120),
    height=alt.value(25),
    opacity=alt.condition(click_selector, alt.value(0.9), alt.value(0))
)

# 组合所有图层
(popup_bg + popup_term + base + text ).properties(
    title="plot",
    height=600,
    width=800
).interactive()

实现效果说明 #

• 原悬停tooltip功能保留，新增term_ID展示
• 点击任意点位后，点位右侧会弹出带灰色边框的白色提示框，显示对应点位的term_ID
• 点击点位会自动跳转到该term_ID的搜索页面，浏览器会在新标签页打开搜索结果
• 双击图表任意位置即可清空弹窗显示

注意事项 #

• 导出为HTML文件后所有功能可正常使用
• Jupyter环境下使用时，需要允许浏览器弹出新标签页

内容的提问来源于stack exchange，提问作者AlexandrosArmaos