In questo articolo vedremo un’introduzione alle caratteristiche principali di Dash, un tutorial base con un esempio pratico e una overview su alcune delle sue funzionalità più avanzate.

Cos'è e a cosa serve Dash

Dash è una libreria open-source per Python che consente di creare applicazioni web interattive basate su dati.

Una delle caratteristiche principali di Dash è la sua architettura basata su React.js. Ciò consente di creare applicazioni web responsive e reattive con un'esperienza utente fluida.

Dash include inoltre la libreria Plotly per la visualizzazione dei dati, il che significa che è possibile creare grafici interattivi e animati in modo semplice ed efficiente.

La libreria è disponibile per Python 3 ed è facile da installare tramite pip. Dash fornisce numerosi componenti HTML e CSS predefiniti, che permettono di creare interfacce utente sofisticate. Inoltre, Dash offre una vasta gamma di opzioni di personalizzazione e integrazione con altri framework come Flask.

Dash è una libreria molto utile per Data Analyst e Data Scientist che desiderano creare applicazioni web per condividere i propri risultati con gli altri o per creare dashboard interattive per la visualizzazione dei dati.

Python Dash Tutorial Base

Vediamo ora un tutorial di Dash con un esempio pratico.

In questo tutorial, creeremo una semplice applicazione web che consente all'utente di selezionare un Paese e visualizzare il numero di medaglie d'oro, d'argento e di bronzo vinte da quel Paese alle Olimpiadi estive del 2021.

Passo 1: Installazione e importazione delle librerie necessarie

Per iniziare, è necessario installare la libreria Dash.

Apriamo il prompt dei comandi o il terminale e digitiamo:

pip install dash

Dopo aver installato Dash, importiamo le librerie necessarie nel nostro script:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

dash è la libreria principale di Dash, dash_core_components contiene i componenti principali come input, output, dropdown, ecc., mentre dash_html_components contiene componenti HTML come div, H1, p, ecc. pandas sarà utilizzato per caricare i dati dal file csv. 

Passo 2: Caricamento dei dati

Creiamo un file CSV con i dati delle medaglie olimpiche del 2021.

I dati saranno organizzati in questo modo:

Paese               Oro      Argento            Bronzo

Italia                10        10        20

Stati Uniti         20        30        10

Giappone         30        20        10

...         ...         ...         ...

Salviamo il file come "medals.csv" nella stessa cartella in cui si trova lo script.

Dopo aver creato il file, possiamo caricarlo nel nostro script usando Pandas:

medals_df= pd.read_csv('medals.csv')

Passo 3: Creazione dell'applicazione

Per creare la nostra applicazione, dobbiamo creare un'istanza dell'oggetto dash.Dash() e definire il layout dell'applicazione usando componenti HTML e core di Dash.

In questo esempio, creeremo un'applicazione con un dropdown che consente all'utente di selezionare un Paese e visualizzare il numero di medaglie d'oro, d'argento e di bronzo vinte da quel Paese.

app= dash.Dash(__name__)

app.layout= html.Div([
   dcc.Dropdown(
       id='country-dropdown',
       options=[{'label': country, 'value':country} for country in medals_df['Paese']],
       value='Italia'
   ),
   html.H1(id='medals-header'),
   html.Div([
       html.Div([
           html.H2('Oro'),
           html.Div(id='gold-medals')
       ], className='medal'),
       html.Div([
           html.H2('Argento'),
           html.Div(id='silver-medals')
       ], className='medal'),
       html.Div([
           html.H2('Bronzo'),
           html.Div(id='bronze-medals')
       ], className='medal')
   ], className='medals-container')
])

Nella prima riga del layout, abbiamo un dropdown con l'id "country-dropdown", che consente all'utente di selezionare il Paese. Le opzioni del dropdown sono generate in base ai Paesi presenti nel nostro dataframe.

La riga successiva è un'intestazione HTML con id"medals-header", che verrà utilizzata per visualizzare il nome del Paese selezionato dall'utente.

Nel blocco successivo, creiamo tre div con classe "medal" all'interno di un div con classe "medals-container". Ogni div contiene un'intestazione HTML con il nome del metallo e un div con un id che utilizzeremo per visualizzare il numero di medaglie.

Passo 4: Definizione delle funzioni di callback

