Tipps & Tricks bei der Entwicklung eines Dashboards mit Streamlit & Plotly

17.10.2022 – ca. 7 Min. Lesezeit – Zurück zur Startseite – Alle Blog-Artikel

In der heutigen Zeit gewinnt die übersichtliche Darstellung von Daten immer mehr an Stellenwert. Python bietet viele Möglichkeiten, Visualisierungen zu erstellen. Damit die implementierten Grafiken jedoch nicht nur in der Python-Welt verbleiben, gibt es Möglichkeiten, diese als Webanwendung verfügbar zu machen. Beispielsweise kann das Python-Framework Streamlit Python-Skripte in interaktive Webanwendungen überführen. Die entwickelten Anwendungen können unter anderem in einer von Streamlit gehosteten Cloud bereitgestellt werden.

Wie im Beitrag informatica feminale – ein Rückblick erwähnt, möchten wir in diesem Artikel näher auf die Erstellung eines Python-Dashboards eingehen. Ziel dieses Blogeintrags ist es zu zeigen, wie ein beispielhaftes Dashboard, entwickelt mit Streamlit und plotly.express, aussehen und deployed werden kann. Dabei möchten wir zusätzlich einige Tipps und Tricks in den Bereichen Layout, Performance und Deployment aufzeigen. Dieser Blogeintrag bietet somit keine Schritt-für-Schritt-Anleitung für den Einstieg. Für den ersten Umgang in der Entwicklung mit Streamlit empfehlen wir die Streamlit-Dokumentation, insbesondere den Abschnitt “Getting started”.

Ausgangspunkt für unser Demo-Dashboard bilden zwei Datensätze – unterschiedliche CO2-Emissionen für verschiedene Länder sowie eine Zuordnung der Länder zu Kontinenten. Der CO2-Datensatz von “Our World in Data” enthält nicht nur die CO2-Emissionswerte verschiedener Länder in unterschiedlichen Jahren, sondern auch weitere Daten zu CO2-Emissionen. Diese umfassen beispielsweise die Aufteilung der Emissionen auf verschiedene Sektoren oder berechnete Metriken, wie CO2-Emissionen im Verhältnis zur Bevölkerungszahl oder Bruttoinlandsprodukt. Das Ziel war, anhand verschiedener Visualisierungsmöglichkeiten ein Python-Dashboard zur Darstellung der weltweiten CO2-Emissionen zu implementieren. Unser Ergebnis sieht wie folgt aus:

Hier gehts zur interaktiven Version des Dashboards

©scieneers 2022

Um dieses Dashboard zu entwickeln, haben wir größtenteils mit bekannten Bibliotheken, wie Pandas und NumPy (zur Datenmanipulation) sowie der Plotting-Bibliothek plotly.express gearbeitet. Lediglich Überschriften und interaktive Elemente, wie beispielsweise Slider oder Auswahlboxen, mussten mit Streamlit implementiert werden. Die Plots können mit der Streamlit-Methode st.plotly_chart in die Streamlit-Anwendung eingebunden werden.

Layout mit zusätzlichen Befehlen anpassen

Das resultierende Standardlayout sieht jedoch nicht an allen Stellen ansprechend aus, z.B. entstehen zu viele Leerräume oder eine verzerrte Anzeige auf kleineren Bildschirmen. Daher bedarf es einiger Anpassungen, sowohl bei den Codefragementen, die mittels Streamlit implementiert wurden, als auch bei den Plotly-Abbildungen selbst.

Hovering

Beispielsweise gibt es die Möglichkeit, Nutzer:innen die visualisierten Werte beim Fahren mit der Maus (Hovering) über ein ausgewähltes Diagramm anzuzeigen (Abb. 2). Bei plotly.express lässt sich die Darstellung des Hoverings mittels einem hovertemplate bei update_layout über mehrere Plots hinweg vereinheitlichen und individuell anpassen (Abb. 3).

fig.data[0].hovertemplate = "CO2 Emissions [Mio t]: %{value}"

Abb. 2: Standard-Hovering

Abb. 3: Angepasstes Hovering

Verbindung von Streamlit und plotly.express

Die Überschriften der einzelnen Diagramme sollten mit dem Streamlit-Textelement st.markdown erstellt werden, anstatt mit plotly.express direkt. Dadurch wird ermöglicht, dass sich Textelemente und Titel auf kleineren Geräten automatisch an die Seitenbreite anpassen können und nicht abgeschnitten werden. Zusätzlich ermöglicht das Deaktivieren (displayModeBar=False) des automatischen Menu-Tools von plotly.express-Abbildungen eine bessere Darstellung auf mobilen Geräten.

