Is it possible to link a JupyterChart selection as a filter in a Chart?

[dhruv-acog]

Here is some code to give an idea of the problem that I am facing:

def on_select(change):
    sel = change.new.value
    final = {}
    for s in sel:
        for k,v in s.items():
            if k in final.keys():
                final[k].append(v)
            else:
                final[k] = [v]
    keys = list(final.keys())
    sub_df = df1[df1[keys[0]].isin(final[keys[0]]) & df1[keys[1]].isin(final[keys[1]])]
    with out:
        print(sub_df)

y_value = 'amine'
x_value = 'halide'
metric = 'yield'

selection_final = alt.selection_multi(fields=[x_value, y_value], name="points")

grouped_data = df1.groupby([x_value, y_value]).agg(
            Reaction_Count=pd.NamedAgg(column=metric, aggfunc='size'),
            final_value=pd.NamedAgg(column=metric, aggfunc='max')
        ).reset_index()

scatter_plot = alt.Chart(grouped_data).mark_circle().encode(
        x=alt.X(f'{x_value}:N', axis=alt.Axis(title=x_value.replace('_', ' ').title(), labelAngle=-45)),
        y=alt.X(f'{y_value}:N', axis=alt.Axis(title=y_value.replace('_', ' ').title())),
        tooltip=[
            alt.Tooltip('Reaction_Count:Q', title='Reaction Count'),
            alt.Tooltip('final_value:Q', title=f'max {metric.title()}')
        ],
        size=alt.Size('Reaction_Count:Q', scale=alt.Scale(range=[0, 2000]), legend=None),
        color=alt.condition(
            selection_final,
            alt.Color('final_value:Q', scale=alt.Scale(scheme='viridis', domain=[0, 100]), title=f'max {metric.title()}', 
                      legend=alt.Legend(
                          orient='left',
                          direction='vertical',
                          titleAnchor='middle',
                          gradientLength=600,
                      )
                     ),
#             alt.Color('final_value:Q', scale=alt.Scale(scheme='viridis'), title=f'{metric_type.title()} {metric.title()}'),
            alt.value('lightgray'))
    ).add_params(selection_final).properties(
        width=500, height=600
    )
    
scatter_plot = alt.JupyterChart(scatter_plot)
scatter_plot.selections.observe(on_select, ["points"])

yield_dist_plot = alt.Chart(df1).mark_bar().encode(
            x=alt.X(f"{metric}:Q", bin=alt.Bin(maxbins=10, step=10), scale=alt.Scale(domain=[0, 100]), axis=alt.Axis(title=metric.replace('_', ' ').title())),
            y=alt.Y('count()', axis=alt.Axis(title='Number of Reactions')),
            tooltip='count()'
        ).transform_filter(selection_final).properties(
            width=500, height=300
        )

yield_box_plot = alt.Chart(df1).mark_boxplot(size=100).encode(
        alt.X(f"{metric}:Q", scale=alt.Scale(domain=[0, 100]), axis=alt.Axis(labels=False, ticks=False, title=None))
    ).properties(
        width=500, height=300
    ).transform_filter(selection_final)
        
out = widgets.Output()

display(scatter_plot)
display(yield_box_plot)
display(yield_dist_plot)
display(out)

Error message for yield_box_plot and yield_dist_plot

---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
File /opt/conda/lib/python3.9/site-packages/IPython/core/formatters.py:974, in MimeBundleFormatter.__call__(self, obj, include, exclude)
    971     method = get_real_method(obj, self.print_method)
    973     if method is not None:
--> 974         return method(include=include, exclude=exclude)
    975     return None
    976 else:

File /opt/conda/lib/python3.9/site-packages/altair/vegalite/v5/api.py:2315, in TopLevelMixin._repr_mimebundle_(self, include, exclude)
   2313     return {}
   2314 else:
-> 2315     return renderers.get()(dct)

