Unable to reproduce interactive mo.ui.altair demo

At a glance

A community member is trying to use the marimo/altair integration but is having trouble with the click and drag selection functionality. They have tried enabling vegafusion, but this seems to be causing compatibility issues. The community members have provided a sandboxed notebook to reproduce the issue, and it appears that vegafusion and the marimo altair chart are not compatible. As a workaround, the community members suggest using the JupyterChart anywidget, but this requires the user to filter the data themselves.

Useful resources

llucharo

Hey, I can't reproduce https://marimo.io/blog/altair

I am trying to take advantage of the marimo/altair integration but the click and drag selection doesn't work out of the box for me - I'm running the latest marimo

10 comments

MMyles Scolnick

What part doesn't work? Can you share some code?

llucharo

I am copying and pasting the code from the demo, the click and dragging doesn't work

llucharo

I've got vegafusion enabled, maybe that's the difference:

alt.data_transformers.enable("vegafusion")

AAkshay

You can't click and drag at all, or the click and drag doesn't send data back to Python? Does disabling vegafusion fix it?

llucharo

the first one, I had vegafusion enabled already to make charts with long tables, I am trying to recreate the issue in a standalone notebook. The first thing I notice is that vegafusion and marimo altair chart don't seem compatible, I'm hitting this issue:

Plain Text

TypeError
This cell raised an exception: TypeError('Expected Table-like input or dict of arrays or sequence of arrays.')

See the console area for a traceback.

llucharo

here's a sandboxed nb to reproduce

llucharo

Maybe this (mo.ui.altair_chart and vegafusion not being compatbile) is known, it's just I didn't see anything about it in the docs

llucharo

Plain Text

# /// script
# requires-python = ">=3.13"
# dependencies = [
#     "altair==5.5.0",
#     "marimo",
#     "vega-datasets==0.9.0",
#     "vegafusion[embed]==2.0.1",
# ]
# ///

import marimo

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


@app.cell
def _():
    import marimo as mo
    import altair as alt
    from vega_datasets import data
    alt.data_transformers.enable("vegafusion")

    # Load some data
    cars = data.cars()

    # Create an Altair chart
    _chart = alt.Chart(cars).mark_point().encode(
        x='Horsepower',
        y='Miles_per_Gallon',
        color='Origin',
    ).properties(height=300)

    # Make it reactive ⚡
    chart = mo.ui.altair_chart(_chart)
    return alt, cars, chart, data, mo


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

MMyles Scolnick

Looks like its not supported and does so silently.

The reason is vega-fusion compiles to vanilla vega (instead of vega-lite) and our automatic selection doesn't support pure vega, so we will either need to add support or add a warning

MMyles Scolnick

-------------

As a workaround, you could use the JupyterChart anywidget:

Plain Text

# Create an Altair chart
_chart = (
    alt.Chart(cars)
    .mark_point()
    .encode(
        x="Horsepower",
        y="Miles_per_Gallon",
        color="Origin",
    )
    .properties(height=300)
    .add_params(alt.selection_interval(name="interval"))
)

# Make it reactive ⚡
chart = mo.ui.anywidget(alt.JupyterChart(_chart))

Plain Text

# get internal selection ranges
list(chart.selections.interval.value.items())
# would need to filter the data this yourself

Add a reply

Get help from the marimo community

Unable to reproduce interactive mo.ui.altair demo