In unseren bisherigen Bokeh-Tutorials hast du gelernt, wie du deine ersten Schritte mit Bokeh machst und einfache Scatter- und Liniendiagramme erstellst. Neben den vielfältigen Möglichkeiten zur Datenvisualisierung bietet Bokeh auch die Option, Apps auf Servern zu hosten, indem eine Verbindung zwischen Python und dem Browser hergestellt wird.
Wir erstellen zunächst die App und lassen sie auf Bokeh-Servern laufen, um sie mit Kolleginnen und Kollegen zu teilen. Mehr Informationen dazu, wie der Bokeh-Server arbeitet, findest du in der Bokeh-Dokumentation.
Grundlagen des Bokeh-Servers
Bokeh konvertiert Objekte (wie Plots, Widgets, Achsen und nahezu alles, was du erstellst) in JSON-Format.
Der Bokeh-Server wandelt deinen Python-Code in ein JSON-Dokument um. Dieses JSON-Dokument wird im Browser mithilfe von Bokehs Client-Bibliothek (BokehJS) in JavaScript gerendert, sodass Nutzer die Anwendung sehen können.
Der Vorteil von Bokeh: Der JavaScript-Teil wird für dich übernommen. Du brauchst also keine Vorkenntnisse in JavaScript, um eine App zu bauen! Die folgende Grafik fasst zusammen, wie der Bokeh-Server funktioniert.
Quelle: The Bokeh Server
So baust und startest du eine Bokeh-Anwendung
Die allgemeine Struktur einer Bokeh-Anwendung ist:
- Plots und Widgets erstellen: Das ist der erste Schritt beim Aufbau einer Bokeh-App. Du solltest vorab wissen, welchen Plot du zeigen willst.
- Callback-Funktion definieren: Eine Callback-Funktion legt fest, wie die Anwendung auf Interaktionen reagiert. Wenn du z. B. in einem Zeitreihendiagramm ein anderes Tickersymbol auswählst, sollte sich der Plot mit den neuen Daten aktualisieren.
- Layouts erstellen: Layouts helfen, Plots übersichtlich und ansprechend zu präsentieren.
Eine Bokeh-Web-App zur Aktienanalyse erstellen
Projektbeschreibung
In diesem Abschnitt zeigen wir dir, wie du eine einfache Web-App erstellst und so bereitstellst, dass Finanzanalysten sie nutzen können.
Stell dir vor, du arbeitest bei Big Money Inc — einem führenden Vermögensverwalter. Deine Managerin hat gehört, wie Kolleginnen und Kollegen deine Python-Kompetenzen loben. Jetzt möchte sie, dass du eine Aktien-App baust, mit der die Finanzanalysten des Unternehmens zwei Aktien miteinander vergleichen können. Sie ist überzeugt, dass Analysten Zeit sparen, wenn sie jede beliebige Aktie schnell mit einer ähnlichen Aktie aus derselben Branche vergleichen können. So könnten sie zum Beispiel die Apple-Aktie mit Microsoft vergleichen und die bessere Aktie für die Portfolios der Kundschaft auswählen. Der Vergleich sollte grundlegende Kennzahlen umfassen, etwa:
- Kursverlaufsdiagramme (Schlusskurse)
- Korrelation
- Mittelwert (erwartete Rendite)
- Standardabweichung (erwartetes Risiko)
Der Analysezeitraum sollte sich interaktiv anpassen lassen. Nutzer sollten zum Beispiel die Performance zweier Aktien in der vergangenen Woche, im letzten Monat, im letzten Jahr oder in einem beliebigen Zeitraum vergleichen können. Stelle außerdem sicher, dass die App für alle im Unternehmen leicht zugänglich ist. Das heißt, du musst sie über einen Cloud-Dienst bereitstellen.
Voraussetzungen
- Grundverständnis von Bokeh.
- Etwas Python-Kenntnisse.
- Installation der Pakete aus unserem Getting Started with Bokeh Tutorial.
Überblick über die Stock-Market-Web-App
Die Web-App liefert eine Lösung für die oben skizzierte Finance-Case-Study. Nutzer können zwei Tickersymbole auswählen und deren beschreibende Statistiken (z. B. Mittelwert und Standardabweichung) für Kurse und Renditen, Korrelationsplots sowie Kursverlaufsdiagramme ansehen. Die Interaktivität entsteht durch die freie Kombination verschiedener Ticker und Zeiträume (in den Kursdiagrammen). Die Web-App sieht so aus:
Das Bokeh-Projekt für die Stock-Market-Web-App erstellen
1. Lege einen Projektordner an und nenne ihn SelectStock.
2. Öffne den Projektordner und erstelle die Datei main.py.
3. Speichere eine Kopie der Börsendaten im Projektordner unter “all_stocks_5yr.csv”.
Speichere außerdem die Tickerliste. Die Datei ticker.py enthält die Liste der Ticker. Es sind nur 505 Ticker enthalten, da der komplette Listeninhalt in main.py den Code unübersichtlich machen würde. Es ist sinnvoll, die Liste in einer separaten Datei zu speichern und bei Bedarf darauf zuzugreifen.
Öffne die Datei main.py in deinem bevorzugten Editor wie Spyder, atom oder Sublime Text.
Pakete importieren
Tippe folgenden Code in die Datei main.py. Dieser Code importiert die Pakete und Ticker, die du für die Web-App brauchst:
# 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
Daten einlesen und laden
Schreibe eine Funktion, die verhindert, dass ein Ticker mit sich selbst verglichen wird:
# 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=[]))Widgets erstellen
# set up widgets
stats = PreText(text='', width=500)
ticker1 = Select(value='AAPL', options=foo('GOOG', tickers))
ticker2 = Select(value='GOOG', options=foo('AAPL', tickers))
Mit den Widgets können Nutzer das erste und zweite Tickersymbol für den Vergleich auswählen. Sobald die Ticker gesetzt sind, kann Bokeh die Plots erstellen.
Plots erstellen
# 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')In diesem Code definieren wir zunächst die Tools, die die Plots begleiten. Der Korrelationsplot ist der erste Plot; die Funktion figure() setzt width = 400 und height = 350. Er verwendet Diamantmarker.
Für die Zeitreihenplots der Ticker nutzen wir das Line-Glyph. Die Zeitachsenbereiche sind identisch, um einen sauberen Vergleich zu ermöglichen.
# 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)Im Callback-Teil definieren die ersten beiden Funktionen die Reaktionen für Ticker 1 bzw. Ticker 2.
Die Funktion update() aktualisiert die Plots, sobald Nutzer eine andere Tickerkombination wählen; update_stats() aktualisiert die Statistiken bei neuen Tickern; und selection_change() aktualisiert die gesamte App, wenn die Auswahl geändert wird.
Layout einrichten
Als Erstes bekommt die App einen Titel mit einer kurzen Anleitung zur Interaktion. Mit der Funktion Div kannst du den Text sowie Höhe und Breite und weitere Eigenschaften festlegen.
# 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)Das App-Layout kombiniert die Funktionen column und row.
Oben steht ein Titel. Darunter folgt die Hauptzeile (mit den beschreibenden Statistiken und dem Korrelationsplot). In der nächsten Zeile befindet sich der erste Zeitreihenplot (für Ticker 1), in der letzten der Zeitreihenplot für den zweiten Ticker.
App initialisieren
Dieser Schritt initialisiert die Web-App, wenn sie auf dem Server gestartet wird.
# initialize the app
update()
curdoc().add_root(layout)
curdoc().title = "Compare Stocks"
Die Web-App bereitstellen
Zum Testen kannst du die Web-App auf deinem lokalen Rechner bereitstellen. Öffne dazu Anaconda Prompt oder ein Terminal deiner Wahl. Wechsle in das Verzeichnis, das den Projektordner "SelectStock" enthält. Das geht mit folgendem Befehl:
cd "System path to where the SelectStock folder is contained"z. B. cd "C:\Users\... \SelectStock"
Starte die Web-App mit:
bokeh serve --show SelectStockAlternativ kannst du in den Ordner SelectStock wechseln und die Datei main.py ausführen:
Bokeh serve --show main.py
Dadurch öffnet sich die Web-App im Standardbrowser unter:
http://localhost:5006/SelectStock oder
Du nutzt den Bokeh-Server, um deine Web-App lokal auszuführen und bereitzustellen.
Du kannst die Web-App auch über Dienste wie Heroku deployen.
Fazit
In diesem Tutorial hast du die Grundlagen kennengelernt, um Bokeh-Anwendungen auf deinem lokalen Rechner zu erstellen und bereitzustellen. Du hast gesehen, wie du dein Wissen zu einer praktischen, interaktiven App zusammensetzt, die Nutzer begeistert.
Am schnellsten entwickelst du deine Coding-Kompetenzen, wenn du nach dem Lernen eines Konzepts oder Tools Projekte wie dieses umsetzt. Dieser praxisnahe Ansatz sorgt dafür, dass du ein Tool wirklich verstehst und potenziellen Arbeitgebern zeigen kannst, woran du gearbeitet hast.
Wenn du mehr über Bokeh erfahren willst, lies dieses Buch. Oder noch besser: Probiere DataCamps Kurs Interactive Visualization with Bokeh aus. Er liefert Details zu Bokeh und zeigt, wie du fortgeschrittene Plots erstellst. Außerdem lernst du, eigene Bokeh-Web-Apps mit Echtzeitdaten zu bauen.
