Dash für Einsteiger

Dash ist ein Python-Framework zum Erstellen von Webanwendungen. Es baut auf Flask, Plotly.js, React und React Js auf. Damit kannst du Dashboards direkt in Python entwickeln. Dash ist Open Source und die Apps laufen im Webbrowser. In diesem Tutorial führen wir dich in die Dash-Grundlagen ein und setzen voraus, dass du bereits Erfahrung mit Plotly hast.

Dash installieren

Um mit Dash zu starten, müssen wir mehrere Pakete installieren.

1. Das Dash-Backend (Core).
2. Dash-Frontend.
3. Dash-HTML-Komponenten.
4. Dash-Core-Komponenten.
5. Plotly.

pip install dash==0.21.1  
pip install dash-renderer==0.13.0  
pip install dash-html-components==0.11.0
pip install dash-core-components==0.23.0  
pip install plotly --upgrade

Dash-App-Layout

Eine Dash-Anwendung besteht in der Regel aus zwei Teilen. Der erste Teil ist das Layout und beschreibt das Erscheinungsbild der App, der zweite Teil steuert die Interaktivität. Dash stellt HTML-Klassen bereit, mit denen wir HTML-Inhalte in Python erzeugen können. Dafür importieren wir dash_core_components und dash_html_components. Du kannst auch eigene Komponenten mit JavaScript und React Js entwickeln.

Zum Einstieg erstellen wir mit unserem Lieblingseditor eine Datei namens app.py und importieren diese Pakete.

import dash
import dash_core_components as dcc
import dash_html_components as html
 

Ähnlich wie in Flask initialisieren wir Dash, indem wir die Dash-Klasse von dash aufrufen. Anschließend erstellen wir das Layout unserer Anwendung. Mit der Div-Klasse aus dash_html_components erzeugen wir ein HTML-Div. Über die HTML-Komponenten generieren wir Elemente wie H1, H2 usw. dash_html_components enthält alle HTML-Tags. Um in unserem Layout ein Diagramm zu platzieren, verwenden wir die Graph-Klasse aus dash_core_components. Graph rendert interaktive Visualisierungen mit plotly.js. Die Klasse erwartet ein Figure-Objekt mit den zu plottenden data sowie den layout-Details. Dash erlaubt außerdem Styling, z. B. Hintergrund- und Textfarbe. Den Hintergrund änderst du über das style-Attribut, dem du ein Objekt mit deinen Farben übergibst. In unserem Beispiel definieren wir dafür ein Farbdictionary mit Hintergrund- und Textfarbe. Analog lässt sich der Layout-Hintergrund über plot_bgcolor anpassen.

In HTML wird der style-Wert per Semikolon angegeben, in Dash übergibt man ein Dictionary. Die Schlüssel sind im CamelCase, z. B. wird aus text-align textAlign. Anstelle von HTML-Klassen wird in Dash className verwendet.

 app = dash.Dash()
colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),
    html.Div(children='Dash: A web application framework for Python.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),
    dcc.Graph(
        id='Graph1',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    )
])
 

Um die Visualisierung zu sehen, müssen wir – wie bei Flask – den Webserver starten. Denk daran: Dash baut auf Flask auf. Wir setzen außerdem debug=True, damit der Server bei Änderungen automatisch neu lädt.

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

Wechsle nun ins Terminal und starte den Server mit: python app.py

Dadurch wird ein neuer Webserver unter http://127.0.0.1:8050/ gestartet. Öffne die Adresse und sieh dir dein frisch erstelltes Dashboard an.

Streudiagramme erzeugen

Für ein Streudiagramm importieren wir die gewohnten Dash-Komponenten. Zusätzlich benötigen wir Plotlys graph_objs, um den Scatter-Plot zu zeichnen. Wie zuvor nutzen wir die Div-Klasse und die Graph-Komponente von Dash. Graph erhält ein Figure-Objekt mit data und layout. Das Streudiagramm erstellen wir über die scatter-Eigenschaft von graph_objs. Damit wirklich Punkte und keine Linien gezeichnet werden, setzen wir das Attribut mode auf markers.

 import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/' +
    '5d1ea79569ed194d432e56108a04d188/raw/' +
    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
    'gdp-life-exp-2007.csv')


