Altair 中的交互式繪圖選擇不突出顯示點

Question

我試圖在 Altair 中生成 2 個共享相同selection 。

我想繪制人口（y）與年齡（x）的散點圖和條形圖。 我正在使用 Altair 內置數據集population 。 人口是此數據集中people列的總和。 數據集包含year 、 people 、 age和sex 。 我可以使用sum(people)獲得總人口並將其繪制為y與age 。 對於條形圖，我可以使用sex列繪制類似的sum(people)與年齡和顏色的sex 。

我試圖在這兩個圖之間設置畫筆/選擇，以便我可以在散點圖中突出顯示，同時更新條形圖以反映該選擇。 但是，我遇到了以下問題

我正在使用 Altair 文檔中的分層條形圖示例作為示例。

這是代碼

import altair as alt
from altair.expr import datum, if_
from vega_datasets import data
interval = alt.selection_interval(encodings=['x', 'y'])

df = data.population.url

scatter = alt.Chart(df).mark_point().encode(
    alt.X('age:O', axis=alt.Axis(title='')),
    y='sum(people)',
    color=alt.condition(interval, 'sex:N', alt.value('lightgrey'))
).transform_filter(
    filter = datum.year == 2000
).transform_calculate(
    "sex", if_(datum.sex == 2, 'Female', 'Male')
).properties(
    selection=interval
)

bar = alt.Chart(df).mark_bar(opacity=0.7).encode(
    alt.X('age:O', scale=alt.Scale(rangeStep=17)),
    alt.Y('sum(people)', stack=None),
    color=alt.condition(interval, 'sex:N', alt.value('lightgrey')),
).transform_filter(
    filter = datum.year == 2000
).transform_calculate(
    "sex", if_(datum.sex == 2, 'Female', 'Male')
).properties(height=100, width=400)

scatter & bar

我修改了文檔示例中的代碼。 我首先創建一個散點圖，然后根據selection使用顏色。 然后我定義了一個相同的 2 列的條形圖，並再次使用selection來指定顏色。 這是輸出

現在，我想在頂部（散點）圖上拖動一個框以選擇一些點，同時底部（條形）圖應根據selection更新。 當我拖入頂部圖進行selection ，會發生這種情況

問題

1. 拖動以在頂部繪圖中進行選擇后，兩個繪圖中的顏色（選擇內部和外部）都更改為lightgrey 。 我預計，在兩個圖中，選擇/畫筆內部會被高亮顯示，但外部應該是lightgrey 。

如何獲得同時在頂部和底部圖中突出顯示的選擇？

編輯

我想要這種行為，其中一個圖中的畫筆/選擇同時在第二個（鏈接）圖中突出顯示。

包版本：

Python = 3.6
Altair = 2.2
Jupyter = 5.6

Answer 1

要觸發對聚合值的選擇，最好的方法是使用聚合轉換來定義該數量，以便它可用於整個圖表。

下面是一個例子：

import altair as alt
from altair.expr import datum, if_
from vega_datasets import data

interval = alt.selection_interval(encodings=['x', 'y'])


base = alt.Chart(data.population.url).transform_filter(
    filter = datum.year == 2000
).transform_calculate(
    "sex", if_(datum.sex == 2, 'Female', 'Male')
).transform_aggregate(
    population="sum(people)",
    groupby=['age', 'sex']
)

scatter = base.mark_point().encode(
    alt.X('age:O', title=''),
    y='population:Q',
    color=alt.condition(interval, 'sex:N', alt.value('lightgrey'))
).properties(
    selection=interval
)

bar = base.mark_bar(opacity=0.7).encode(
    alt.X('age:O', scale=alt.Scale(rangeStep=17)),
    alt.Y('population:Q'),
    color=alt.condition(interval, 'sex:N', alt.value('lightgrey')),
).properties(height=100, width=400)

scatter & bar

請注意，我通過下圖中的區間選擇取消了過濾，因為這不是您描述的行為。

Answer 2

基於（並改編）上面@jakevdp 的答案，我嘗試了與文檔庫的交互式圖表部分中的此示例類似的內容。

我沒有使用base對象，而是使用了vconcat函數，該函數連接Chart實例並將變換和數據傳遞給vconcat對象。 這是方法

import altair as alt
from altair.expr import datum, if_
from vega_datasets import data
interval = alt.selection_interval(encodings=['x', 'y'])

scatter = alt.Chart().mark_point().encode(
    alt.X('age:O', title=''),
    y='population:Q',
    color=alt.condition(interval, 'sex:N', alt.value('lightgrey'))
).properties(
    selection=interval
)

bar = alt.Chart().mark_bar(opacity=0.7).encode(
    alt.X('age:O', scale=alt.Scale(rangeStep=17)),
    alt.Y('population:Q'),
    color=alt.condition(interval, 'sex:N', alt.value('lightgrey')),
).properties(height=100, width=400)

alt.vconcat(scatter, bar,
    data=data.population.url
).transform_filter(
    filter = datum.year == 2000
).transform_calculate(
    "sex", if_(datum.sex == 2, 'Female', 'Male')
).transform_aggregate(
    population="sum(people)",
    groupby=['age', 'sex']
)

這種方法似乎提供與@jakevdp 的答案相同的功能。即可以對散點圖（頂部）圖進行選擇，這將根據需要反映在條形圖（底部）中。