Interaktive Visualisierungen leicht gemacht: Wie Sie Dash aus Plotly nutzen, um einen beeindruckenden Graph zu erzeugen

Daten sind wertvoll, aber sie werden erst dann wirklich nützlich, wenn sie verständlich und aussagekräftig präsentiert werden. Hier kommen interaktive Visualisierungen ins Spiel. Sie ermöglichen es Nutzern, Daten zu erkunden, Muster zu erkennen und Erkenntnisse zu gewinnen, die in statischen Grafiken verborgen bleiben würden. Eine der mächtigsten und benutzerfreundlichsten Bibliotheken für die Erstellung solcher interaktiven Visualisierungen in Python ist Dash von Plotly. Dieser Artikel führt Sie durch die Grundlagen von Dash und zeigt Ihnen, wie Sie damit einen beeindruckenden Graphen erstellen können.

Was ist Dash und warum sollten Sie es nutzen?

Dash ist ein Open-Source-Python-Framework für den Aufbau von Webanwendungen zur Datenvisualisierung. Es basiert auf Plotly.js, React und Flask und kombiniert die Leistungsfähigkeit dieser Technologien, um komplexe Dashboards und interaktive Graphen zu erstellen, ohne dass Sie sich mit Frontend-Webentwicklung auskennen müssen.

Hier sind einige Gründe, warum Dash eine ausgezeichnete Wahl für Ihre Datenvisualisierungsprojekte ist:

• Python-basiert: Sie können Ihr bestehendes Python-Wissen nutzen, um Dash-Anwendungen zu erstellen. Es ist keine Notwendigkeit, neue Programmiersprachen wie JavaScript zu lernen.
• Interaktivität: Dash-Anwendungen sind von Grund auf interaktiv. Benutzer können mit den Grafiken interagieren, Filter anwenden und Daten explorieren, um tiefere Einblicke zu gewinnen.
• Flexibilität: Dash bietet eine hohe Flexibilität. Sie können benutzerdefinierte Layouts erstellen, eigene Komponenten hinzufügen und die Anwendung an Ihre spezifischen Bedürfnisse anpassen.
• Einfache Bereitstellung: Dash-Anwendungen können einfach auf verschiedenen Plattformen bereitgestellt werden, einschließlich lokaler Server, Cloud-Plattformen wie Heroku oder AWS, und sogar als eigenständige Anwendungen.
• Open Source: Dash ist Open Source und wird von einer aktiven Community unterstützt. Dies bedeutet, dass es viele Ressourcen, Tutorials und Beispiele gibt, die Ihnen beim Einstieg helfen können.

Einrichten Ihrer Entwicklungsumgebung

Bevor Sie mit der Entwicklung Ihrer ersten Dash-Anwendung beginnen können, müssen Sie sicherstellen, dass Sie die erforderlichen Bibliotheken installiert haben. Verwenden Sie dazu den Python-Paketmanager pip:

pip install dash
pip install dash-bootstrap-components
pip install plotly

Dieser Befehl installiert die Kern-Dash-Bibliothek, die Dash Bootstrap Components (für ein ansprechendes Design) und die Plotly-Bibliothek (für die Erstellung der Graphen).

Erstellen Ihrer ersten Dash-Anwendung

Lassen Sie uns mit einem einfachen Beispiel beginnen, um die grundlegenden Konzepte von Dash zu veranschaulichen. Wir erstellen eine Anwendung, die einen einfachen Streudiagramm mit zufälligen Daten anzeigt. Erstellen Sie eine neue Python-Datei (z. B. `app.py`) und fügen Sie den folgenden Code ein:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

# Daten erstellen
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

# Die Figur mit Plotly Express erstellen
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

# Dash App initialisieren
app = dash.Dash(__name__)

