Histogramm mit Plotly erstellen: So geht’s

Histogramme sind beliebte Diagramme, die Datenpunkte in festgelegte Wertebereiche einsortieren. Man begegnet ihnen häufig in der Statistik, um zu zeigen, wie oft ein bestimmter Variablentyp in einem Intervall auftritt. Dein Mathelehrer hat vielleicht ein Histogramm genutzt, um die Verteilung der Noten in deiner Klasse zu veranschaulichen. 

Abbildung 1: Beispiel eines Histogramms, das die Notenverteilung einer Klasse zeigt. 

[Quelle: Example Histogram with Matplotlib] 

Die unterschiedlich hohen Balken erinnern optisch an Säulendiagramme. Der Unterschied: Histogramme visualisieren quantitative statt kategorialer Daten – Letzteres ist die Domäne von Säulendiagrammen. 

In Histogrammen dargestellte numerische Daten sind in der Regel kontinuierlich, sie können also unendlich viele Ausprägungen annehmen. Diese Werte direkt zu plotten, ist oft unpraktisch. Histogramme lösen das Problem, indem sie mehrere Datenpunkte in sinnvolle Intervalle (Bins) gruppieren und so sichtbar machen. 

In diesem Tutorial zeigen wir dir, wie du Histogramme in Python mit der Plotly-Datenvisualisierungsbibliothek erstellst. Außerdem lernst du verschiedene Möglichkeiten kennen, dein Plotly-Histogramm anzupassen – und warum Datenvisualisierung überhaupt so wichtig ist. 

Öffne dieses DataLab-Workbook, um den Code aus dem Tutorial nachzuvollziehen. 

Warum Datenvisualisierung in der Datenanalyse wichtig ist

Kein Unternehmen profitiert nicht davon, seine Daten besser zu verstehen. Die Datenanalyse hilft, Leistung zu optimieren und den Unternehmenserfolg zu steigern; sie ist überall dort relevant, wo Daten entstehen, denn Erkenntnisse verschaffen Vorteile.   

Datenvisualisierungen sind grafische Darstellungen, mit denen Analysten Informationen vermitteln. Ihr Zweck ist es, Daten so zu verdichten, dass sie leicht verständlich sind und die wichtigsten Erkenntnisse auf einen Blick sichtbar werden. 

Anders gesagt: Unternehmen nutzen Visualisierungen, um Trends schnell zu erkennen, die ohne grafische Unterstützung schwer zu entdecken wären. Grafiken machen Informationen universell, schnell und wirkungsvoll kommunizierbar. 

Einführung in Plotly

Plotly ist eine interaktive, quelloffene Datenvisualisierungsbibliothek für Python und R, geschrieben in JavaScript. In diesem Artikel konzentrieren wir uns auf Plotly für Python, häufig auch “plotly.py” genannt, um es vom JavaScript-Pendant zu unterscheiden. 

Tipp: Starte mit den Kursen Introduction to data visualization with Plotly in Python oder Interactive data visualization with Plotly in R, um Plotly sicher zu beherrschen.   

Viele Plotly-Nutzer berichten, dass sie anfangs von der modernen Optik begeistert waren, die sich damit schnell umsetzen lässt. Plotly Python ermöglicht ansprechende, interaktive Web-Visualisierungen, die sich 

• in Jupyter-Notebooks anzeigen, 
• als eigenständige HTML-Dateien speichern 
• oder mit Dash in reinen Python-Webanwendungen einbinden lassen.

Ein weiterer Pluspunkt ist die große Auswahl an Diagrammtypen. Die Bibliothek unterstützt mehr als 40 Charts für unterschiedlichste Anwendungsfälle – von Statistik, Finanzen und Geografie über Wissenschaft bis hin zu 3D-Diagrammen. 

Dank der engen Integration mit Kaleido – einem Tool zum Bildexport – lassen sich Plotly-Grafiken leicht exportieren. Außerdem gibt es breite Unterstützung jenseits des Webs, etwa für Desktop-Editoren (z. B. Spyder, PyCharm) und das Veröffentlichen statischer Dokumente (z. B. Export von Jupyter-Notebooks als PDF). 

Die Installation von plotly.py ist unkompliziert; du kannst es mit pip installieren: 

pip install plotly>=5.11.0, <5.12.0Bereitgestellt von

Oder mit Conda: 

conda install -c plotly plotly>=5.11.0, <5.12.0Bereitgestellt von

Hinweis: Installiere Bibliotheken am besten in einer virtuellen Umgebung, damit die Abhängigkeiten pro Projekt getrennt bleiben. Du kannst auch direkt mit einem DataLab-Workbook starten – einer Python- & R-Data-Science-IDE in der Cloud. 

