Von Plotly zu Dash

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Eine erste Dash-App

Eine vollständige Dash-App:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Python-Funktionalität möglich
- z. B. String-Interpolation print("f{my_variable}")

Die wichtigsten Dash-Imports

from dash import Dash, dcc

Dash initialisiert die App
dcc enthält UI-Komponenten wie Diagramme und Eingaben
- Eine Komponente in unserer App
- Mehr Komponenten im Kursverlauf

Das App-Layout

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Erstelle ein App-Objekt mit Dash()
Setze das app.layout
- mit dcc.Graph()
  - figure = die zu rendernde Plotly-Grafik
  - id = wichtig für spätere Callbacks

Die App ausführen

if __name__ == '__main__':
    app.run(debug=True)

Skript wird über die Kommandozeile gestartet
- d. h. python my_app.py in der Kommandozeile
debug für Feedback beim Testen

Unsere App

Zugriff über einen Webbrowser wie Google Chrome
Während der Server läuft: .py-Datei anpassen und speichern, um Live-Updates im Browser zu sehen

Ein Screenshot der Terminalausgabe nach dem Start einer Dash-App. Weiße Schrift auf schwarzem Hintergrund zeigt die im Skript erwähnten Details.

Unsere App im Browser

Ein GIF eines horizontalen Balkendiagramms: Gesamtumsatz auf der x-Achse nach Land auf der y-Achse. Dasselbe Diagramm wie in der vorherigen Lektion, nun jedoch im Chrome-Browser; in der URL-Leiste ist die Serveradresse sichtbar. Die Maus fährt über die Grafik und klickt in die URL-Leiste, um den laufenden Server zu zeigen.

Dash in DataCamp

Einige Unterschiede zu anderen DataCamp-Übungen:
- Setup-Zeilen am Anfang der Aufgaben
- Alles wird auf einmal ausgeführt (nicht zeilenweise)
- (Deutlich) längerer Code
Voll funktionsfähige Dashboards (Fenster vergrößern!)

Ein Screenshot vom oberen Teil einer ausgeführten Dash-Coding-Übung, der die Schaltfläche zum Erweitern der HTML-Ausgabe markiert, damit die App im Vollbild sichtbar ist.

Lass uns üben!

Dashboards mit Dash und Plotly erstellen