File /opt/conda/lib/python3.9/site-packages/altair/utils/display.py:213, in HTMLRenderer.__call__(self, spec, **metadata)
    211 kwargs = self.kwargs.copy()
    212 kwargs.update(metadata)
--> 213 return spec_to_mimebundle(
    214     spec, format="html", output_div=self.output_div, **kwargs
    215 )

File /opt/conda/lib/python3.9/site-packages/altair/utils/mimebundle.py:56, in spec_to_mimebundle(spec, format, mode, vega_version, vegaembed_version, vegalite_version, engine, **kwargs)
     53     raise ValueError("mode must be 'vega-lite'")
     55 if using_vegafusion():
---> 56     spec = compile_with_vegafusion(spec)
     57     mode = "vega"
     59 if format in ["png", "svg", "pdf", "vega"]:

File /opt/conda/lib/python3.9/site-packages/altair/utils/_vegafusion_data.py:163, in compile_with_vegafusion(vegalite_spec)
    161 # Pre-evaluate transforms in vega spec with vegafusion
    162 row_limit = data_transformers.options.get("max_rows", None)
--> 163 transformed_vega_spec, warnings = vf.runtime.pre_transform_spec(
    164     vega_spec,
    165     vf.get_local_tz(),
    166     inline_datasets=inline_tables,
    167     row_limit=row_limit,
    168 )
    170 # Check from row limit warning and convert to MaxRowsError
    171 for warning in warnings:

File /opt/conda/lib/python3.9/site-packages/vegafusion/runtime.py:307, in VegaFusionRuntime.pre_transform_spec(self, spec, local_tz, default_input_tz, row_limit, preserve_interactivity, inline_datasets, keep_signals, keep_datasets, data_encoding_threshold, data_encoding_format)
    305 try:
    306     if data_encoding_threshold is None:
--> 307         new_spec, warnings = self.embedded_runtime.pre_transform_spec(
    308             spec,
    309             local_tz=local_tz,
    310             default_input_tz=default_input_tz,
    311             row_limit=row_limit,
    312             preserve_interactivity=preserve_interactivity,
    313             inline_datasets=imported_inline_dataset,
    314             keep_signals=keep_signals,
    315             keep_datasets=keep_datasets,
    316         )
    317     else:
    318         # Use pre_transform_extract to extract large datasets
    319         new_spec, datasets, warnings = self.embedded_runtime.pre_transform_extract(
    320             spec,
    321             local_tz=local_tz,
   (...)
    328             keep_datasets=keep_datasets,
    329         )

ValueError: Internal error: Failed to resolve variable Variable { name: "points", namespace: Signal } used in scope []


alt.Chart(...)

[jonmmease]

Hi @dhruv-acog,

The problem is thatyield_dist_plot contains a reference to selection_final, but selection final is added (with add_params) to scatter_plot. In order to use a selection across charts they would need to be combined into a single Altair chart using concatenation.

Instead of:

display(scatter_plot)
display(yield_box_plot)
display(yield_dist_plot)

try:

display(alt.vconcat(scatter_plot, yield_box_plot, yield_dist_plot))

[dhruv-acog]

Hi @jonmmease

Seems like I can only concatenate Chart objects using vconcat. Got this error while trying your solution:
ValueError: Only chart objects can be used in VConcatChart.

Also, checked data types of all plots:

type(scatter_plot), type(yield_box_plot), type(yield_dist_plot)

Output:

(altair.jupyter.jupyter_chart.JupyterChart,
 altair.vegalite.v5.api.Chart,
 altair.vegalite.v5.api.Chart)

[jonmmease]

Oh, right. You'll need to concatenate the alt.Chart objects before wrapping the result of the concatenation in a JupyterChart.

[dhruv-acog]

The dataframe is printing now but faced another issue:

The dataframe only gets updated according to the first selections. So, basically, when I reset the plot (by double-clicking on it) after the first selection, the next selections no longer update the dataframe.

[dhruv-acog]

Oh, sorry, nevermind that was a bug in my code. Thanks for the help and quick responses @jonmmease !