DataLab nutzen

DataLab ist eine Online-IDE, in der du Code schreiben, Daten alleine oder im Team analysieren und Erkenntnisse teilen kannst. Du kannst dir DataLab wie Google Docs für Data Science vorstellen. Mehr dazu in unserem Artikel Using DataLab in the Classroom.

Für unsere Aufgabe legen wir ein Workbook aus einem Datensatz an. Praktisch: DataCamp stellt eine große und wachsende Sammlung spannender Datensätze bereit. Erstellst du ein Workbook aus einem Datensatz, enthält die Umgebung alle vorkonfigurierten Daten plus eine kurze Beschreibung – so legst du direkt los.   

So erstellst du ein Workbook aus einem DataCamp-Datensatz: 

• Wähle in der DataLab-App in der Seitenleiste "Datasets".
• Such dir einen interessanten Datensatz aus. Es öffnet sich ein Dialog mit einer Vorschau, inklusive Datendictionary und Link zur Quelle, einer möglichen Sprachauswahl (Python oder R) und einem Überblick über Veröffentlichungen anderer Nutzer mit diesem Datensatz.
• Klicke auf Create workbook.

Abbildung 2: GIF mit den Schritten, um aus einem Datensatz ein Workbook zu erstellen.

Hinweis: Sieh dir das Creating a Plotly Histogram with Olympics-Data-Workbook an, um dem Code zu folgen.

Wir nutzen den Olympics-Datensatz aus DataCamps interner Sammlung. Laut Beschreibung umfasst er die modernen Olympischen Spiele von Athen 1896 bis Rio 2016. Jede Zeile entspricht einer Athletin oder einem Athleten (271116 Einträge), der bei einem olympischen Wettkampf angetreten ist, inklusive der gewonnenen Medaille (falls vorhanden).

Die Spalten sind: 

Mit diesem Verständnis eignen sich insbesondere die Spalten age, height, weight und year für ein Histogramm. Histogramme setzen auf kontinuierliche numerische Werte: Sie zeigen die Verteilung der Daten, indem sie Werte in Bins aufteilen und die Häufigkeit je Bin darstellen. 

Wir verwenden die Spalte age, um unser Histogramm zu erstellen. 

Ein Plotly-Histogramm erstellen

Ein Histogramm in Python mit Plotly zu erstellen, ist recht einfach. Wir können Plotly Express nutzen, eine leichtgewichtige High-Level-Schnittstelle…

import plotly.express as px

# Create a histogram
fig = px.histogram(olympic_data.age, x="age",
                  title="Distribution of Athletes age")
fig.show()Bereitgestellt von

Abbildung 3: Ein mit Plotly Express erstelltes Histogramm

Alternativ können wir Graph Objects verwenden.

import plotly.graph_objects as go

fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

# add the title
fig.update_layout(title=dict(text="Distribution of Athletes age"))
fig.show()Bereitgestellt von

Abbildung 4: Ein mit Plotly Graph Objects erstelltes Histogramm. 

Plotly-express-Funktionen rufen intern graph_objects auf und geben deren Ergebnis zurück. Sie sind daher praktisch, weil sie Visualisierungen mit deutlich weniger Codezeilen ermöglichen, als wenn du direkt mit graph_objects arbeitest. 

„Das Modul plotly.express (meist als px importiert) enthält Funktionen, die komplette Figuren auf einmal erstellen können und als Plotly Express oder PX bezeichnet werden. Plotly Express ist Teil der Plotly-Bibliothek und der empfohlene Startpunkt für die meisten Standarddiagramme. Jede Plotly-Express-Funktion nutzt intern graph objects und gibt eine Instanz von plotly.graph_objects.Figure zurück.“

Quelle: Plotly Express in Python. 

Auch wenn express als Einstieg empfohlen wird, nutzen wir für die Anpassungen graph_objects, da es mehr Flexibilität bietet.  

Das Erscheinungsbild des Plotly-Histogramms anpassen

Aktuell wirkt unser Histogramm recht schlicht. Bringen wir mehr Leben hinein, indem wir die Schriftarten für den Titel ändern und Achsenbeschriftungen hinzufügen. 

# Create histogram
fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

fig.update_layout(
    # Set the global font
    font = {
        "family":"Times new Roman",
        "size":16
    },
    # Update title font
    title = {
        "text": "Distribution of Athletes age",
        "y": 0.9, # Sets the y position with respect to `yref`
        "x": 0.5, # Sets the x position of title with respect to `xref`
        "xanchor":"center", # Sets the title's horizontal alignment with respect to its x position
        "yanchor": "top", # Sets the title's vertical alignment with respect to its y position. "      
        "font": { # Only configures font for title
            "family":"Arial",
            "size":20,
            "color": "red"
        }
    }
)

