Tutoriel : déployer une application web avec Bokeh

Dans nos précédents tutoriels Bokeh, nous avons vu comment faire vos premiers pas avec Bokeh et créer des nuages de points et des courbes simples. Au-delà de ses vastes possibilités de visualisation de données, Bokeh offre aussi un moyen d’héberger des applications sur serveur en établissant une connexion entre Python et le navigateur.   

Nous allons commencer par créer l’application et l’exécuter sur des serveurs Bokeh pour la partager avec vos collègues. Pour en savoir plus sur le fonctionnement du serveur Bokeh, consultez la documentation Bokeh. 

Notions de base sur le serveur Bokeh

Bokeh convertit les objets (graphiques, widgets, axes, et quasiment tout ce que vous créez) au format JSON.

Le serveur Bokeh convertit le code Python que vous écrivez en un document JSON. Ce document JSON est ensuite interprété en JavaScript via la bibliothèque cliente de Bokeh (BokehJS) pour afficher l’application dans le navigateur.

L’avantage de Bokeh est qu’il prend en charge la partie JavaScript. Vous n’avez donc pas besoin de connaître JavaScript pour créer une application ! L’illustration suivante résume le fonctionnement du serveur Bokeh.

Source : The Bokeh Server

Comment créer et exécuter une application Bokeh

La structure générale d’une application Bokeh est la suivante :

1. Créer des graphiques et des widgets : première étape de toute application Bokeh. Définissez à l’avance le ou les graphiques que vous souhaitez présenter.
2. Définir les fonctions de rappel (callbacks) : elles indiquent à l’application comment réagir aux interactions utilisateur. Par exemple, lorsque vous sélectionnez un autre ticker sur une courbe temporelle, le graphique doit se mettre à jour avec les nouvelles données.
3. Créer des mises en page : les layouts permettent de présenter les graphiques de manière efficace et esthétique.

Créer une application web Bokeh d’analyse boursière

Description du projet

Dans cette section, nous allons montrer comment créer une application web simple et la déployer pour les analystes financiers.

Imaginez que vous travaillez pour Big Money Inc — un leader de la gestion d’actifs. Votre manager a entendu vos collègues vanter vos compétences en Python. Elle souhaite désormais que vous créiez une application boursière que les analystes financiers de l’entreprise utiliseront pour comparer deux actions. Elle est convaincue qu’ils gagneront du temps en comparant rapidement n’importe quelle action avec une action similaire du même secteur. Par exemple, ils pourront comparer Apple à Microsoft et choisir la meilleure valeur pour construire les portefeuilles clients. La comparaison doit inclure des indicateurs de base, tels que :

• Courbes d’évolution des cours de clôture
• Corrélation
• Moyenne (rendement attendu)
• Écart-type (risque attendu)

La période d’analyse doit être paramétrable de manière interactive. Par exemple, l’utilisateur doit pouvoir comparer la performance de deux actions sur la dernière semaine, le dernier mois, la dernière année, ou toute période de son choix. Vous devez veiller à ce que l’application soit facilement accessible à tous les utilisateurs de l’entreprise. Cela implique de la déployer via un service cloud.

Prérequis

1. Compréhension de base de Bokeh.
2. Quelques notions de Python.
3. Installation des packages listés dans notre tutoriel Bien démarrer avec Bokeh.

Vue d’ensemble de l’application web boursière

L’application web répond au cas d’usage en finance décrit ci-dessus. Elle permet de sélectionner deux tickers et de visualiser leurs statistiques descriptives (telles que la moyenne et l’écart-type) sur les prix et les rendements, des graphiques de corrélation, ainsi que des courbes d’évolution des prix pour les valeurs choisies. L’interactivité repose sur la sélection de différentes combinaisons de tickers et de périodes (sur les courbes de prix). L’application ressemblera à ceci :

Créer le projet Bokeh de l’application boursière

1. Créez un dossier de projet et nommez-le SelectStock.

2. Ouvrez le dossier de projet et créez un fichier nommé main.py.

3. Enregistrez une copie des données boursières dans le dossier du projet sous le nom « all_stocks_5yr.csv ». 

