Fare convivere una cella Observable e un grafico Altair in Quarto

Non è possibile in Quarto fare convivere una cella di codice di tipo Observable, con una cella Python con un grafico Altair.

Vedi issue 3424

C’è però un workaround:

• da Altair generare la descrizione del grafico in formato JSON (è in formato vega-lite), con chart.to_json();
• fare leggere a una cella Observable il JSON, e visualizzare il grafico.

Qui ad esempio creo una cella Observable usata soltanto come esempio.

```{ojs}
//| echo: fenced
data = FileAttachment("ojs.csv").csv({ typed: true })
Inputs.table(data)
```

Poi genero la descrizione di un grafico vega-lite, con Altair, salvando il file chart.json.

```{python}
import pandas as pd
import altair as alt
import warnings

warnings.simplefilter(action='ignore', category=FutureWarning)

df = pd.read_csv("altair.csv",keep_default_na=False)

df['year'] = pd.to_datetime(df['year'], format='%Y')

chart=alt.Chart(df).mark_area().encode(
    alt.X('year:T', timeUnit = 'year',title='year',axis=alt.Axis(tickCount='year')),
    alt.Y('v:Q',axis=alt.Axis(format='%'),title='percentage'),
    color='i:N'
)
chart.save('chart.json')
```

E infine faccio leggere a Observable la descrizione del grafico, che è stata generata da Altair e lo faccio visualizzare.

```{ojs}
//| echo: fenced
file = FileAttachment("chart.json").json()
embed = require("vega-embed@6")
embed(file)
```