Py.Cafe

jhsmit/

solara-alt-chart-selection

Interactive Data Selection and Visualization with Solara

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import altair as alt
import numpy as np
import pandas as pd
import solara

columns = "abcd"
d = {"idx": np.arange(100), **{c: np.random.rand(100) for c in columns}}
df = pd.DataFrame(d)


def make_chart(column: str):
    selection = alt.selection_interval(name="range", encodings=["x"])
    chart = (
        alt.Chart(df)
        .mark_line()
        .encode(x=alt.X("idx:Q"), y=alt.Y(f"{column}:Q"))
        .add_params(selection)
    )
    return chart


@solara.component
def SelectionChart(chart, on_select):
    view = alt.JupyterChart.element(chart=chart)
    print("rerender selection chart")

    def bind():
        print("rebind")
        widget = solara.get_widget(view)
        widget.selections.observe(on_select, "range")

    solara.use_effect(bind, [chart])


@solara.component
def Page():
    selection = solara.use_reactive(None)
    column = solara.use_reactive("a")
    solara.Text(str(selection.value))
    solara.Select(label="Column", value=column.value, on_value=column.set, values=list(columns))
    # view = alt.JupyterChart.element(chart=make_chart("a"))
    SelectionChart(make_chart(column.value), on_select=selection.set)
    solara.DataFrame(df)