REQ: Interactive example that toggles display of a graph element + text (e.g., a curve fit on top of scatter data)

[jowens]

There's a nice curve-fit example in the gallery:

https://altair-viz.github.io/gallery/poly_fit.html

I think a generally useful use case that I don't really see in the gallery is "have a scatter plot, toggle a best-fit curve on top of it, show some statistics about that curve". This has two parts where I'd appreciate some advice!

• How to toggle on/off a curve on top of a plot. (Is this possible?) The "checkbox" piece of https://altair-viz.github.io/gallery/multiple_interactions.html seems most relevant, although I think I'd prefer seeing it in the legend to the right rather than below.
• How to display relevant text along with the toggled curve (e.g., growth rate). I don't have a strong feeling if that should be next to the curve itself or next to the checkbox, but I'd like to be able to couple the toggling of the graph element with the toggling of the related text.

Advice appreciated, but this would seem to be an interesting kind of example to add to the interactive examples as well. Thanks!

[jakevdp]

It sounds like you want something along the lines of an interactive legend, which is an open feature request in Vega-Lite: vega/vega-lite#1657, although you can work around it by concatenating a chart that acts as a legend: https://altair-viz.github.io/user_guide/interactions.html#selection-targets-fields-and-encodings

If you want to toggle a curve on and off with a radio selection, you could do something like this:

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

# Generate some random data
rng = np.random.RandomState(1)
x = rng.rand(40) ** 2
y = 10 - 1. / (x + 0.1) + rng.randn(40)
df = pd.DataFrame({'x': x, 'y': y})

# Define the degree of the polynomial fit
degree_list = [1, 3, 5]

# Build a dataframe with the fitted data
poly_data = pd.DataFrame({'xfit': np.linspace(df['x'].min(), df['x'].max(), 500)})
for degree in degree_list:
    poly_data[str(degree)] = np.poly1d(np.polyfit(df['x'], df['y'], degree))(poly_data['xfit'])

# Plot the data points on an interactive axis
points = alt.Chart(df).mark_circle(color='black').encode(
    x=alt.X('x', title='x'),
    y=alt.Y('y', title='y')
).interactive()

radio = alt.binding_radio(options=['1', '3', '5'], name='Polynomial Degree:')
selection = alt.selection_single(fields=['degree'],
                                 empty='none',
                                 bind=radio)

# Plot the best fit polynomials
polynomial_fit = alt.Chart(poly_data).transform_fold(
    ['1', '3', '5'], ['degree', 'yfit']
).transform_filter(
    selection
).mark_line().encode(
    x='xfit:Q',
    y='yfit:Q',
).add_selection(
    selection   
)

points + polynomial_fit 

[jowens]

@jakevdp That is a terrific example, thank you.

Might you have a suggestion of where/how to display, say, the slope of the line you fit to those points?

[jakevdp]

As far as displaying stats... you'd have to pre-compute them and add them to the data table (or as a separate table), then display them conditioned on the same selection as the lines. There's not really a very streamlined way to do that, beyond just adding the layer.

[jowens]

Got it. Thanks @jakevdp.

[jakevdp]

This kind of thing will become easier with the regression transforms that will be part of Vega-Lite 4, available in the upcoming Altair 4.0 release.