Altair：在 LayerChart 中应用选择和 ~selection

Question

The use case here is to analyze the results of clustering; We'd like to choose a cluster and a feature (so two dropdowns), and display a layered histogram that shows the distribution of "feature" for points in "cluster", layered with the distribution of "feature" for points outside "cluster." The additional constraint is we need standalone HTML, so we can't use anything requiring a python kernel.

After also exploring plotly and bokeh , Altair gave me the closest solution (below).

Input data is like this:

import pandas as pd
import numpy as np
import altair as alt

df = pd.DataFrame({"cluster": np.random.choice([1, 2], size=100)})  # cluster labels
df["feature1"] = np.random.normal(loc=1, scale=0.7, size=100) + df["cluster"]  # a feature column
df["feature2"] = np.random.normal(loc=10, scale=1, size=100) - 3*df["cluster"]  # a second feature column

   cluster  feature1  feature2
0        2       3.4       4.5
1        2       2.4       3.9
2        1       1.6       5.7
3        1       1.6       5.7
4        2       3.3       4.5

Which I have first melted to:

dfm = pd.melt(df.set_index('cluster', drop=True), ignore_index=False, var_name='feature')
dfm.reset_index(inplace=True)  # Get cluster labels as a column again

   cluster   feature  value
0        2  feature1    3.4
1        2  feature1    2.4
2        1  feature1    1.6
3        1  feature1    1.6
4        2  feature1    3.3

I have code working except that I have to use VConcatChart rather than LayerChart because with the cluster selection I need to apply selection to one histogram (points in the cluster) and ~selection to the other (points outside the cluster).

input_dropdown = alt.binding_select(options=[1,2], name='cluster  ')
selection = alt.selection_single(fields=['cluster'], bind=input_dropdown, name='filter_cluster', init={'cluster': 1})
input_dropdown2 = alt.binding_select(options=['feature1', 'feature2'], name='feature  ')
selection2 = alt.selection_single(fields=['feature'], bind=input_dropdown2, name='filter_feature', init={'feature': 'feature1'})

x_domain = alt.selection_interval(bind='scales', encodings=['x'])

hist1 = alt.Chart(dfm).transform_filter(
    selection & selection2
).transform_joinaggregate(  # to achieve normed histogram
    total='count(*)'
).transform_calculate(  # to achieve normed histogram
    pct='1 / datum.total'
).mark_bar(
    opacity=0.3, interpolate='step', color='green'
).encode(
    alt.X('value:Q', bin=alt.BinParams(maxbins=50), title="feature value", axis=None),
    alt.Y('sum(pct):Q', title="frequency"),
)

hist2 = alt.Chart(dfm).transform_filter(
    ~selection & selection2
).transform_joinaggregate(  # to achieve normed histogram
    total='count(*)'
).transform_calculate(  # to achieve normed histogram
    pct='1 / datum.total'
).mark_bar(
    opacity=0.3, interpolate='step', color='black'
).encode(
    alt.X('value:Q', bin=alt.BinParams(maxbins=50), title="feature value"),
    alt.Y('sum(pct):Q', title="frequency")
)

conc = alt.vconcat(
    hist1,
    hist2
).add_selection(
    selection
).add_selection(
    selection2
).configure_concat(
    spacing=0
).add_selection(
    x_domain
).resolve_scale(
    x='shared'
)

conc

Here is an image of the resulting viz, not the interactive form.

Is there any way to achieve this but where the two histograms are layered?

Answer 1

As per the comments, the solution was to replace alt.vconcat with alt.layer .