# Add X and Y labels
fig.update_xaxes(title_text="Age")
fig.update_yaxes(title_text="Number of Athletes")

# Display plot
fig.show()Bereitgestellt von

Abbildung 5: Plotly-Histogramm mit aktualisiertem Titel und hinzugefügten Achsenbeschriftungen. 

Mit diesen Ergänzungen ist unser Histogramm deutlich aussagekräftiger. 

Als Nächstes ändern wir die Bin-Breite. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5) # Change the bin size to 5
    )
  ]
)Bereitgestellt von

Abbildung 6: Plotly-Histogramm mit Bin-Größe 5. 

Im Code oben setzen wir den Parameter xbins in der go.Histogram-Instanz auf eine go.histogram.Xbins-Instanz und definieren dort die gewünschte Bin-Größe. Alternativ könnten wir auch ein dict mit passenden Eigenschaften verwenden. 

Zum Schluss färben wir die Bins orange, damit die Visualisierung mehr ins Auge fällt. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange") # Change the color
    )
  ]
)Bereitgestellt von

Abbildung 7: Plotly-Histogramm mit orangen Bins.

Schon besser. 

Hierzu setzen wir den Parameter marker in der go.Histogram-Instanz auf eine go.histogram.Marker-Instanz und definieren dort die gewünschte Farbe. 

Darüber hinaus gibt es viele weitere Anpassungen für Plotly-Histogramme, etwa Hover-Text. 

Hover-Text aktivieren

Aktuell erscheint beim Überfahren eines Balkens ein Text mit Details – siehe Abbildung 8. 

Abbildung 8: Der aktuelle Hover-Text beim Überfahren unseres Histogramms. 

Das ist nicht besonders intuitiv. Visualisierungen sollten möglichst selbsterklärend sein – bis hin zum Hover-Text. Also aktualisieren wir die Informationen, die beim Überfahren eines Bins angezeigt werden. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange"), # Change the color
        hovertemplate="<br>".join([
            "Age Range: %{x}",
            "Number of Athletes: %{y}"]) # Make hover text more informative
    )
  ]
)Bereitgestellt von

Abbildung 9: Aktualisierte Hover-Informationen. 

Der Text beim Hover ist jetzt deutlich informativer und damit leichter zu interpretieren. Wir haben dazu den Parameter hovertemplate in unserer go.Histogram-Instanz angepasst. 

Filteroptionen hinzufügen

Früher im Tutorial haben wir festgestellt, dass sich die Features age, height, weight und year für Histogramme eignen. Dafür müssen wir nicht je ein eigenes Histogramm bauen. 

Stattdessen erstellen wir ein einziges Histogramm und fügen Filter-Buttons hinzu, mit denen du durch die anzuzeigende Variable wechseln kannst. 

So sieht das im Code aus.

"""
Starter code provided by vestland on StackOverflow
Link: https://bit.ly/3ipqOMo
"""
# continuous features
continuous_vars = ["age", "height", "weight", "year"]

# plotly
fig = go.Figure()

# set up ONE trace
fig.add_trace(
    go.Histogram(x = olympic_data.age,
                xbins=go.histogram.XBins(size=5), # Change the bin size
                marker=go.histogram.Marker(color="orange"), # Change the color
            )
)

buttons = []

# button with one option for each dataframe
for col in continuous_vars:
    buttons.append(dict(method='restyle',
                        label=col,
                        visible=True,
                        args=[{"x":[olympic_data[col]],
                              "type":'histogram', [0]],
                        )
                  )

# some adjustments to the updatemenus
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)

updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True

# add dropdown menus to the figure
fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()Bereitgestellt von

Abbildung 10: Histogramm mit Filtern, die das Umschalten zwischen Variablen in einer Visualisierung erlauben.

Und das war’s. Schau dir unbedingt das Workbook Creating a Plotly Histogram with Olympics Data an und experimentiere mit dem, was wir gebaut haben. 

Fazit 

Du weißt jetzt, wie du in Plotly für Python ein Histogramm erstellst. In diesem Tutorial hast du gelernt:

• Was ein Histogramm ist und wie es funktioniert
• Warum Datenvisualisierung in der Datenanalyse wichtig ist
• Wie du mit DataLab startest
• Wie du in Plotly ein Histogramm erstellst 
• Verschiedene Möglichkeiten zur Anpassung deines Histogramms
• Wie du Filter einsetzt 

Wenn du mehr zu Histogrammen oder Plotly suchst, empfehlen wir diese Ressourcen:

• Histograms in Matplotlib
• How to make a Histogram with ggplot2
• Intermediate Interactive Data Visualization with Plotly in R