Search code examples
pythondata-visualizationstacked-area-chartaltair

Python - Altair - Stacked Bar Chart With Selection

I've followed and replicated with my dataset two tutorials, linked below

Stacked Bar Chart : https://altair-viz.github.io/gallery/stacked_bar_chart.html

and 

Selectable Data : https://altair-viz.github.io/gallery/interactive_cross_highlight.html

I'm having difficulty understanding if Altair is capable of combining these two, though.

Is it possible to have a stacked bar graph, where each "subsection" of the graph is selectable. So, something like if I had data that was like

Category1, Category2

in bars, and each one can have subsections

Sub1, Sub2

I'd have a stacked bar graph where say the Categroy1/Category2 parts that are related to Sub1 are Blue, the parts related to Sub2 are Orange, and I can select any of the 4 parts (Cat1+Sub1, Cat1+Sub2, Cat2+Sub1, Cat2+Sub2, represented as 2 stacked bars) and that part then turns Red.

Is this possible or out-of-scope, and if possible, what am I missing conceptually?

Solution

  • Yes, this is possible. You can specify in the selector which encodings you would like it to respond to; to respond to individual sections of the stacked bar, specify x and color.

    Here's an example:

    import altair as alt
from vega_datasets import data

source = data.barley()

selector = alt.selection_single(encodings=['x', 'color'])

alt.Chart(source).mark_bar().encode(
    x='variety',
    y='sum(yield)',
    color=alt.condition(selector, 'site', alt.value('lightgray'))
).add_selection(
    selector
)

    enter image description here

    click here to try it live in the vega editor.