Get sum over selection in Altair

Viewed 1218

I have a time series of cost values and I'd like to get the sum of the costs for a range of selected dates. The interval selection is working perfectly, but how do I access the selected dates?

brush = alt.selection(type='interval', encodings=['x'])

chart = alt.Chart(forecast).mark_bar().encode(
            x='dates:T',
            y='costs:Q',
            color='type:N',
        ).add_selection(
            brush
        )

enter image description here

1 Answers

You can use a text mark along with a filter transform to display the sum of the values within the selection. For example:

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

data = pd.DataFrame({
    "dates": pd.date_range('2019-04-01', freq='M', periods=20),
    "costs": np.linspace(1000, 5000, 20),
})

brush = alt.selection(type='interval', encodings=['x'])

chart = alt.Chart(data).mark_bar().encode(
    x='dates:T',
    y='costs:Q',
).add_selection(
    brush
)

text = alt.Chart(data).transform_filter(brush).mark_text(
    align='left',
    baseline='top',
).encode(
    x=alt.value(5),
    y=alt.value(5),
    text=alt.Text('sum(costs):Q', format='.1f'),
)

chart + text

enter image description here


Edit: if you want to display the selection bounds in the text, it's not entirely straightforward, but you can do it using a calculate transform along with an appropriate vega expression string which refers to the selection by name.

For example:

brush = alt.selection(type='interval', encodings=['x'], name='sel')

chart = alt.Chart(data).mark_bar().encode(
    x='dates:T',
    y='costs:Q',
).add_selection(
    brush
)

text = alt.Chart(data).transform_filter(
    brush
).transform_aggregate(
    total='sum(costs)'
).transform_calculate(
    date_range="sel.dates ? monthAbbrevFormat(month(sel.dates[0])) + ' to ' + monthAbbrevFormat(month(sel.dates[1])) : 'all'",
    text="'Total for ' + datum.date_range + ': ' + format(datum.total, '.0f')"  
).mark_text(
    align='left',
    baseline='top',
).encode(
    x=alt.value(5),
    y=alt.value(5),
    text=alt.Text('text:N'),
)

chart + text

enter image description here

Related