Distribuire un'app web con il tutorial Bokeh

Nei nostri precedenti tutorial su Bokeh, abbiamo visto come muovere i primi passi con Bokeh e creare alcuni grafici a dispersione e linee di base. Oltre alle sue vaste possibilità di visualizzazione dei dati, Bokeh offre anche un modo per ospitare app sui propri server abilitando una connessione tra Python e il browser.   

Inizieremo creando l'app ed eseguendola sui server Bokeh per condividerla con i colleghi. Per maggiori informazioni su come funziona il server Bokeh, dai un'occhiata alla documentazione di Bokeh. 

Nozioni di base sul server Bokeh

Bokeh converte gli oggetti (come grafici, widget, assi e quasi tutto ciò che crei) in formato JSON.

Il server Bokeh converte il codice Python che scrivi in un documento JSON. Il documento JSON viene renderizzato in JavaScript usando la libreria client di Bokeh (BokehJS) così che gli utenti possano visualizzare l'applicazione nel browser.

Il vantaggio di Bokeh è che gestisce la parte JavaScript. Quindi, non hai bisogno di conoscere JavaScript per creare un'app! L'immagine seguente riassume come funziona il server Bokeh.

Fonte: The Bokeh Server

Come creare ed eseguire un'applicazione Bokeh

La struttura generale di un'applicazione Bokeh è:

1. Crea grafici e widget: è il primo passo per creare un'app Bokeh. Dovresti avere già in mente il grafico che vuoi mostrare.
2. Definisci la funzione di callback: una funzione di callback indica all'applicazione come rispondere all'interazione dell'utente. Ad esempio, quando selezioni un ticker diverso in un grafico a serie temporali, il grafico deve aggiornarsi con i nuovi dati.
3. Crea i layout: i layout ci aiutano a presentare i grafici in modo efficace ed esteticamente gradevole.

Creare un'app web Bokeh per l'analisi del mercato azionario

Descrizione del progetto

In questa sezione ti mostreremo come creare una semplice app web e distribuirla per l'uso da parte degli analisti finanziari.

Immagina di lavorare per Big Money Inc — una società leader nella gestione patrimoniale. La tua manager ha sentito i colleghi elogiare le tue competenze in Python. Ora vuole che tu crei un'app sul mercato azionario che gli analisti finanziari dell'azienda useranno per confrontare due titoli. La tua manager ritiene che gli analisti dell'azienda possano risparmiare tempo confrontando rapidamente qualsiasi titolo con un titolo simile dello stesso settore. Ad esempio, possono confrontare il titolo Apple con quello di Microsoft e scegliere il migliore per creare i portafogli dei clienti. Il confronto dovrebbe includere misure di base come:

• Grafici dell'andamento del prezzo di chiusura
• Correlazione
• Media (rendimento atteso)
• Deviazione standard (rischio atteso)

Deve esserci un modo per personalizzare il periodo di analisi in modo interattivo. Ad esempio, un utente dovrebbe poter confrontare l'andamento di due titoli nell'ultima settimana, mese, anno o in qualsiasi periodo preferisca. Devi assicurarti che l'app sia facilmente disponibile per tutti gli utenti dell'azienda. Questo significa che devi distribuirla usando un servizio cloud.

Prerequisiti

1. Conoscenza di base di Bokeh.
2. Un po' di conoscenza di Python.
3. Installazione dei pacchetti indicati nel nostro tutorial per iniziare con Bokeh.

Panoramica dell'app web sul mercato azionario

L'app web fornirà una soluzione al caso di studio in finanza descritto sopra. Questa app consente agli utenti di selezionare due ticker azionari e visualizzare le loro statistiche descrittive (come media e deviazione standard) sia dei prezzi che dei rendimenti, i grafici di correlazione e i grafici dell'andamento dei prezzi per i titoli selezionati. L'interattività è data dalla possibilità di scegliere una combinazione di diversi ticker e di diversi periodi di tempo (nei grafici dell'andamento dei prezzi). L'app web avrà questo aspetto:

Creare il progetto Bokeh dell'app web sul mercato azionario

1. Crea una cartella di progetto e chiamala SelectStock.

2. Apri la cartella del progetto e crea un file chiamato main.py.

