Add zoom&pan to altair_chart

[proItheus]

Currently, marimo supports two kinds of interactive plot:

• matplotlib: only zoom,pan, no reactive
• altair: reactive selection, but no zoom/pan

So what I want is adding zoom and pan to marimo.ui.altair_chart, thus enabling one to simultaneously do selection and zoom/pan in one plot.

Not sure how difficult this will be, but I think it will greatly add to the usability of the plotting feature.

And thanks for this awesome tool. I'm very surprised when seeing this repo has only ~100 stars, while my expectation is some thousands.

[akshayka]

Hey @proItheus, that's a great suggestion! We'll add it to our task list.

One UX issue is that it's not clear how to support both selection and pan at the same time. Perhaps Ctrl+Click would pan, and a bare Click would select reactively?

And thanks for this awesome tool. I'm very surprised when seeing this repo has only ~100 stars, while my expectation is some thousands.

You're very welcome! Even though marimo has been in development for over a year, the repo has been public for a couple months, so perhaps it's not widely known about it. Feel free to spread the word :)

[proItheus]

Maybe we can just replicate what's in interactive matplotlib plots now?

That is, have a toolbar like this:

And only zoom/pan when corresponding tool is activated.

[mscolnick]

@proItheus, this is a good suggestion. i will add it to our feature board. in the meantime, i created my own controls using other marimo elements. the down side my example is that you cannot zoom-then-select, which we can build a proper feature for.

import marimo

__generated_with = "0.1.37"
app = marimo.App(width="full")


@app.cell
def __():
    import marimo as mo
    from vega_datasets import data
    import altair as alt
    return alt, data, mo


@app.cell
def __(data, mo):
    cars = data.cars()
    controls = mo.ui.radio(["Selection", "Pan & Zoom"], value="Selection")
    return cars, controls


@app.cell
def __(alt, cars, controls, mo):
    _chart = (
        alt.Chart(cars)
        .mark_point()
        .encode(
            x="Horsepower",
            y="Miles_per_Gallon",
            color="Origin",
        )
    )
    chart = mo.ui.altair_chart(
        _chart.interactive() if controls.value == "Pan & Zoom" else _chart,
        chart_selection=controls.value == "Selection",
        legend_selection=controls.value == "Selection",
        label="Cars",
    )
    mo.vstack([chart, controls])
    return chart,


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