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()

[q-wertz]

As far as I can see this is still not possible, right?

[mscolnick]

Can you share a full example?

[q-wertz]

Ah sorry. I think it is a misunderstanding on my side.

Also the mark_point() zoom doesn't work, I always mixed up selecting (which is working on point plots but not on line plots).

I apparently have no idea what the "meta key" is 😅
Tried on Firefox, Chromium and Vivaldi:

• Shift:
  • Shift + Scrolling: Nothing
  • Shift + Drag: Nothing
  • Multi legend item selection: Working
• Strg:
  • Strg + Scrolling: Browser scroll is triggered
  • Strg + click & drag: Interval selection
• Windows key:
  • Windows + Scrolling: Workspace is changed
  • Windows + dragging: Browser window goes into window mode

Also tried Alt Gr, and combination of keys...

I'm on Manjaro (Gnome, Wayland). Is this a OS specific issue?

[mscolnick]

Hmm yes this does sounds OS specific. If you'd like, feel free to file an issue, and maybe someone with the same OS can help with the fix.

[q-wertz]

Thanks for the help. Opened #3812.

[q-wertz]

Found a solution: I need to change your code to

mo.ui.altair_chart(alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin'
).interactive())

and I can zoom (Scrolling, no extra key required) and pan (Alt + drag)

Not sure if this is intended behavior or not 😅

[liquidcarbon]

The .interactive() option is a bit crude.

I needed UI that allows different kinds of zoom bound to different keys and came up with this.

Now you can Shift-scroll to zoom on only X, Alt-scroll for only Y, just the wheel is regular zoom.
Similar trick for panning should be possible.

import altair as alt

class Chart(alt.Chart):
    """Modifications of Altair charts."""

    wheel_zoom_x_only = alt.selection_interval(
        bind="scales", encodings=["x"], zoom="wheel"
    )
    wheel_zoom_x = alt.selection_interval(
        bind="scales", encodings=["x"], zoom="wheel![!event.shiftKey]"
    )
    wheel_zoom_y = alt.selection_interval(
        bind="scales", encodings=["y"], zoom="wheel![!event.altKey]"
    )

    @property
    def zoomable(self):
        """Zoom on both axes (mouse wheel) or X-only (Alt-wheel) or Y-only (Shift-wheel)."""
        return self.add_params(self.wheel_zoom_x, self.wheel_zoom_y)

    @property
    def zoomable_x(self):
        return self.add_params(self.wheel_zoom_x_only)