adding interactivity to altair plots
hi there. i'm trying to add interactivity to the altair plot. below is a basic prototype that just creates a map and a Card.
```python
from fasthtml.common import *
from shadcn import *
from fh_altair import altair2fasthml, altair_headers
import altair as alt
app, rt = fast_app(
pico=False,
hdrs=(ShadHead(lucid=False),altair_headers)
)
def generate_altair_chart():
from vega_datasets import data
counties = alt.topo_feature(data.us_10m.url, 'counties')
source = data.unemployment.url
slider = alt.binding_range(min=0, max=1, step=0.05, name='opacity:')
chart = alt.Chart(counties).mark_geoshape().encode(
color='rate:Q'
).transform_lookup(
lookup='id',
from_=alt.LookupData(source, 'id', ['rate'])
).project(
type='albersUsa'
).properties(
width=500,
height=300
)
return altair2fasthml(chart)
@app.get("/")
def home():
return Div(
Div(
generate_altair_chart(),
cls="col-xs-12"
),
Div(
Card(
Input(type="text", placeholder="Enter some text..."),
title="Create a post",
description="Enter your post title below.",
footer=Div(
Button("Cancel", variant="outline"),
Button("Submit"),
cls="flex w-full justify-end gap-2",
),
cls="w-[80%]",
),
),
cls="row", style="color: #fff;"
)
```
i would like to use the syntax of `return altair2fasthml(chart + slider)` to get interactivity but it does not seem to work. is there a way to do this?
关闭于 2024-08-23 4 条评论