3. Salva una copia dei dati di borsa nella cartella del progetto come “all_stocks_5yr.csv”. 

Salva una copia dei ticker azionari. Il file ticker.py contiene l'elenco dei ticker. Ci sono solo 505 ticker azionari, poiché includere l'intero elenco nello script main.py può rendere il codice ingombrante. È opportuno salvare l'elenco dei ticker in un file separato e richiamarlo quando necessario.

Apri il file main.py nel tuo editor di codice preferito, come Spyder, Atom o Sublime Text.

Importare i pacchetti

Scrivi il seguente codice nel file main.py. Questo codice importa i pacchetti e i ticker necessari per creare l'app web:

# Import the required packages
import pandas as pd
from functools import lru_cache
from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, PreText, Select, Div
from bokeh.plotting import figure

# load the list of tickers
import tickers
tickers = tickers.tickers
Offerto da

Leggere e caricare i dati 

Scrivi una funzione per evitare che un ticker venga confrontato con se stesso:

# Create a function to ensure that a ticker is not compared to itself
def foo(val, lst):
return [x for x in lst if x != val]
Add the following code to read and load data for the webapp:
# A function to read and load data
# Note the use of @lru_cache() decorator is to cache the data and speed up reloads
@lru_cache()
def load_ticker(ticker):
data = pd.read_csv('all_stocks_5yr.csv', parse_dates=['date'])
data = data.set_index('date')
data = data[data['Name'] == ticker]
return pd.DataFrame({ticker: data.close, ticker+'_returns': data.close.diff()})

# A function to create a dataframe for the selected tickers
@lru_cache()
def get_data(t1, t2):
df1 = load_ticker(t1)
df2 = load_ticker(t2)
data = pd.concat([df1, df2], axis=1)
data = data.dropna()
data['t1'] = data[t1]
data['t2'] = data[t2]
data['t1_returns'] = data[t1+'_returns']
data['t2_returns'] = data[t2+'_returns']
return data

# Put data into a ColumnDataSource
source = ColumnDataSource(
data=dict(date=[], t1=[], t2=[], t1_returns=[], t2_returns=[]))Offerto da

Creare i widget

# set up widgets
stats = PreText(text='', width=500)
ticker1 = Select(value='AAPL', options=foo('GOOG', tickers))
ticker2 = Select(value='GOOG', options=foo('AAPL', tickers))
Offerto da

I widget consentono all'utente di selezionare il primo e il secondo ticker per il confronto. Una volta selezionati i ticker, Bokeh può creare i grafici.

Creare i grafici

# set up plots
tools = 'pan,wheel_zoom,xbox_select,reset'

corr = figure(width=400, height=350,
              tools='pan,wheel_zoom,box_select,reset', output_backend='webgl')
corr.diamond('t1_returns', 't2_returns', size=2, source=source, color="red",
            selection_color="orange", alpha=0.6, nonselection_alpha=0.1, selection_alpha=0.4)


time_series1 = figure(width=900, height=200, tools=tools,
                      x_axis_type='datetime', active_drag="xbox_select", output_backend='webgl')
time_series1.line('date', 't1', source=source, color='orange')
time_series2 = figure(width=900, height=200, tools=tools,
                      x_axis_type='datetime', active_drag="xbox_select", output_backend='webgl')
time_series2.x_range = time_series1.x_range
time_series2.line('date', 't2', source=source, color='green')Offerto da

In questo codice, definiamo innanzitutto gli strumenti che accompagneranno i grafici. Il grafico di correlazione è il primo grafico, con la funzione figure() che specifica width = 400 e height = 350. Il grafico di correlazione usa marcatori a diamante.

Usiamo il glifo line per creare i grafici a serie temporali dei ticker. L'intervallo delle serie temporali è uguale per consentire un confronto corretto.

# Define callbacks
def change_ticker1(attrname, old, new):
ticker2.options = foo(new, tickers)
update()

def change_ticker2(attrname, old, new):
ticker1.options = foo(new, tickers)
update()

def update(selected=None):
t1, t2 = ticker1.value, ticker2.value

df = get_data(t1, t2)
data = df[['t1', 't2', 't1_returns', 't2_returns']]
source.data = data

