Eine spannende Neuerung in Quarto, vorgestellt bei der posit::conf(2024), die vom 12. bis 14. August 2024 in Seattle stattfand:
Scrollytelling!
Ein Kunstwort aus Scrollen und Storytelling – hier ein Beispiel:
Quarto ist der Nachfolger von RMarkdown: ein Format, mit dem Berichte, Webseiten, Blogs, Dashboards aus einem Dokument heraus erstellt werden können, das sowohl den Programmcode als auch Text und Ergebnisse von Berechnungen, wie Grafiken und Tabellen enthält. Im Gegensatz zu RMarkdown ist Quarto nicht per Design an R gebunden, sondern als separate Software gleichberechtigt mit R, Python, Julia, … nutzbar.
Minards Grafik über Napoleons Russland-Feldzug 1812 / 1813
Charles Joseph Minard (1781 – 1870), ein französischer Bauingenieur, leistete bedeutende Beiträge zur Entwicklung der Informationsgrafik – lange vor den ersten Computern.
Seine Grafik über Napoleons Russland-Feldzug 1812 / 1813 wird in der Datenvisualisierung als eine der besten Infografiken überhaupt angesehen – wenn nicht sogar die beste. So sieht es zum Beispiel Edward Tufte.
Sie stellt folgende Variablen dar:
- Position und Marschrichtung der Armee
- Abspaltung und Wiedervereinigung von Truppenteilen
- Die abnehmende Truppenstärke.
Auffällig die enormen Verluste bei der Überquerung des Beresina-Flusses auf dem Rückzug. - Die Temperaturen.
Angaben in Réaumur: −30 °Réaumur entsprechen −37,5 °Celsius.
Klassische Beschreibung der Karte von Minard
Bei einer klassischen Beschreibung der Karte, etwa in einem Buch oder auf einer simplen Webseite, müsste der Leser zwischen dem Text und der Grafik hin- und her wechseln, um nach und nach die feinen Details zu erkennen. Das ist anstrengend, und bei den heutigen Aufmerksamkeitsspannen würden wohl viele Leser vorzeitig abspringen.
Kunst des Storytelling: Scrollytelling mit Quarto und Closeread!
Andrew Bray entwickelte Closeread, um Scrollytelling in Quarto zu ermöglichen.
Die Vorteile sollten bereits aus obigem Video ersichtlich sein:
- Die Karte bleibt im größeren Hauptfenster sichtbar, während der Leser durch den Text in der Seitenspalte scrollt.
- Wenn die Aufmerksamkeit des Lesers im Text auf bestimmte Details gerichtet wird, zoomt Quarto die Karte an diese Stelle.
Closeread: Vorstellung bei posit::conf(2024)
Hier der Vortrag, mit dem Andrew Bray Closeread bei der posit::conf(2024) vorstellte.
Interessant sein Aufhänger: Er hatte ein Gedicht auf einer Webseite nytimes.com gesehen und nach einer Weile erstaunt festgestellt, wie viel Zeit er damit verbracht hatte – obwohl er sich im Grunde gar nicht für Gedichte interessiert. Wie hatten die Autoren des Beitrags das geschafft? Mit Scrollytelling. Allerdings waren da neben dem Journalisten, der den erläuternden Text zu dem Gedicht schrieb, auch mehrere Webdesigner im Einsatz – ein ziemlicher Aufwand.
Quarto und Closeread: Wie geht das?
Mit Quarto und der Closeread-Erweiterung (extension) geht das wesentlich einfacher!
Closeread wird in dem Projekt „installiert“, in dem es verwendet wird. In der Kommandozeile:
quarto add qmd-lab/closeread
Closeread-Dateien erfordern folgende Bestandteile:
- Einen Bereich, der als Closeread-Abschnitt gekennzeichnet wird
- Ein Element, das im Hauptbereich angepinnt bleibt („sticky“)
- Ein Element, das das Aussehen des Sticky-Elements triggert
Kennzeichnung des Closeread-Abschnitts
:::{.cr-section}
Hier Text, Bilder, Codezellen, ...
:::
Alles, was innerhalb des Closeread-Abschnitts erscheint, ist per Voreinstellung als „Erzählung“ gedacht, d. h. es scrollt durch.
Das Sticky-Element
:::{#cr-meinbild}
![](Pfad-zur-Grafik.png)
:::
Anstelle der Grafik könnte auch etwas anderes stehen, z. B. Programmcode, eine Liste, mathematische Formel, oder eben auch ein Gedicht, etc.
Trigger
Der Trigger wird per Closeread-Referenzierung aktiviert: @cr-meinsticky.
Wenn dieser Abschnitt in den sichtbaren Bereich scrollt, zeigt er ein Histogramm. @cr-meinplot
:::{#cr-meinplot}
```{r}
hist(rnorm(15))
```
:::
Wie ist das Zoomen umgesetzt?
Auch hierfür sind keine großartigen Kenntnisse in Webdesign erforderlich. Codebeispiel:
[@cr-map]{pan-to="-55%,10%" scale-by="1.5"}
Mehr Details gibt es hier:
- Webseite zur Closeread-Erweiterung: https://closeread.netlify.app/
- Github Repository zu Closeread: https://github.com/qmd-lab/closeread
- Scrollytelling-Beispiel zur Grafik von Minard: https://closeread.netlify.app/gallery/examples/minards-map/
- Github-Seite mit dem Quellcode zum Scrollytelling-Beispiel Minard:
https://github.com/qmd-lab/closeread/tree/main/docs/gallery/examples/minards-map - Zu Quarto siehe den Beitrag: R Markdown: Warum Ihr JETZT zu Quarto wechseln solltet
Fazit zu Scrollytelling – Storytelling mit R und Quarto
Die hohe Bedeutung von Storytelling muss heutzutage wohl kaum noch betont werden. Daten und Ergebnisse so zu präsentieren, dass sie überzeugen und im Gedächtnis bleiben, ist eine Schlüsselqualifikation.
Mit Quarto und Closeread gibt es nun eine elegante und relativ einfach umsetzbare Möglichkeit in R zum Scrollytelling – einem Format mit viel Potential für beeindruckendes Storytelling.
Bin gespannt darauf, Anwendungsbeispiele zu sehen!