Im ersten Tutorial zu Datenvisualisierung mit Bokeh hast du gelernt, Visualisierungen mit Glyphs von Grund auf zu bauen. Jetzt kannst du dieses Konzept erweitern und Plots aus unterschiedlichen Datenstrukturen wie Arrays und DataFrames erstellen. In diesem Tutorial lernst du, wie du Daten mit NumPy-Arrays, Pandas-DataFrames und ColumnDataSource in Bokeh darstellst. Die ColumnDataSource ist das Herzstück von Bokeh: Sie macht es möglich, Daten über mehrere Plots und Widgets hinweg zu teilen.
Bokeh-Plots aus NumPy-Arrays
Linienplots aus NumPy-Arrays erstellen
# Import packages
import numpy as np
import random
from bokeh.io import output_file, show
from bokeh.plotting import figure
# Create an array
x_array = np.array([10,20,30,40,50,60])
y_array = np.array([50,60,70,80,90,100])
# Create a line plot
plot = figure()
plot.line(x_array, y_array)
# Output plot
show(plot)

Streudiagramme aus NumPy-Arrays erstellen
# Import packages
import numpy as np
import random
from bokeh.io import output_file, show
from bokeh.plotting import figure
# Create arrays
x_arr = np.array([10,11,12,13,14,15,16])
y_arr = np.array([17,18,19,20,21,22,23])
# Create plot
plot = figure(title = "Scatter plot", x_axis_label = "Label name of x axis", y_axis_label ="Label name of y axis")
plot.circle(x_arr,y_arr, size = 30, alpha = 0.5)
# show plot
show(plot)
Das ergibt das folgende Diagramm:

Plots mit Pandas-DataFrames erstellen
Linien mit Pandas-DataFrames plotten
Die Daten in diesem Beispiel stammen von Kaggle. Der Datensatz enthält alle Aktien des S&P-500-Index für fünf Jahre bis Dezember 2018. Die Datei enthält sieben Spalten:
- Date – Datum im Format jj-mm-tt
- Open – Eröffnungskurs der Aktie
- High – Tageshöchstkurs
- Low – Tagestiefstkurs
- Close – Schlusskurs des Tages
- Volume – An diesem Tag gehandelte Stückzahl
- Name – Ticker der Aktie
Wir möchten den Trend der Google-Aktie über den Fünfjahreszeitraum sehen. Zuerst laden wir die Daten mit Pandas und schauen uns dann die ersten fünf Zeilen des DataFrames an.
# Import packages
import pandas as pd
# Load data
df = pd.read_csv('all_stocks_5yr.csv')
df.head()

# Focus on Google's stock
df_goog = df[df['Name'] == 'GOOG']
# Convert date column to a time series
df_goog['date'] = pd.to_datetime(df_goog['date'])
plot = figure(title= "Pandas Line Plot", x_axis_type = 'datetime', x_axis_label = 'date', y_axis_label= 'Prices')
plot.line(x = df_goog['date'], y = df_goog['high'])
# Output plot
show(plot)

Für das Diagramm war es nötig, die Datumsspalte in datetime zu konvertieren, damit die Daten entlang der x-Achse korrekt dargestellt werden. Außerdem verwendet die line-Funktion (ein Glyph in Bokeh) die Zeitreihe der Google-Höchstkurse.
Ein Streudiagramm aus einem Pandas-DataFrame erstellen
In diesem Abschnitt nutzen wir die offenen S&P-500-Aktienkurse von Kaggle. In diesem Beispiel wollen wir die Korrelation zwischen den Aktienkursen von Google und Apple sehen. Mehr über Korrelation erfährst du hier.
# Import required packages
# Import packages
import pandas as pd
from bokeh.io import output_file, show
from bokeh.plotting import figure
# Load data
df = pd.read_csv('all_stocks_5yr.csv')
# Select Google and Apple stock
df_goog = df[df['Name'] == 'GOOG']
df_apple = df[df['Name'] == 'AAPL']
# Select only 'date' and 'high' columns for Google and Apple
df_goog = df_goog[['date','high']]
df_apple = df_apple[['date','high']]
# Rename 'high' column to 'high_goog' and 'high_apple'
df_goog.rename(columns={'high': 'high_goog'}, inplace=True)
df_apple.rename(columns={'high': 'high_apple'}, inplace=True)
df_merged = pd.merge(df_goog, df_apple, how='inner', on='date')
# See the first five rows
df_merged.head(5)