update_stats(df, t1, t2)

corr.title.text = '%s returns vs. %s returns' % (t1, t2)
    time_series1.title.text, time_series2.title.text = t1, t2

def update_stats(data, t1, t2):
stats.text = str(data[[t1, t2, t1+'_returns', t2+'_returns']].describe())

ticker1.on_change('value', change_ticker1)
ticker2.on_change('value', change_ticker2)

def selection_change(attrname, old, new):
t1, t2 = ticker1.value, ticker2.value
data = get_data(t1, t2)
selected = source.selected.indices
if selected:
    data = data.iloc[selected, :]
update_stats(data, t1, t2)

source.selected.on_change('indices', selection_change)Offerto da

Nella sezione dei callback, la prima e la seconda funzione definiscono rispettivamente il callback per il ticker 1 e per il ticker 2.

La funzione update() aggiorna i grafici ogni volta che l'utente seleziona una combinazione diversa di ticker; la funzione update_stats() aggiorna le statistiche quando l'utente seleziona un nuovo set di ticker; e la funzione selection_change() aggiorna l'intera app quando l'utente aggiorna i ticker.

Impostare il layout

Il primo passo è dare all'app un titolo che fornisca istruzioni all'utente su come interagire con l'app web. La funzione Div ti consente di fornire il testo e definire altezza e larghezza, insieme ad altre personalizzazioni.

# set up layout
# Add a title message to the app
div = Div(
    text="""
        <p>Select two Stocks to compare key Statistics:</p>
        """,
width=900,
height=30,
)
# Create layouts
app_title = div
widgets = column(ticker1, ticker2, stats)
main_row = row(widgets, corr)
series = column(time_series1, time_series2)
layout = column(app_title, main_row, series)Offerto da

Il layout dell'app combina le funzioni column e row.

Per prima cosa, un titolo viene posizionato in alto. La riga principale è impilata sotto (la riga principale contiene le statistiche descrittive e il grafico di correlazione). La riga successiva contiene il primo grafico a serie temporali (per il ticker 1) e l'ultima riga contiene il grafico a serie temporali per il secondo ticker.

Inizializzare l'app

Questo passaggio inizializza l'app web quando viene richiamata sul server. 

# initialize the app
update()
curdoc().add_root(layout)
curdoc().title = "Compare Stocks"
Offerto da

Distribuire l'app web

Per testare la tua app web, puoi distribuirla usando la tua macchina locale. Per farlo, apri semplicemente Anaconda Prompt o il terminale che preferisci. Spostati nella directory che contiene la cartella del progetto "SelectStock". Puoi farlo digitando il seguente comando:

cd "System path to where the SelectStock folder is contained"Offerto da

es. cd "C:\Users\... \SelectStock"

Digita il seguente comando per eseguire l'app web:

bokeh serve --show SelectStockOfferto da

In alternativa, puoi entrare nella cartella SelectStock ed eseguire il file main.py:

Bokeh serve --show main.py
Offerto da

Questo avvia l'app web nel browser predefinito come:

http://localhost:5006/SelectStock oppure

http://localhost:5006/main

Stai usando il Bokeh Server per eseguire e distribuire la tua app web.

Puoi anche distribuire l'app web usando servizi come Heroku.

Conclusione

In questo tutorial hai imparato le basi per costruire e distribuire le tue applicazioni Bokeh sulla tua macchina locale. Il tutorial ti mostra come mettere insieme tutto ciò che hai imparato per costruire un'app pratica, divertente e interattiva che entusiasmerà gli utenti.

Il modo migliore per migliorare velocemente le tue competenze di coding è costruire progetti come questo dopo aver appreso un concetto o uno strumento. Questo approccio pratico ti assicura di comprendere bene uno strumento o una competenza e di poter mostrare ai futuri datori di lavoro cosa hai fatto.

Se vuoi saperne di più su Bokeh, puoi leggere questo libro. Oppure, meglio ancora, prova il corso di DataCamp Interactive Visualization with Bokeh. Fornisce dettagli su Bokeh e su come creare grafici più avanzati. Puoi spingerti oltre e imparare a costruire le tue app web Bokeh usando dati in tempo reale.