app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure={
            'data': [
                go.Scatter(
                    x=df[df['continent'] == i]['gdp per capita'],
                    y=df[df['continent'] == i]['life expectancy'],
                    text=df[df['continent'] == i]['country'],
                    mode='markers',
                    opacity=0.8,
                    marker={
                        'size': 15,
                        'line': {'width': 0.5, 'color': 'white'}
                    },
                    name=i
                ) for i in df.continent.unique()
            ],
            'layout': go.Layout(
                xaxis={'type': 'log', 'title': 'GDP Per Capita'},
                yaxis={'title': 'Life Expectancy'},
                margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                legend={'x': 0, 'y': 1},
                hovermode='closest'
            )
        }
    )
])

if __name__ == '__main__':
    app.run_server()
 

Markdown

Manchmal möchtest du viel Text in deinem Dashboard unterbringen. Das geht mit dash_core_components über das Attribut Markdown, wie unten gezeigt.

 import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

markdown_text = '''
### Dash and Markdown
A lot of text
'''

app.layout = html.Div([
    dcc.Markdown(children=markdown_text)
])

if __name__ == '__main__':
    app.run_server()

Core Components

Als Nächstes sehen wir uns einige dash_core_components an, die dir in Dash häufig begegnen. Ein Dropdown erzeugst du wie unten. Dazu rufst du Dropdown aus dash_core_components auf und übergibst die Optionen als Liste von Dictionaries. Den Standardwert setzt du mit dem Attribut value, indem du die gewünschte Option angibst.

  dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )

Ein Mehrfachauswahl-Dropdown erstellst du ganz ähnlich. Setze dazu das Attribut multi auf True (Standard ist False). Über das Attribut value kannst du festlegen, welche Elemente anfänglich ausgewählt sind.

    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF'],
        multi=True
    )

Radiobuttons erzeugst du mit RadioItems. Die Optionen übergibst du als Liste von Dictionaries. Einen Standardwert setzt du über das Attribut value.

 html.Label('Radio Items'),
    dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )

Checkboxen erzeugst du mit dem Attribut Checklist aus dash_core_components. Optionen und Standardwerte übergibst du wie oben.

  html.Label('Checkboxes'),
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        values=['MTL', 'SF']
    )

In fast jeder Anwendung brauchst du Eingabefelder. Dafür verwendest du Input. Mit dem HTML-Tag Label kannst du das Feld beschriften. Über das Attribut value setzt du einen Startwert und mit type legst du den Feldtyp fest, z. B. Text oder Zahl.

 html.Label('Text Box'),
    dcc.Input(value='MTL', type='text')

Hilfe aufrufen

Da Dash-Komponenten deklarativ sind, liefert der help-Befehl zu jeder Komponente die passende Hilfe.

help(dcc.Input)

Interaktivität

Jetzt schauen wir uns an, wie wir Dash-Apps interaktiv machen. Dafür importieren wir Input und Output aus dash.dependencies. Verwechsle diese nicht mit dem HTML-Input – das kommt aus den Dash-Core-Komponenten. Unten erstellen wir ein Texteingabefeld und verknüpfen es mit einem Callback, sodass Eingaben in my-div in Echtzeit erscheinen. Dash stellt dafür den Dekorator @app bereit, mit dem wir eine Callback-Funktion an my-div und das HTML-Eingabefeld binden. Beachte, dass der Dekorator vor der Funktionsdefinition von update_output_div steht.

 import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='Dash App', type='text'),
    html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


if __name__ == '__main__':
    app.run_server()

Authentifizierung

Dash bietet Authentifizierung über ein separates Paket namens dash-auth. Es stellt zwei Modi bereit: HTTP Basic Auth und Plotly OAuth. Bei Basic Auth hinterlegst du Benutzername-Passwort-Paare fest im Code. Das hat Nachteile: Nutzer können sich nicht abmelden, keine Accounts anlegen oder Passwörter ändern und du bist für die sichere Speicherung verantwortlich. Plotly OAuth authentifiziert über dein Plotly-Onlinekonto und ist nicht kostenlos.