# Layout definieren
app.layout = html.Div(children=[
    html.H1(children='Mein erster Dash Graph'),

    html.Div(children='''
        Ein einfacher Graph mit Früchten und Mengen.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

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

Lassen Sie uns diesen Code Schritt für Schritt durchgehen:

1. Importieren der erforderlichen Bibliotheken: Wir importieren die Dash-Kernbibliotheken (`dash`, `dash_core_components`, `dash_html_components`), Plotly Express für die einfache Graphenerstellung und Pandas für die Datenmanipulation.
2. Erstellen von Daten: Wir erstellen ein Pandas DataFrame mit einigen Beispieldaten für Früchte, Mengen und Städte.
3. Erstellen der Figur: Wir verwenden Plotly Express, um einen Balkendiagramm aus den Daten zu erstellen. `px.bar()` nimmt das DataFrame, die x- und y-Spalten sowie die Farbspalte als Argumente entgegen.
4. Initialisieren der Dash-App: Wir initialisieren die Dash-Anwendung mit `dash.Dash(__name__)`.
5. Definieren des Layouts: Das Layout der Dash-Anwendung wird mithilfe von `html.Div`, `html.H1` und `dcc.Graph` definiert. `html.Div` ist ein Container für andere Komponenten. `html.H1` ist eine Überschrift. `dcc.Graph` ist eine Komponente, die einen Plotly-Graphen anzeigt. Das `figure`-Attribut des `dcc.Graph` wird auf die erstellte Plotly-Figur gesetzt.
6. Starten der App: Wir starten den Dash-Entwicklungsserver mit `app.run_server(debug=True)`. Der `debug=True`-Modus ermöglicht Hot-Reloading, was bedeutet, dass die Anwendung automatisch neu geladen wird, wenn Sie Änderungen am Code vornehmen.

Um die Anwendung auszuführen, navigieren Sie im Terminal zu dem Verzeichnis, in dem sich die Datei `app.py` befindet, und führen Sie den Befehl `python app.py` aus. Öffnen Sie dann Ihren Webbrowser und gehen Sie zu `http://127.0.0.1:8050/`, um die Anwendung anzuzeigen.

Interaktivität hinzufügen

Der wahre Vorteil von Dash liegt in seiner Fähigkeit, interaktive Anwendungen zu erstellen. Lassen Sie uns das obige Beispiel erweitern, um einen interaktiven Filter hinzuzufügen. Wir fügen ein Dropdown-Menü hinzu, mit dem der Benutzer auswählen kann, welche Städte im Graphen angezeigt werden sollen.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output

# Daten erstellen
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

# Dash App initialisieren
app = dash.Dash(__name__)

# Layout definieren
app.layout = html.Div(children=[
    html.H1(children='Interaktiver Dash Graph'),

    html.Div(children='''
        Wähle die Städte, die du anzeigen möchtest.
    '''),

    dcc.Dropdown(
        id='city-dropdown',
        options=[{'label': city, 'value': city} for city in df['City'].unique()],
        multi=True,
        value=df['City'].unique() # Alle Städte sind standardmäßig ausgewählt
    ),

    dcc.Graph(
        id='example-graph'
    )
])

# Callback definieren
@app.callback(
    Output('example-graph', 'figure'),
    [Input('city-dropdown', 'value')]
)
def update_graph(selected_cities):
    filtered_df = df[df['City'].isin(selected_cities)]
    fig = px.bar(filtered_df, x="Fruit", y="Amount", color="City", barmode="group")
    return fig

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

Die wichtigsten Änderungen in diesem Code sind:

1. Hinzufügen eines Dropdown-Menüs: Wir fügen ein `dcc.Dropdown`-Element zum Layout hinzu. Das `options`-Attribut des Dropdown-Menüs wird auf eine Liste von Dictionarys gesetzt, wobei jedes Dictionary eine Beschriftung (`label`) und einen Wert (`value`) für jede Stadt enthält. Das `multi=True`-Attribut ermöglicht die Auswahl mehrerer Städte. Das `value`-Attribut legt die standardmäßig ausgewählten Städte fest.
2. Definieren eines Callbacks: Ein Callback ist eine Funktion, die automatisch aufgerufen wird, wenn sich die Werte einer oder mehrerer Eingabekomponenten ändern. In diesem Fall wird der Callback aufgerufen, wenn sich die Auswahl im Dropdown-Menü ändert. Der `@app.callback`-Decorator verbindet die Eingabe (`Input`) und die Ausgabe (`Output`) des Callbacks. Die `update_graph`-Funktion nimmt die ausgewählten Städte als Argument entgegen, filtert das DataFrame, erstellt einen neuen Graphen und gibt ihn zurück. Der zurückgegebene Graph wird dann im `dcc.Graph`-Element mit der ID `example-graph` angezeigt.

Styling mit Dash Bootstrap Components

Dash Bootstrap Components ermöglichen es Ihnen, das Aussehen Ihrer Dash-Anwendungen mit Bootstrap-Themes und -Komponenten einfach zu gestalten. Sie können Ihre Anwendungen modern und professionell aussehen lassen, ohne sich mit komplexem CSS herumschlagen zu müssen.

Um Bootstrap Components zu verwenden, müssen Sie zunächst das `dash-bootstrap-components`-Paket installieren (wie oben beschrieben). Anschließend können Sie die Bootstrap-Komponenten in Ihrem Layout verwenden. Hier ist ein Beispiel, das die obige Anwendung mit Bootstrap-Styling erweitert:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

# Daten erstellen
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

# Dash App initialisieren
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Layout definieren
app.layout = dbc.Container(children=[
    html.H1(children='Interaktiver Dash Graph', className="mb-4"),

    dbc.Row([
        dbc.Col(dcc.Dropdown(
            id='city-dropdown',
            options=[{'label': city, 'value': city} for city in df['City'].unique()],
            multi=True,
            value=df['City'].unique()
        ), md=4),
    ]),

    dbc.Row([
        dbc.Col(dcc.Graph(id='example-graph'), md=12),
    ])
])

# Callback definieren
@app.callback(
    Output('example-graph', 'figure'),
    [Input('city-dropdown', 'value')]
)
def update_graph(selected_cities):
    filtered_df = df[df['City'].isin(selected_cities)]
    fig = px.bar(filtered_df, x="Fruit", y="Amount", color="City", barmode="group")
    return fig

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

In diesem Beispiel verwenden wir `dbc.Container`, `dbc.Row` und `dbc.Col` aus Dash Bootstrap Components, um das Layout zu strukturieren. Wir fügen auch die Klasse `className=”mb-4″` zu der Überschrift hinzu, um einen Abstand nach unten zu erzeugen. Wichtig ist, dass wir beim Initialisieren der App mit `dash.Dash` die verfügbaren Stylesheets mit `external_stylesheets=[dbc.themes.BOOTSTRAP]` hinzufügen, damit das Bootstrap-Theme angewendet wird.

Fazit

Dash von Plotly ist ein leistungsstarkes und benutzerfreundliches Framework für die Erstellung interaktiver Datenvisualisierungen in Python. Mit Dash können Sie komplexe Dashboards und Graphen erstellen, ohne sich mit Frontend-Webentwicklung auskennen zu müssen. Dieser Artikel hat Ihnen die Grundlagen von Dash gezeigt und Ihnen ein Beispiel für die Erstellung eines interaktiven Graphen mit einem Dropdown-Filter gegeben. Experimentieren Sie mit verschiedenen Komponenten, Layouts und Datenquellen, um Ihre eigenen beeindruckenden Dash-Anwendungen zu erstellen und Ihre Daten auf eine neue Art und Weise zu präsentieren.