Costruire una dashboard interattiva usando Bokeh e Panda

Questo articolo è stato pubblicato come parte di Blogathon sulla scienza dei dati

L'importanza della visualizzazione dei dati

Un'enorme quantità di dati viene generata ogni istante a causa delle attività commerciali nella globalizzazione. Le aziende stanno estraendo informazioni utili da tali dati generati per prendere importanti decisioni aziendali. L'analisi esplorativa dei dati può aiutarli a visualizzare l'attuale situazione del mercato e prevedere le probabili tendenze future, capire cosa dicono e cosa si aspettano i loro clienti dal prodotto, migliorare il prodotto adottando misure adeguate e altro ancora.

Per realizzare questo, Visualizzazione dati è la soluzione, ovvero creare una rappresentazione visivamente accattivante dei dati che racconti rapidamente una storia interessante ma sia abbastanza semplice da essere compresa da tutti i lettori.

Si può usare Pandas per l'analisi dei dati sopra menzionata in Python attraverso le sue funzioni di trama integrate. Ma non sarebbe fantastico se potessi interagire con il grafico attraverso funzioni come lo zoom o passare il mouse per scavare un po' più a fondo nei dati?

Vantaggi delle trame interattive e del dashboard che utilizzano Bokeh

La visualizzazione interattiva dei dati consente all'utente di modificare istantaneamente gli elementi su un grafico invece di modificare il codice in background. Immagina di interagire con un grafico che mostra il prezzo di un prodotto per un decennio. Ora, se ci fosse un dispositivo di scorrimento o un menu a discesa per selezionare i prezzi per un determinato anno o mese, allora tu come lettore avresti informazioni più rapide dal grafico e anche troppo rapidamente senza modificare il codice. Questo è esattamente ciò che offrono le trame interattive.

Con i grafici interattivi, possiamo comprendere meglio la storia dietro i dati. Questi grafici ci consentono di ingrandire una variazione interessante per individuare tendenze e variazioni, nonché trovare correlazioni e connessioni tra le variabili. Tutto ciò rende il processo di esplorazione dei dati più significativo.

Introduzione ai dashboard

I dashboard sono strumenti visivi che raccontano la storia contenuta nel set di dati e consentono agli utenti di comprendere rapidamente il quadro più ampio. Queste sono raccolte di diverse trame legate insieme in un layout a griglia come mostrato di seguito e fanno parte della storia. Quindi, possiamo dire che i dashboard sono un modo comune per presentare preziose informazioni in un unico posto.

Fonte immagine: Autore

Librerie per grafici interattivi

I grafici creati utilizzando Matplotlib e Seaborn sono grafici statici, ovvero un utente non può aggiornarli senza aggiornare il codice e rieseguirlo. Pertanto, è possibile utilizzare librerie di grafici interattivi: D3 e chart.js, ma si aspettano che l'utente abbia una conoscenza preliminare di JavaScript.

Attualmente, esistono due popolari librerie Open Source per la creazione di visualizzazioni interattive: Bokeh e Plotly. In questo articolo, faremo un semplice tutorial usando Bokeh.

Bokeh è una libreria open source per la visualizzazione interattiva che esegue il rendering della grafica utilizzando HTML e JavaScript. È un potente strumento EDA che può essere utilizzato anche per creare dashboard e applicazioni basate sul Web.

Bokeh supporta grafici a linee, grafici a torta, grafici a barre e grafici a barre in pila, istogrammi e grafici a dispersione. L'origine dati viene convertita in un file JSON che diventa un input per BokehJS (libreria JavaScript) e questo rende possibile il rendering di grafici e visualizzazioni interattive supportati dal browser.

La libreria Bokeh richiede una conoscenza di base del codice JavaScript per scrivere funzioni personalizzate per aggiornare i grafici in base agli input dell'utente. Per questo articolo adatto ai principianti, ho usato una libreria chiamata Panda-Bokeh che è più facile da usare per i neofiti e consente il rendering delle stesse trame Bokeh attraverso il suo supporto back-end per Panda. Per le visualizzazioni avanzate, è sempre possibile utilizzare la libreria Bokeh per definire visualizzazioni personalizzate.

È necessaria una singola riga di codice per ogni trama interattiva. Dimostrerò la funzionalità della libreria Pandas-Bokeh e come possiamo utilizzarla per creare un semplice dashboard dal set di dati.

Creazione di una dashboard interattiva utilizzando Bokeh

Iniziamo installando prima la libreria usando pip from PyPI.

pip installa pandas_bokeh

Successivamente, importiamo panda e librerie numpy. Ricorda di importarli prima della libreria pandas_bokeh.

import numpy as np import pandas as pd import pandas_bokeh

Abbiamo anche bisogno del seguente comando per visualizzare i grafici di output nel notebook

# Incorporamento di grafici in Jupyter/Colab Notebook pandas_bokeh.output_notebook()

Per visualizzare i grafici in un HTML separato, utilizzare questo comando-

# per esportare grafici come HTML pandas_bokeh.output_file(nomefile)

Per questo tutorial per principianti, stiamo generando un semplice set di dati casuali utilizzando la libreria NumPy e utilizzandolo per creare la dashboard.