st.plotly_chart([plot], use_container_width=True, config={displayModeBar: False})

Leider gibt es jedoch standardmäßig recht große Abstände zwischen Streamlit-Elementen, wie Titeln, und den Plotly-Abbildungen (Abb. 4). So kann es hilfreich sein, bei Plots mittels plotly.express, über update_layout die Werte des Parameters margins kleiner zu wählen, um dadurch nicht ausgefüllte Fläche zu reduzieren (Abb. 5).

fig.update_layout(margin={l: 15, r: 15, t: 15, b: 15})

Abb. 4: Standardwerte für “margins”

Abb. 5: Individuelle Anpassung von “margins”

Weiße Flächen

Neben der weißen Fläche zwischen Titel und Diagramm, gibt es einen großen leeren Bereich zwischen dem Dashboard-Titel und den eigentlichen Abbildungen. Dadurch ist das Dashboard schwer auf einer Seite anzeigbar (bei einer entsprechenden Bildschirmgröße). Wir konnten diese weiße Fläche – wie im folgenden Codeabschnitt zu erkennen – mittels st.markdown und einigen Zeilen CSS beheben.

 st.markdown(
              """ 
              .css-18e3th9 {padding-top: 1.5rem; padding-bottom: 2rem; padding-left: 2rem;bpadding-right: 2rem;} 
              .css-1d391kg {padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem;}
              """, 
              unsafe_allow_html=True
 )

Darstellung

Um die gesamte Bildschirmbreite für die Darstellung der Anwendung zu nutzen, sollte zusätzlich in der Hauptdatei der Streamlit-App, für die Methode st.set_page_config, der Parameter layout auf wide festgelegt werden.

 st.set_page_config(layout="wide", page_title="Dashboard CO2 Emissions")

Performance durch Caching verbessern

Streamlit-Anwendungen werden in Python-Skripten geschrieben. Dadurch wird bei jeder notwendigen Aktualisierung des Screens das Skript komplett ausgeführt. Um dennoch eine flüssige Dashboard-Performance zu erreichen, ist es empfehlenswert, Ergebnisse von rechenintensiven Funktionen, wie dem Laden von Daten, mittels des Decorators st.cache zu cachen.

 @st.cache
 def load_data(self, path_to_csv: Path) -> pd.DataFrame:
         pass

Vorsicht ist jedoch geboten bei Verwendung der Caching-Funktion im Zusammenhang mit Klassenmethoden; man sollte sich bewusst sein, inwiefern man den aktuellen Zustand des Objekts cachen möchte oder nicht. Weiterhin kann es sein, dass die zurückgegebenen Werte standardmäßig nicht außerhalb der Funktion verändert werden dürfen, d.h. bestimmte Instanzvariablen dürfen z.B. nur durch die gecachte Klassenmethode verändert werden. Neben dem Caching-Decorator gibt es seit einiger Zeit noch weitere Möglichkeiten in Streamlit-Anwendungen zu cachen, welche sich aktuell noch in einer Testphase befinden.

Dashboard mit Streamlit Cloud einfach deployen

Vorbereitung und Deployment

Nachdem das Layout und die Dashboard-Performance unseren Vorstellungen entsprochen haben, war unser Ziel, das Dashboard öffentlich verfügbar zu machen. Dafür waren verschiedene Schritte notwendig. Der gesamte Code sowie die Daten liegen zusammen mit einer “requirements.txt”-Datei in einem GitHub-Repository. Die “requirements.txt”-Datei befindet sich dabei entweder im Hauptverzeichnis oder im gleichen Ordner wie das Hauptskript der Streamlit-App. Um unsere Anwendung online verfügbar zu machen, haben wir mit Streamlit Cloud direkt unser GitHub-Repository deployed. Streamlit Cloud übernimmt die Prozesse im Hintergrund, sodass sich Entwickler:innen keine Gedanken über Dinge, wie Serverkapazitäten oder Sicherheit, machen müssen.

