Drill/Slice Multiple Charts in Streamlit Altair

[levinaanora]

Hi guys, currently I create an interactive dashboard using altair chart and I want to make a filtering between charts. From any references that I found is to use the selection points, add params, and transform filter. From all references that I found in the internet, the charts filter works fine if we combine the charts into one. But I don't want to combine, just want to create separate columns because I need the full screen function for each chart. Here is the code. This code will produce an error like "Unrecognize signal params". Does anyone have any solution for this?

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

df = pd.DataFrame({
    'Category': ['A', 'A', 'B', 'B', 'C', 'C'],
    'Country': ['Indonesia', 'Korea', 'China', 'Indonesia', 'Japan', 'Korea'],
    'Gender': ['Male', 'Female', 'Female', 'Male', 'Male', 'Female'],
    'X': [1, 2, 3, 4, 5, 6],
    'Y': [10, 11, 8, 9, 6, 7]
})

st.title('Cross-Filtering Example with Altair')

category_select = alt.selection_point(fields=['Category'], clear=True)
country_select = alt.selection_point(fields=['Country'], clear=True)
gender_select = alt.selection_point(fields=['Gender'], clear=True)

# Create two columns for the charts
col1, col2, col3 = st.columns(3)

# Create an initial scatter plot in the first column
with col1:
    chart1 = alt.Chart(df).mark_bar().encode(
        x='Country',
        y='X',
        color='Category',
        tooltip=['Category', 'X', 'Y'],
        opacity=alt.condition(country_select, alt.value(1), alt.value(0.25))
    ).add_params(country_select).transform_filter(gender_select).properties(width=400, height=700)
    col1.altair_chart(chart1, use_container_width=True)

with col2:
    chart2 = alt.Chart(df).mark_bar().encode(
        x='Gender',
        y='X',
        color='Category',
        tooltip=['Category', 'X', 'Y'],
        opacity=alt.condition(gender_select, alt.value(1), alt.value(0.25))
    ).add_params(gender_select).transform_filter(country_select).properties(width=400, height=300)
    col2.altair_chart(chart2, use_container_width=True)

    chart3 = alt.Chart(df).mark_bar().encode(
        x='Gender',
        y='Y',
        color='Category',
        tooltip=['Category', 'X', 'Y'],
        opacity=alt.condition(gender_select, alt.value(1), alt.value(0.25))
    ).add_params(gender_select).transform_filter(country_select).properties(width=400, height=300)
    col2.altair_chart(chart3, use_container_width=True)

with col3:
    chart4 = alt.Chart(df).mark_bar().encode(
        x='Gender',
        y='X',
        color='Category',
        tooltip=['Category', 'X', 'Y'],
        opacity=alt.condition(gender_select, alt.value(1), alt.value(0.25))
    ).add_params(gender_select).transform_filter(country_select).properties(width=400, height=300)
    col3.altair_chart(chart4, use_container_width=True)

    chart5 = alt.Chart(df).mark_bar().encode(
        x='Gender',
        y='Y',
        color='Category',
        tooltip=['Category', 'X', 'Y'],
        opacity=alt.condition(gender_select, alt.value(1), alt.value(0.25))
    ).add_params(gender_select).transform_filter(country_select).properties(width=400, height=300)
    col3.altair_chart(chart5, use_container_width=True)

# I dont want to combine the chart like this:
# st.altair_chart((chart1 | chart2 & chart3 | chart4 & chart5), use_container_width=True)

[mattijn]

Thank you for asking. If you have different components with each an independent Altair object, but still want these components to be interconnected then they will have to exchange states/signals and respond to callbacks.

With the Altair JupyterChart functionality introduced in Altair 5.1 we are aiming to introduce support for this type of functionality. See https://altair-viz.github.io/user_guide/jupyter_chart.html, you probably can get a long way, but it also might be that you hit the current limitation as is mentioned on that same page too (especially setting of selections from the outside).

If you succeed, then it would be great that you document it as well somewhere (here is fine!), even if it is a a very simple example (in fact more favourable).

Happy to try to answer more questions if needed!

[mattijn]

Naming is hard, but yes this should be possible.
And next to streamlit also in solara, shiny for python, quarto, dash and other dashboarding packages for python.

See also some discussion on this functionality in #3238

[jonmmease]

Unfortunately, I don't think streamlit supports Jupyter Widgets. See https://discuss.streamlit.io/t/ipywidgets-wip/3870/12.

[levinaanora]

Anyway, is there any function in altair chart that can captures the activity or event in the chart? So I can filter the data based on the value of the clicked chart field?

[jonmmease]

Capturing selection events and making them available in Python requires support from the notebook/dashboard system that's displaying the chart. For streamlit, I suggest tracking these issues:

• [Coming soon] Make Altair selections available in Python streamlit/streamlit#2263
• [Coming soon] Ability to accept input from Charts, Tables, etc. streamlit/streamlit#455

Or opening a new feature request with the Streamlit project. Unfortunately, there's nothing we can do from the Altair side to support this in Streamlit. Hope that makes sense.

[mattijn]

Here a proof of concept, how you can use one chart including a selection to filter a second chart. Both charts are defined separately. In this example I use a notebook, so they are in different cells, but in a dashboarding tool they can be defined as different components.

import altair as alt
from vega_datasets import data

# load data
cars = data.cars()

# define single selection
my_pointer = alt.selection_point(
    name='my_pointer', 
    encodings=['x', 'y'], 
    toggle=False, 
    empty=False,
    value=[{'Origin': 'Japan', 'Cylinders':4}]
)

# define base chart with a selection included
base_chart = alt.Chart(cars).mark_rect().encode(
    x="Cylinders:O",
    y="Origin:N",
    color=alt.condition(my_pointer, 'count()', alt.value('lightgray'))
).properties(
    width=300,
    height=180
).add_params(
    my_pointer
)

# define a filtered chart, where two parameters are defining the filtering
# these params are connceted to the encoding channels equal to the enconding
# channels as in `my_pointer`
param_origin = alt.param(name='param_origin', value='Japan')
param_cylinders = alt.param(name='param_cylinders', value=4)

filtered_chart = alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color=alt.Color('Origin').scale(domain=['USA', 'Japan', 'Europe'], range=['#aec7e8', '#1f77b4', '#e7ba52']),
).transform_filter(
    (alt.datum.Origin == param_origin) & (alt.datum.Cylinders == param_cylinders)
).add_params(
    param_origin,
    param_cylinders
)

# now we upgrade these chart defintions into a `JupyerChart`
jbase_chart = alt.JupyterChart(base_chart)
jfiltered_chart = alt.JupyterChart(filtered_chart)

# we define a callback function that is called when a
# selection in the `jbase_chart` is invoked
def on_selection_change(change):
    if len(change.new.value):
        selected_keys = change.new.value[0]
        # print(selected_keys)
        jfiltered_chart.params.param_origin = selected_keys['Origin']
        jfiltered_chart.params.param_cylinders = selected_keys['Cylinders']

# we define the observe helper that it should listens to changes
# in the `my_pointer` selection and when there is a change detected 
# it should be handled with the `on_selection_change` function
jbase_chart.selections.observe(handler=on_selection_change, names=my_pointer)

# now we call the jbase_chart in one cell
# in this cell you can make a change in the selection
jbase_chart

# and the jfiltered_chart in a second cell.
# and in this chart you see how the selection change is handled
jfiltered_chart

Result:

Hope this helps understanding the functionality. I'm aware that examples are currently not yet plentiful available on the internet!