Supponiamo che il set di dati contenga campioni di valori misurati da 4 sensori per un periodo di 12 mesi e che ciascun valore abbia un numero di identificazione univoco e una categoria ad esso associata. Ciò significa che ci sono un totale di 6 funzioni, ad esempio 'id', 'month', 'sensor_1', 'sensor_2', 'sensor_3' e 'category'. Per semplicità, stiamo considerando solo 15 campioni o righe di dati.

Per generare questo set di dati, utilizziamo la funzione np.random dalla libreria NumPy come segue. (Link alla documentazione ufficiale per NumPy: https://numpy.org/doc/stable/reference/random/generator.html)

#definisci la variabile categoriale category = ['A','B','C'] #imposta un seme casuale per rendere riproducibile il dataset np.random.seed(42) #crea un dataset df_random = pd.DataFrame({ 'id ': np.arange(0, 15), 'mese':np.random.randint(1, 12, 15), 'sensor_1': np.random.uniform(0, 1,15), 'sensor_2': np .random.uniform(10, 15, 15), 'sensor_3': np.random.randint(0, 20, 15), 'category': np.random.choice(category, 15, p=[0.2, 0.4, 0.4]) })

#imposta l'indice sulla colonna id df_random=df_random.set_index('id')

Controllo della forma del dataframe

df_random.shape >>(15, 5)

Abbiamo generato con successo un set di dati con 15 campioni e 6 caratteristiche.

Diamo un'occhiata ad alcuni valori di esempio del set di dati.

df_random.head()

Ora possiamo tracciare il grafico in una dashboard. A scopo dimostrativo, tracciamo i seguenti grafici utilizzando la libreria pandas_bokeh-

1. Trama a linee

2. Grafico a barre

3. Grafico a barre in pila

4. Trama a dispersione

5. Grafico a torta

6. Istogramma

# Plot1 - Grafico lineare p_line= df_random.groupby(['month']).mean().plot_bokeh(kind="line",y="sensor_2",color='#d01c8b',plot_data_points=True,show_figure=False ) # Plot2- Barplot p_bar = df_random.groupby(['month']).mean().plot_bokeh(kind="bar",colormap=colors,show_figure=False)

# Plot3- grafico a barre in pila df_sensor=df_random.drop(['month'],axis=1) p_stack=df_sensor.groupby(['category']).mean().plot_bokeh(kind='barh', stacked=True ,colormap=colori,show_figure=False)

#Plot4- Grafico a dispersione p_scatter = df_random.plot_bokeh(kind="scatter", x="month", y="sensor_2",category="category",colormap=colors,show_figure=False) #Plot5- Grafico a torta p_pie= df_random .groupby(['category']).mean().plot_bokeh.pie(y='sensor_1',colormap=colori,show_figure=False)

#Plot6- Histogram p_hist=df_sensor.plot_bokeh(kind='hist', histogram_type="stacked",bins=6,colormap=colors, show_figure=False)

L'esecuzione di questi comandi genererà i grafici ma quelli non verranno visualizzati poiché abbiamo impostato 'show_figure=False'. Poiché vogliamo che questi grafici vengano visualizzati nella dashboard, abbiamo utilizzato questa opzione.

Successivamente, impostiamo il layout della griglia per il dashboard utilizzando il comando "pandas_bokeh.plot_grid". Tracciamo i primi tre grafici nella prima riga e i restanti tre nella seconda riga.

#Crea dashboard con layout a griglia: pandas_bokeh.plot_grid([[p_line, p_bar,p_stack],[p_scatter, p_pie,p_hist]], plot_width=400)

Il cruscotto ha questo aspetto:

Fonte immagine: Autore

Tutti questi grafici sono interattivi e consentono di utilizzare le funzioni di passaggio del mouse e zoom, nonché le categorie di filtri.

Conclusione

Attraverso questo articolo, abbiamo visto come generare direttamente grafici Bokeh interattivi all'interno di Pandas e impostare una semplice dashboard utilizzando la libreria Pandas-Bokeh. La libreria Pandas-Bokeh è estremamente facile da usare per i principianti con una conoscenza di base della sintassi di plottaggio dei panda. Questa libreria può sicuramente aiutare a rendere le visualizzazioni più presentabili senza la necessità di apprendere alcun codice JavaScript aggiuntivo per la generazione di grafici interattivi. Spero che ti sia piaciuto esplorare questa libreria tanto quanto me!

Il codice per questo tutorial è disponibile su my GitHub repository e il taccuino per questo è accessibile su my Kaggle profilo.

Autore Bio:

Devashree ha una laurea in Informatica in Germania e un background in Data Science. In qualità di ingegnere, le piace lavorare con i numeri e scoprire intuizioni nascoste in diversi set di dati di diversi settori per creare splendide visualizzazioni per cercare di risolvere interessanti problemi di apprendimento automatico del mondo reale.

Nel tempo libero ama cucinare, leggere e scrivere, scoprire nuove librerie Python-Machine Learning o partecipare a concorsi di programmazione.

Puoi seguirla LinkedIn, GitHub, Kaggle, Medio, Twitter.

I media mostrati in questo articolo su Interactive Dashboard utilizzando Bokeh non sono di proprietà di Analytics Vidhya e sono utilizzati a discrezione dell'autore.

Fonte: https://www.analyticsvidhya.com/blog/2021/09/building-an-interactive-dashboard-using-bokeh-and-pandas/