Enregistrez aussi une copie des tickers. Le fichier ticker.py contient la liste des tickers. Il n’y a que 505 tickers, car inclure la liste complète dans le script principal main.py alourdirait le code. Il est préférable d’enregistrer cette liste dans un fichier séparé et de l’appeler au besoin.

Ouvrez le fichier main.py dans votre éditeur de code favori comme Spyder, atom ou Sublime Text.

Importer les packages

Saisissez le code suivant dans main.py. Il importe les packages et les tickers nécessaires à la création de l’application 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

Lire et charger les données 

Écrivez une fonction pour éviter qu’un ticker ne soit comparé à lui-même :

# 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=[]))

Créer les widgets

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

Ces widgets permettent à l’utilisateur de sélectionner le premier et le second ticker à comparer. Une fois les tickers choisis, Bokeh peut générer les graphiques.

Créer les graphiques

# 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')

Dans ce code, nous définissons d’abord les outils associés aux graphiques. Le premier graphique est celui de corrélation, avec la fonction figure() paramétrée avec width = 400 et height = 350. Le nuage de points de corrélation utilise des losanges.

Nous utilisons le glyphe line pour tracer les séries temporelles des tickers. Les axes des séries temporelles partagent la même plage pour permettre une comparaison pertinente.

# 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)

Dans la section des callbacks, les deux premières fonctions définissent respectivement les rappels pour le ticker 1 et le ticker 2.

La fonction update() met à jour les graphiques à chaque nouvelle combinaison de tickers ; la fonction update_stats() met à jour les statistiques lorsque l’utilisateur sélectionne un nouvel ensemble de tickers ; et la fonction selection_change() met à jour l’ensemble de l’application lorsque les tickers changent.

Configurer la mise en page

Première étape : donner un titre à l’application qui indique à l’utilisateur comment interagir avec l’interface. La fonction Div permet de définir ce texte ainsi que la hauteur, la largeur et d’autres personnalisations.

# 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)

La mise en page de l’application combine les fonctions column et row.

D’abord, un titre est placé en haut. La ligne principale est empilée en dessous (elle contient les statistiques descriptives et le graphique de corrélation). La ligne suivante contient la première série temporelle (pour le ticker 1), et la dernière ligne contient la série temporelle pour le second ticker.

Initialiser l’application

Cette étape initialise l’application web lors de son appel sur le serveur. 

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

Déployer l’application web

Pour tester votre application web, vous pouvez la déployer en local. Pour cela, ouvrez simplement Anaconda Prompt ou le terminal de votre choix. Placez-vous dans le répertoire contenant le dossier de projet « SelectStock ». Tapez la commande suivante :

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

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

Tapez la commande suivante pour exécuter l’application web :

bokeh serve --show SelectStock

Vous pouvez aussi vous déplacer dans le dossier SelectStock et exécuter le fichier main.py :

Bokeh serve --show main.py

Cela lance l’application web dans le navigateur par défaut via :

http://localhost:5006/SelectStock ou

http://localhost:5006/main

Vous utilisez le serveur Bokeh pour exécuter et déployer votre application web.

Vous pouvez également déployer l’application via des services comme Heroku.

Conclusion

Dans ce tutoriel, vous avez appris les fondamentaux pour créer et déployer vos propres applications Bokeh en local. Nous avons rassemblé les éléments clés pour construire une application pratique, ludique et interactive qui séduira vos utilisateurs.

La meilleure façon de progresser rapidement en code est de réaliser des projets comme celui-ci après avoir appris un concept ou un outil. Cette approche concrète garantit une bonne maîtrise d’un outil ou d’une compétence et vous permet de montrer à de futurs employeurs ce que vous avez réalisé.

Pour aller plus loin avec Bokeh, vous pouvez lire ce livre. Ou, mieux encore, suivez le cours DataCamp Interactive Visualization with Bokeh. Il détaille Bokeh et explique comment créer des graphiques plus avancés. Vous pouvez même apprendre à construire vos propres applications web Bokeh avec des données en temps réel.