So richtest du Basic Auth ein. Installiere zunächst die benötigten Pakete.

 pip install dash==0.21.1
pip install dash-auth==1.0.0

Lege anschließend die gewünschten Benutzername-Passwort-Paare fest.

 VALID_USERNAME_PASSWORD_PAIRS = [
    ['hello', 'world']
]

Das Utility dash_auth.BasicAuth übernimmt danach die Authentifizierung. Du musst nur die Paare und den App-Namen an dash_auth.BasicAuth übergeben.

 app = dash.Dash('auth')
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

Dashboards auf Heroku hosten

Dein Dashboard auf Heroku zu hosten ist unkompliziert, erfordert aber ein paar Schritte.

Lege zuerst ein Verzeichnis für alle Projektdateien an. Unter Ubuntu geht das mit mkdir.

$ mkdir my_dash_app
$ cd my_dash_app

Initialisiere als Nächstes den Ordner mit Git und virtualenv. Git dient der Versionskontrolle, und mit virtualenv erstellst du eine virtuelle Umgebung für alle Python-Abhängigkeiten. Nach dem Erstellen aktivieren wir sie mit source.

$ git init
$ virtualenv venv
$ source venv/bin/activate

Installiere nun alle Pakete, die wir für unsere Dash-App brauchen:

$ pip install dash
$ pip install dash-renderer
$ pip install dash-core-components
$ pip install dash-html-components
$ pip install plotly

Um unsere Dash-App auszuliefern, benötigen wir einen Python-Webserver. Den Flask-Entwicklungsserver verwenden wir in Produktion nicht. Stattdessen nutzen wir den Webserver Gunicorn. Installiere ihn so:

$ pip install gunicorn

Als Nächstes erstellen wir ein paar Dateien im Ordner:

1. app.py, in der wir die Dash-App implementieren.
2. Eine .gitignore, damit unnötige Dateien nicht in die Produktion gelangen.
3. Eine requirements.txt mit allen Python-Abhängigkeiten und Versionen.
4. Eine Procfile für das Deployment.

Füge Folgendes in app.py ein. Das ist nur ein Beispiel – du kannst natürlich dein eigenes Dashboard verwenden.

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div([
    html.H2('Hello World'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='display-value')
])
@app.callback(dash.dependencies.Output('display-value', 'children'),
              [dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
    app.run_server(debug=True)

Zur Erinnerung: Im Kern ist eine Dash-App auch eine Flask-App. Für das Deployment müssen wir auf die Flask-Instanz zugreifen. Dash ermöglicht das über

app.server

app = dash.Dash(__name__)
server = app.server

Trage in der .gitignore alle Dateien ein, die nicht in die Produktion sollen. Eine gute Python-.gitignore findest du auf GitHub.

Nun hinterlegen wir die Deploy-Informationen in der Procfile. Mit web geben wir Gunicorn als Server an. Über app verweisen wir auf unsere App. app steht für den Dateinamen app.py, server für die Server-Variable in dieser Datei.

web: gunicorn app:server

Schreibe außerdem die Python-Abhängigkeiten in die requirements.txt. Heroku installiert sie während des Deployments.

pip freeze > requirements.txt

Die nächsten Schritte setzen ein Heroku-Konto und die Heroku-CLI voraus. Falls dir beides fehlt, gehe zu https://www.heroku.com und richte es ein.

Erstelle anschließend im Terminal eine Heroku-App und füge alle Dateien hinzu. Nachdem du die Änderungen committet hast, pushst du auf heroku master. Die Ausgabe enthält einen Link zu deiner live laufenden Dash-App auf Heroku.

$ heroku create your-app-name
$ git add .
$ git commit -m 'Your-commit-message'
$ git push heroku master

Dies ist eine Einführung in den Bau eines Dashboards in reinem Python mit Dash von Plotly. Mehr zu Dash findest du in der offiziellen Dokumentation.

Wenn du mehr über Python lernen möchtest, wirf einen Blick in unser Python-Tutorial für Einsteiger und den Intermediate Python for Data Science-Kurs.