Die Geschwindigkeit des Deployments wird wesentlich von der Vielzahl der Abhängigkeiten beeinflusst. Unser Dashboard, das nur wenige Abhängigkeiten (Pandas, NumPy, plotly.express) enthält, wurde innerhalb einer knappen Minute deployed. Nachdem das Deployment erfolgreich abgeschlossen ist, steht die Anwendung unter einer eindeutigen URL zur Verfügung. Wird ein Neustart der Anwendung vorgenommen, so wird diese auf allen Clients aktualisiert.

Konfiguration

Standardmäßig ist der Zugriff auf eine mit Streamit Cloud gehostete Anwendung privat, wenn das GitHub-Repository privat ist; bei einem öffentlichen Repository dementsprechend nicht. Über die Weboberfläche von Streamlit Cloud lässt sich diese Konfiguration anpassen. Wichtig zu wissen ist, dass Entwickler:innen die GitHub-Administrator-Rolle haben müssen, um eine Streamlit-Anwendung in der Cloud deployen zu dürfen. Bei einem Organisations-Account muss der Organisations-Owner zusätzlich eine einmalige Zustimmung erteilen, dass Streamlit Cloud auf die Repositories der Organisation zugreifen darf.

Einbettung in eine bestehende Webseite

Unsere ursprüngliche Idee war, den bereitgestellten Link zum Dashboard in einem HTML-iframe in unsere bestehende WordPress-Seite einzubetten. Dies hat sich jedoch leider als nicht möglich herausgestellt aufgrund von Cookies, die unsere Streamlit-Anwendung für das Caching benötigt. Somit gilt Streamlit Cloud in einem iframe eingebettet als Drittseite, und für diese Seiten werden Cookies in modernen Browsern standardmäßig nicht erlaubt. Falls ein:e Leser:in eine Lösung findet, darf diese gerne mit uns geteilt werden.

Der Prozess von der Entwicklung eines Streamlit-Dashboards bis zum endgültigen Deployment umfasst also verschiedene Komponenten. Abbildung 6 zeigt eine Übersicht über unseren Entwicklungs- und Deployment-Prozess.

Abb. 6: Entwicklungs- und Deploymentprozess

Erkentnisse aus dem Dashboard

Durch unterschiedliche Darstellungsarten bietet unser Dashboard die Möglichkeit, die weltweiten CO2-Emissionen aus verschiedenen Blickwinkeln zu betrachten. Dabei ist beispielsweise gut zu erkennen, dass Asien insgesamt viel mehr CO2-Emissionen verursacht hat als Südamerika (Abb. 7). In Anbetracht der deutlich größeren Bevölkerung in Asien ist dies jedoch auf den zweiten Blick nicht erstaunlich. Weiterhin lässt sich im Zeitraum 1950 – 2020 ein ansteigender Trend der CO2-Emissionen in Asien erkennen, während ab 1990 die CO2-Emissionen in Europa leicht sinken (Abb. 8). Nicht zuletzt sind die Sektoren Kohle, Konsum, Gas und Öl auf allen Kontinenten für den Großteil der CO2-Emissionen verantwortlich. Es gibt jedoch Unterschiede zwischen den einzelnen Kontinenten: so werden in Südamerika prozentual gesehen weniger CO2-Emissionen durch Kohle verursacht als auf anderen Kontinenten (Abb. 9).

Abb. 7: Hierarchische Repräsentation von C02 Emissionen im Zeitraum 1950 – 2020

Abb. 8: CO2 Emissionen von Asien und Europa im Zeitraum 1950 – 2020

Abb. 9: Verteilung der Anteile der Sektoren im Zeitraum 1950 – 2020

Zusammenfassung

Streamlit bietet eine einfache Lösung, um Dashboards mittels Python-Skripten zu implementieren und bereitzustellen. Die Bedienbarkeit ist weitestgehend leicht verständlich und es lassen sich schnell erste Ergebnisse erzielen. Um eine einigermaßen flüssige Performance zu erreichen sowie gute Layouts zu erstellen, mussten wir dennoch an einigen Details drehen.

In der Zukunft könnte Web Assembly eine weitere Option zum Deployment von Python-Dashboards als Web-Anwendungen sein. Die im September 2022 zur Verfügung stehenden Möglichkeiten waren aufgrund von zu langen Ladezeiten (>10 Sekunden) leider noch ungeeignet. An dieser Stelle ist beispielsweise die Bibliothek stlite zu nennen, die versucht, eine Streamlit-Anwendung direkt im Browser laufen zu lassen.

Alina Bickel & Alina Dallmann