Default Binding Selection

I know binding documentation is on the way but I have question nonetheless. (I will include a “copy/paste”-able example at the end for convenience.)

Background

import numpy as np
import pandas as pd
import altair as alt
from vega_datasets import data

Let’s say I am interested in analysing some stock information. I am interested in a single stock as well as a few indicator variables A B and C.

stocks = data.stocks()
apple = stocks.loc[stocks['symbol']=='AAPL',:].copy()

np.random.seed(0)
apple['A'] = np.random.normal(size=len(apple)).cumsum() + 50
apple['B'] = np.random.normal(size=len(apple)).cumsum()
apple['C'] = np.random.normal(size=len(apple)).cumsum()
apple.head()

symbol	date	price	A	B	C
AAPL	2000-01-01	25.94	51.764052	1.326386	1.152332
AAPL	2000-02-01	28.66	52.164210	0.631818	2.231950
AAPL	2000-03-01	33.95	53.142948	0.482183	1.418586
AAPL	2000-04-01	31.01	55.383841	0.047030	-0.047838
AAPL	2000-05-01	21.00	57.251399	1.896294	0.473226

Before heading to altair I want to melt() the data so that it is in long-form.

apple = apple.melt(['date', 'price', 'symbol'])
apple.head()

date	price	symbol	variable	value
2000-01-01	25.94	AAPL	A	51.764052
2000-02-01	28.66	AAPL	A	52.164210
2000-03-01	33.95	AAPL	A	53.142948
2000-04-01	31.01	AAPL	A	55.383841
2000-05-01	21.00	AAPL	A	57.251399

It’s important to note that the indicator variables are different orders of magnitude.

alt.Chart(apple).mark_line().encode(y='value', x='date', color='variable')

Problem Statement

I would like to create a plot with a time series of the price information and a heatmap of the indicator information. I want the time series to include a selection for the date range, and I want the heatmap to include a drop down menu for which indicator variable to display.

Here was my idea

date_selection = alt.selection_interval(encodings=['x'])

toggle = alt.binding_select(options=['A', 'B', 'C'])
variable_selection = alt.selection_single(fields=['variable'], bind=toggle, name='Select_')

heat_map = alt.Chart().mark_rect().encode(
    x = 'year(date):O', 
    y = 'month(date):O', 
    color = alt.condition(date_selection, 'value:Q', alt.ColorValue('lightgray'))
).add_selection(
    variable_selection
).transform_filter(
    variable_selection
)

time_series = alt.Chart().mark_line().encode(
    x='date:T', 
    y='price:Q'
).add_selection(date_selection)

alt.vconcat(time_series, heat_map, data=apple).resolve_scale('independent')

Here is where the weird behavior is happening. Clicking between the heatmap and the time series seems to change what is displayed. The scale appears to be for the entire dataset. I can’t seem to figure out what is going wrong.

TLDR

• Why does clicking the heatmap change what is being plotted?
• Can you set a default value for the drop down binding?
• Is it ok to mix selection intervales with single selections?

As the binding documentation comes together I am sure things will start to make more sense.

Thanks for your time and help!

Full Example Code

import numpy as np
import pandas as pd
import altair as alt
from vega_datasets import data

stocks = data.stocks()
apple = stocks.loc[stocks['symbol']=='AAPL',:].copy()

np.random.seed(0)
apple['A'] = np.random.normal(size=len(apple)).cumsum() + 50
apple['B'] = np.random.normal(size=len(apple)).cumsum()
apple['C'] = np.random.normal(size=len(apple)).cumsum()

apple = apple.melt(['date', 'price', 'symbol'])

date_selection = alt.selection_interval(encodings=['x'])

toggle = alt.binding_select(options=['A', 'B', 'C'])
variable_selection = alt.selection_single(fields=['variable'], bind=toggle, name='Select_')

heat_map = alt.Chart().mark_rect().encode(
    x = 'year(date):O', 
    y = 'month(date):O', 
    color = alt.condition(date_selection, 'value:Q', alt.ColorValue('lightgray'))
).add_selection(
    variable_selection
).transform_filter(
    variable_selection
)

time_series = alt.Chart().mark_line().encode(
    x='date:T', 
    y='price:Q'
).add_selection(date_selection)

alt.vconcat(time_series, heat_map, data=apple).resolve_scale('independent')

[jakevdp]

Initialization of selections is now supported in Altair v3. For example: https://altair-viz.github.io/gallery/us_population_over_time.html

[hassenmorad]

@jakevdp Thanks, that did the trick!