Da Python al Web

Altair è una libreria di visualizzazione dei dati per Python, basata su Vega e Vega-Lite. Ciò significa che Altair genera specifiche Vega-Lite, che a loro volta vengono convertite in specifiche Vega e quindi in grafici visualizzabili in un browser web. Per incorporare un grafico Altair in una pagina web, è necessario convertire la specifica Vega-Lite in un oggetto JSON e salvarlo in un file .json.

La procedura in altair per salvare la specifica Vega-Lite in un file .json è la seguente:

Preso un chart di altair qualsiasi:

# Esempio di dati
data = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E'],
    'b': [28, 55, 43, 91, 81]
})

Nel caso in cui si voglia rendere il grafico responsive, al momento del salvataggio del file .json è possibile specificare la proprietà width='container'.

# Creazione del grafico
chart = alt.Chart(data).mark_bar().encode(
    x='a:N',
    y='b:Q'
).properties(
    width='container',
    height=300 
)

# Salvataggio del grafico come file JSON
chart_json = chart.to_json()
with open('chart.json', 'w') as f:
    f.write(chart_json)

Link al Notebook Colab con l’esempio qui sopra

Il file chart.json può essere poi utilizzato in una pagina web per visualizzare il grafico. Per fare ciò, è possibile utilizzare il tag vegachart di Jekyll, specificando il percorso del file .json come valore dell’attributo schema-url.

<vegachart schema-url="/sbd-master-template//assets/charts/chart_responsive.json" style="width: 100%"></vegachart>

Questo tema è stato personalizzato per accogliere grafici vega senza grosse complicazioni: se nella pagina in cui si vuole visualizzare il grafico nel front matter è specificato vega: true, il tag vegachart verrà interpretato e il grafico verrà visualizzato correttamente. vega: true è una variabile che indica di caricare il plugin Vega nella pagina. In questo modo, il grafico verrà visualizzato in modo responsive, adattandosi alla larghezza del contenitore in cui è inserito.

Esempio di inserimento di un chart realizzato con Altair

• Il grafico è stato salvato come file chart_responsive.json e inserito nella cartella assets/charts.
• Se provassimo a visualizzare il grafico in una pagina web senza specificare la proprietà width='container', il grafico non sarebbe responsive e verrebbe visualizzato con una larghezza fissa.
• Se porvassimo a visualizzare il grafico in un notebook Jupyter, il grafico non sarebbe visibile in quanto la proprietà width='container' non è supportata in questo ambiente. In tal caso, è possibile specificare una larghezza fissa in pixel e cambiare la proprietà width solo in fase di esportazione.