Per aggiornare i numeri di medaglie quando l'utente seleziona un nuovo Paese, dobbiamo definire alcune funzioni di callback.

In particolare, dobbiamo definire una funzione che aggiorna l'intestazione HTML con il nome del Paese selezionato e tre funzioni che aggiornano i div con i numeri di medaglie.

@app.callback(
   dash.dependencies.Output('medals-header','children'),
  [dash.dependencies.Input('country-dropdown', 'value')])
defupdate_header(selected_country):
   return f'Medaglie vinte da{selected_country}'

@app.callback(
   dash.dependencies.Output('gold-medals','children'),
  [dash.dependencies.Input('country-dropdown', 'value')])
defupdate_gold_medals(selected_country):
   gold = medals_df.loc[medals_df['Paese'] ==selected_country, 'Oro'].iloc[0]
   return f'{gold}'

@app.callback(
   dash.dependencies.Output('silver-medals','children'),
  [dash.dependencies.Input('country-dropdown', 'value')])
defupdate_silver_medals(selected_country):
   silver = medals_df.loc[medals_df['Paese']== selected_country, 'Argento'].iloc[0]
   return f'{silver}'

@app.callback(
   dash.dependencies.Output('bronze-medals','children'),
  [dash.dependencies.Input('country-dropdown', 'value')])
defupdate_bronze_medals(selected_country)
   bronze = medals_df.loc[medals_df['Paese']== selected_country, 'Bronzo'].iloc[0]
   return f'{bronze}'

Ciascuna funzione di callback è decorata con l'annotazione @app.callback, che specifica l'output che la funzione deve aggiornare e gli input che devono attivare la funzione.

Passo 5: Esecuzione dell'applicazione

Per eseguire l'applicazione, possiamo aggiungere il seguente codice alla fine del nostro script:

if__name__ == '__main__':
   app.run_server(debug=True)

Questo avvia il server di sviluppo e apre l'applicazione nel browser predefinito.

Funzionalità avanzate di Dash

Dash è una libreria estremamente flessibile e personalizzabile, in grado di supportare una vasta gamma di funzionalità avanzate per la creazione di applicazioni web interattive.

Vediamo di seguito alcune delle principali funzioni avanzate che offre.

Integrazione con Plotly

Dash è costruito su Plotly, una libreria di visualizzazione dei dati interattiva che supporta una vasta gamma di tipi di grafici. Dash consente di incorporare facilmente grafici Plotly nelle applicazioni web.

Funzionalita' di interattivita' avanzata

Dash consente di creare interazioni complesse tra i componenti dell'applicazione, come l'aggiornamento di un grafico in base alle selezioni dell'utente o il filtraggio dei dati in tempo reale.

Supporto per la gestione degli stati

Dash consente di gestire lo stato dell'applicazione, ad esempio mantenere traccia delle selezioni dell'utente o delle modifiche ai dati. Ciò consente di creare applicazioni web che offrono un'esperienza più personalizzata e coerente per l'utente.

Personalizzazione dell'aspetto

Dash consente di personalizzare l'aspetto dell'applicazione utilizzando fogli di stile CSS personalizzati. Ciò consente di creare applicazioni web con un'esperienza utente personalizzata e coerente con il marchio dell'azienda.

Supporto per le animazioni

Dash supporta le animazioni, consentendo di creare applicazioni web con effetti visivi accattivanti che migliorano l'esperienza utente.

Gestione dei file

Dash consente di caricare, salvare e scaricare file utilizzando componenti come dcc.Upload e dcc.Download. Ciò consente di creare applicazioni web che consentono agli utenti di interagire con i file in modo più intuitivo.

Supporto per il caching dei dati

Dash consente di memorizzare in cache i dati per migliorare le prestazioni dell'applicazione. Ciò è particolarmente utile quando si lavora con grandi quantità di dati o quando l'aggiornamento dei dati è costoso in termini di tempo.

Supporto per la condivisione di applicazioni web

Dash consente di condividere facilmente le applicazioni web con altre persone utilizzando servizi di hosting come Heroku o AWS.

Conclusione

Queste sono solo alcune delle funzionalità offerte da Dash. Grazie alla sua flessibilità e possibilità di personalizzazione, Dash può essere utilizzato per creare una vasta gamma di applicazioni web interattive, dalle dashboard di Business Intelligence alle applicazioni scientifiche.

‍