Scrollytelling – Storytelling mit R und Quarto!

Storytelling gilt als Schlüsselqualifikation. Mit Quarto und Closeread gibt es nun eine elegante Möglichkeit, Scrollytelling in R umzusetzen: Storytelling mit Scrollen.

Die berühmte Karte von Minard, die als eine der besten Infografiken überhaupt gilt, dient als faszinierendes Beispiel.

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:

Scrollytelling mit R und Quarto: Elegantes Storytelling mit Scrollen

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.

Karte von Charles Minard von 1869. Sie zeigt den Verlust an Soldaten, die Truppenbewegungen und die Temperaturen im Laufe von Napoleons Russlandfeldzug 1812 / 1813.
Karte von Charles Minard von 1869 zu Napoleons Russlandfeldzug 1812 / 1813.
Klicken für größere Ansicht.
Quelle: Wikipedia

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:

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!

Freue mich über Kommentare!

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu.