altair_chart interactivity

[declann]

Hi!

Coming from reactive Observable notebooks and Observable Framework I'm very excited that Marimo is focusing on reactivity for Python notebooks.

I notice the work around altair_chart and I think Vega is a crazy powerful sidekick for reactive visualization. With reactive selections into Python, I think this is also understood by the Marimo team: it's very slick to get this in Python notebooks.

Are there any plans to handle reactivity on the other side: the data input into altair_chart and signal input? Vega has a View API that can be used to incrementally update state and data in a visualization. It's extremely fast (consequent to being reactive! (paper)). I use it in a reactive/interactive actuarial model here (draft).

I would like to make a marimo notebook with the same functionality from a Python actuarial model.

Here is what I get at the moment (using simplified visual):

Screencast.from.2024-11-18.01-51-44.webm

The mo.ui.altair_chart has a weird reaction to the data changing (temporary 404s somehow). Altair native(?) on the bottom works reasonably well but I know that it too isn't using the extremely fast reactive behavior in Vega (and I know that I need it to for smooth behavior).

Are there any plans to develop altair_chart to use the View API for smooth visuals and fast reactive update of altair visuals? I think it can be super nice!

Thanks!
Declan

[declann]

In the Altair project altair/3119 led to JupyterChart - which provides a lot of dynamic behaviour and it works in Marimo as well as Jupyter, but dynamic datasets is listed as follow-on work in the PR (update: this feature was added.

The anywidget code jupyter_chart.py seems like it can be used to facilitate this functionality.

Screencast.from.2024-11-18.12-39-40.webm

import marimo

__generated_with = "0.9.20"
app = marimo.App(width="medium")


@app.cell
def __(mo):
    mo.md(
        r"""
        # Altair JupyterChart

        Some examples from [Altair docs](https://altair-viz.github.io/user_guide/jupyter_chart.html), working in marimo!
        """
    )
    return


@app.cell
def __():
    import marimo as mo
    corderRadius = mo.ui.slider(start=0,step=1,stop=20, label="corner radius")
    corderRadius
    return corderRadius, mo


@app.cell
def __():
    import altair as alt
    import pandas as pd

    source = pd.DataFrame({
        'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
        'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
    })

    chart = alt.Chart(source).mark_bar().encode(
        x='a',
        y='b'
    )

    jchart = alt.JupyterChart(chart)
    jchart

    return alt, chart, jchart, pd, source


@app.cell
def __(chart, corderRadius, jchart):
    jchart.chart = chart.mark_bar(color="crimson", cornerRadius=corderRadius.value)
    return


@app.cell
def __(mo):
    mo.md(r"""## Accessing Variable Params""")
    return


@app.cell
def __(alt, pd):
    import numpy as np

    rand = np.random.RandomState(42)

    df = pd.DataFrame({
        'xval': range(100),
        'yval': rand.randn(100).cumsum()
    })

    slider = alt.binding_range(min=0, max=100, step=1)
    cutoff = alt.param(name="cutoff", bind=slider, value=50)

    chart2 = alt.Chart(df).mark_point().encode(
        x='xval',
        y='yval',
        color=alt.condition(
            alt.datum.xval < cutoff,
            alt.value('red'), alt.value('blue')
        )
    ).add_params(
        cutoff
    )
    jchart2 = alt.JupyterChart(chart2)
    jchart2

    return chart2, cutoff, df, jchart2, np, rand, slider


@app.cell
def __(mo):
    mo.md(r"""This isn't reactive:""")
    return


@app.cell
def __(jchart2):
    jchart2.params
    return


@app.cell
def __(mo):
    mo.md("""This is (see stdout):""")
    return


@app.cell
def __(jchart2):
    def on_cutoff_change(change):
        print(change.new)

    jchart2.params.observe(on_cutoff_change, ["cutoff"])
    return (on_cutoff_change,)


@app.cell
def __(mo):
    mo.md(r"""Is this buggy?:""")
    return


@app.cell
def __(jchart2):
    jchart2.params.cutoff = 15
    return


@app.cell
def __(mo):
    mo.md("""## Index Selections""")
    return


@app.cell
def __(alt):
    from vega_datasets import data

    source3 = data.cars()
    brush = alt.selection_point(name="point")

    chart3 = alt.Chart(source3).mark_point().encode(
        x='Horsepower:Q',
        y='Miles_per_Gallon:Q',
        color=alt.condition(brush, 'Origin:N', alt.value('grey')),
    ).add_params(brush)

    jchart3 = alt.JupyterChart(chart3)
    jchart3
    return brush, chart3, data, jchart3, source3


@app.cell
def __(jchart3):
    jchart3.selections.point.value
    return


if __name__ == "__main__":
    app.run()