Durch das Mergen ist sichergestellt, dass die Tageskurse nach Datum zueinander passen. So vermeidest du, Kurse unterschiedlicher Tage zu korrelieren, was zu falschen statistischen Schlüssen führen würde.
# Create scatter plot
plot = figure(title= "Pandas Scatter Plot", x_axis_label = "Apple high prices", y_axis_label= "Google high prices")
plot.circle(x = df_merged['high_apple'], y = df_merged['high_goog'],color = 'red', size = 10, alpha = 0.8)
# Output the plot
show(plot)

Die Kreise zeigen den Zusammenhang zwischen den Höchstkursen von Apple und Google. Es gibt eine generell positive Korrelation zwischen den Aktienkursen von Google und Apple.
Bokeh-Plots mit ColumnDataSource erstellen
Die ColumnDataSource ermöglicht es dir, unterschiedliche Plots mit denselben Daten zu erzeugen. Kurz gesagt: Sie bildet die Datengrundlage, die du in mehreren Plots und Analysen nutzen kannst. Das spart Zeit, weil du die Daten in Jupyter Notebook nicht mehrfach laden musst.
Die ColumnDataSource ist vergleichbar mit einem Python-Dictionary: Die Werte in einer Spalte werden über einen Schlüsselstring für genau diese Spalte angesprochen.
Linienplots mit ColumnDataSource erstellen
# Import packages
from bokeh.io import output_file, show
from bokeh.plotting import figure, ColumnDataSource
# Create the ColumnDataSource object
df_goog['date'] = pd.to_datetime(df_goog['date'])
data = ColumnDataSource(df_goog)
# Create time series plot
plot = figure(x_axis_type='datetime',
title='GOOG high prices ts plot',
x_axis_label = "Date",
y_axis_label = "Prices in $")
plot.line(x='date', y = 'high_goog', source = data, color = 'green')
show(plot)

Der Plot zeigt, wie sich die Höchstkurse von Google über fünf Jahre entwickelt haben. Die Linie markiert die jeweiligen Kurswerte.
Für diesen Plot haben wir den gesamten Google-DataFrame an ColumnDataSource übergeben und als Variable data gespeichert.
Anschließend haben wir die Daten über das source-Argument an die Plot-Funktion übergeben. So kannst du die Spaltennamen direkt im Plot verwenden, statt den DataFrame immer wieder aufzurufen.
Zum Schluss haben wir die line-Funktion genutzt, um die grüne Linie als Darstellung der Datenpunkte zu zeichnen.
Streudiagramme mit ColumnDataSource erstellen
In diesem Code übergeben wir – wie beim Linienplot – den gesamten Google-DataFrame an die ColumnDataSource und speichern ihn als Variable data. Zuerst erstellen wir den Linienplot, indem wir die Spaltennamen direkt verwenden. Anschließend erzeugen wir mit der diamond-Funktion rote Rauten, die die einzelnen Datenpunkte markieren.
# Import packages
from bokeh.io import output_file, show
from bokeh.plotting import figure, ColumnDataSource
# Create the ColumnDataSource object
df_goog['date'] = pd.to_datetime(df_goog['date'])
data = ColumnDataSource(df_goog)
# Create time series plot
plot = figure(x_axis_type='datetime',
title='GOOG high prices ts plot',
x_axis_label = "Date",
y_axis_label = "Prices in $")
plot.line(x='date', y = 'high_goog', source = data, color = 'green')
plot.diamond(x='date', y = 'high_goog', source = data, color = 'red')
show(plot)

Der Plot zeigt die Entwicklung der Google-Aktie über fünf Jahre, wobei die roten Rauten die einzelnen Kurswerte markieren.
Fazit
In diesem Tutorial hast du die gängigsten Datenstrukturen kennengelernt, denen du in Python begegnest, und wie du sie für ausdrucksstarke Visualisierungen mit Leben füllst. Bokeh ist nicht die einzige Option für Visualisierung in Python, punktet aber gegenüber Matplotlib oder Seaborn mit einfacher Handhabung und interaktiven Möglichkeiten. Im nächsten Tutorial arbeitest du praktisch mit Layouts, um wirkungsvolle, interaktive Visualisierungen zu erstellen. Wenn du tiefer in die Visualisierungsmöglichkeiten von Bokeh einsteigen willst, schau dir den DataCamp-Kurs Interactive Data Visualization with Bokeh an.