Storytelling with Data

class: title-slide

# ER015 - Storytelling with Data

## PVA3

### Datenprodukte - Dashboards.

<br>
<br>
<br>
<br>
<br>
<br>
<br>
### HS 2024 
<br>
### Prof. Dr. Jörg Schoder
.mycontacts[
<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> @FFHS-EconomicResearch
<svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg> @jfschoder
]

---
layout: true

<div style="position: absolute;left:400px;bottom:10px;font-size:9px">©Prof. Dr. Jörg Schoder</div>

---
name: agenda
class: left

.blockquote[Agenda]

## Interaktive Datenprodukte: Dashboards

* Einführung

* Gestaltung von Dashboards

* Dashboards ind R: flexdashboard und Quarto

* **Übung** *flexdashboard*

---
name: motivation
class: left

.blockquote[Einführung]

## Was sind Dashboards?

.blockquote[
[..] are popular methods for displaying multiple visualisations and statistical
information. [..] often take the form of some organisational instrument that offers
both at-a-glance and detailed views of many different analytical and information dimensions.
[..] are not a unique chart type themselves, but rather should be considered
compositions that comprise multiple chart types.
.tr[
<a name=cite-kirk_data_2019-1></a>[Kirk (2019)](#bib-kirk_data_2019-1)
]
]

* Sammlung von Containern als zusammenhängende visuelle Oberfläche.

* Inhalte der Container:
  * Diagramme und Karten
  * Tabellen und Einzelwerte
  * Text und benutzerdefinierte Widgets

* Ziel: Übersichtliche Zusammenstellung von Informationen für die Nutzer, die zum Denken anregt und Entscheidungen unterstützt.

???

Dashboards sind also eine Form eines Datenprodukts (für Endnutzer)

---
class: left

.blockquote[Einführung]

## Interaktive und Reaktive Dashboards

.panelset[
.panel[.panel-name[Vorteile]

* Nutzer können... 
  * ...Daten im "eigenen Tempo" und Detaillierungsgrad untersuchen
  * ...verschiedene Szenarien vergleichen

* Erleichterung von Verständnis und Handlungsempfehlungen durch...
  * ...klare, prägnante und visuelle Präsentation der Daten und 
  * ...Hervorhebung wichtiger Erkenntnisse
  
* Steigerung des Interesses durch dynamisches und interaktives Erlebnis

]
.panel[.panel-name[Nachteile]

* Aufwand zur Erstellung interaktiver Dashboards: komplexe Datenverarbeitungs-, Visualisierungs- und Interaktivitätsfunktionen
* Aufwand zur Pflege: Notwendigkeit regelmäßiger Tests und Aktualisierungen

* Voraussetzung von Kompetenzen beim Nutzer (Bedienung, Orientierung, Interpretation). 
  * Gefahr der Überforderung und Verwirrung der Nutzer bei Komplexen Dashboards.
  * Hauptbotschaft oder das Ziel des Dashboards?
  
* Risiko der Beeinträchtigung von die Datenqualität oder -sicherheit durch...
  * ...Offenlegung sensibler oder ungenauer Daten oder unbefugte oder
  * ...unbeabsichtigte Änderungen an den Daten durch Nutzer (Rechte!?)

]
]

???

Quelle: [Linkedin](https://www.linkedin.com/advice/3/what-advantages-disadvantages-using-interactive-1e)

---
class: inverse, center, middle

## Gestaltung von Dashboards

.blockquote[Grundregeln für effektive Dashboards]

.blockquote[Beispiele und "Vorlagen"]

---
class: left
.blockquote[Gestaltung von Dashboards]

## Effektive interaktive Dashboards

* Klare Definition von Zweck und Zielgruppe

* Anpassung an Bedürfnisse, Erwartungen und Vorlieben der Zielgruppe

* Vereinfachung durch Fokussierung auf relevanteste Metriken, Indikatoren und Visualisierungen

* Klare Struktur ("Leserführung") und Bereitstellung von Kontext bzw. Interpretationshilfe (inkl. Handlungsempfehlungen) für die Nutzer

* Validierung und Schutz der verwendeten Daten (Sicherstellen von Genauigkeit, Zuverlässigkeit und Sicherheit)

???

Quelle: [Linkedin](https://www.linkedin.com/advice/3/what-advantages-disadvantages-using-interactive-1e)

Um das Beste aus interaktiven Dashboards herauszuholen, ist es wichtig, sie effektiv zu entwerfen und zu nutzen. Definieren Sie den Zweck und die Zielgruppe des Dashboards und passen Sie es an ihre Bedürfnisse, Erwartungen und Vorlieben an. Vereinfachen und optimieren Sie das Dashboard, indem Sie sich auf die wichtigsten und relevantesten Metriken, Indikatoren und Visualisierungen konzentrieren, die seinen Zweck und seine Botschaft unterstützen. Stellen Sie außerdem Anleitungen und Kontext für den Benutzer bereit, indem Sie erklären, wie das Dashboard verwendet wird, was die Daten zeigen und welche Entscheidungen daraus abgeleitet werden können. Validieren und schützen Sie die Daten, um Genauigkeit, Zuverlässigkeit und Sicherheit zu gewährleisten. Auf diese Weise werden alle Änderungen oder Aktualisierungen der Daten im Dashboard widergespiegelt.

---
class: left

.blockquote[Gestaltung von Dashboards]

## Vorlagen und kritische Aspekte

.pull-left[

]
.pull-right[
Inhalte:
* Datenvisualisierung
* Szenarien (Vorlagen), wie bspw.
  * Executive Sales Dashboard
  * Are We on Pace to Reach our Goals?
  * Web Analytics
  * Complaints Dashboard
  * ...
* Personalisierung von Dashboards für mehr Engagement
* "Beware the Dead-End Dashboard"
  
]

???

* Engage People by making Dashboards Personal
  * ZB Drop-Down-Menu mit Filter nach Geschlecht oder Region (Interesse der betrachtenden Person bzw. des Nutzers?)
  * Farben im Corporate Design etc.
* Beware Dead-End Dashboard
  * Congratulations! Building an effective dashboard is a difficult thing to do, and you’ve done it.
  * But **if you think your work is done, think again**; you’re just getting started.
  * **Dashboard projects do not have endings**. Your business evolves over time, and your dashboards should do the same. **If not, they run the risk of becoming dead-end dashboards.**
  * bspw. Anpassung an neue Fragen, die sich durch Nutzung des Dashboards ergeben haben.
  * Erforderlich: Feedback der Nutzer

---
class: left

.blockquote[Gestaltung von Dashboards]

## Beispiel: Executive Sales Dashboard

.quelle[Quelle: <a name=cite-wexler_big_2017-1></a>[Wexler, Shaffer, and Cotgreave (2017)](#bib-wexler_big_2017-1), S. 71.]

???

* Scenario
  * Big Picture: You are a sales manager and want to know **how you and the sales team have been performing this quarter**. You want to be able to see, at any time during the quarter, exactly how total sales for that quarter compare to any previous quarter. You need to be able to see the overview for the whole business and also filter down to individual product lines or regions.
  * Specifics:
    * How are we doing this quarter?
    * How is this quarter compared to last quarter and the same quarter last year?
    * Are we on track to beat the previous quarter? Are we on track to beat the same quarter last year?
    * What are the most recent transactions?
  * Related Scenarios:
    * Product managers would want to compare cumulative sales of different products launched at different times. Even though you launched Product X last year, did it sell quicker than Product Y, which you released this year?
    * Social managers might want to measure how viral their campaigns were. Which campaigns got the most hits the most quickly? Which ones had the most longevity?
    * Event organizers tracking registrations to recurring events would use a dashboard like this to see if their ticket sales are above or below target compared to previous events.
  * How People Use the Dashboard: This dashboard is designed to provide a complete overview of sales for two products. The company executives receive a copy of this email weekly. If they need more details, they can click on a link to go to the live, interactive version viewable in their browser.

* Why this Works
  * focus on year-over-year and Quarter-over-Quarter growth Comparisons
  * Key Metrics as text
  * Small Details Where Needed
  * Color
  * Author Commentary

---
class: inverse, center, middle

## Dashboards in R/Quarto

.blockquote[flexdashboards: Struktur und Layout]

.blockquote[Dashboards in Quarto]

.blockquote[Übung]

---
class: left

.blockquote[Dashboards in R/Quarto]

## Die flexdashboard-Bibliothek

???

* Statische vs. dynamische

* dynamisch durch Integration shiny-Syntax (siehe Teil 3)

---
class: left

.blockquote[flexdashboard]

## Struktur und Elemente von flexdashboards

.panelset[
.panel[.panel-name[YAML-Kopf]

```yaml
---
title: "Mein erstes Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---
```

]
.panel[.panel-name[Zeilen und Spalten]

<img src="data:image/png;base64,#../../img/PVA3/flexdb_layout.PNG" width="100%" style="display: block; margin: auto;" />
]
]

???

* Obs! Layout: `orientation:`
  * colums 
  * rows

* Ausprobieren!

* Obs! Spaltenbreite kann mit `{data-width=x}` angepasst werden. Spalten müssen sich am Ende zu 1000 aufaddieren.

* Inhalte für die Container:

* Interaktive JavaScript Datenvisualisierungen auf Basis von htmlwidgets.
  * R Grafik-Outputs
  * Tabellen (ggf. mit Filter-/Sortierfunktion)
  * Werteboxen zur Hervorhebung zentraler Statistiken (bspw. KPIs)
  * Visualisierung von Werten (bspw. Anteile, Grad der Zielerreichung)
  * Text zur (kurzen) Erläuterung/Betonung

* htmlwidgets:
  * R packages that connect to Javascript libraries.
  * Web-friendly visualizations of all sorts.
  * Well suited to be part of a dashboard.

---
class: left

.blockquote[Dashboards in R/Quarto]

## Layout-Optionen in flexdashboards

---
class: left

.blockquote[Dashboards in R/Quarto]

## Storyboards

.panelset[
.panel[.panel-name[Eingabe und Ergebnis]
<img src="data:image/png;base64,#../../img/PVA3/storyboard.PNG" width="4503" />

]
.panel[.panel-name[Beispiel]
<iframe src="https://testing-apps.shinyapps.io/flexdashboard-storyboard/" width="100%" height="440px" data-external="1"></iframe>

]
]

???

Storyboard

* Statt Containern bzw. mehreren Diagrammen auf einer Seite zeigt ein Storyboard...
* ...**ein Diagramm nach dem anderen**...
* ...**in einer bestimmten Reihenfolge**, die es dem Benutzer erlaubt,...
* ...**eine Story**  nachzuvollziehen.
* Die Story wird in Form kurzer Beschreibungen (Text) für jedes Diagramm angezeigt
* Dabei ist auch eine Navigation mit Pfeilen (von links nach rechts) möglich
* Neben den Diagrammen können noch weitere Textfelder mit Erläuterungen eingebunden werden.
  * Damit sind auch Präsentation mit Action Titles und
  * kurzen Erläuterungen möglich

* Eingabe ganz einfach durch Ergänzung im YAML-Kopf
  * storyboard: true

* Beispiel

---
class: left

.blockquote[Dashboards in R/Quarto]

## Quarto Dashboards

* ab Quarto 1.4 (Stand Januar 2023 noch nicht in RStudio implementiert)

---
class: inverse, center, middle

## Übung flexdashboard

.blockquote[Airbnb-Daten Zürich]

.blockquote[Karten mit leaflet]

.blockquote[Diagramme und Tabellen]

---
class: left

.blockquote[Übung flexdashboard]

## Ziel

.quelle[Eigene Darstellung.]

---
class: left

.blockquote[Übung flexdashboard]

## Step-by-step zum Ziel

1. Datenimport von [insideairbnb.com](http://insideairbnb.com/get-the-data/)

2. Container der "Titelseite" anlegen

3. Container befüllen (Karte, Balkendiagramm, Violin-Plot)

4. Reiter "Details" anlegen (Angebote, Tabelle)

5. Container "Angebote" befüllen (Karte, Kennzahlen, Anzeige)
   
6. Container "Tabelle" befüllen (Interaktive Tabellen mit **DT**-Bibliothek)

---
class: inverse, center, middle

## Ausblick: Shiny Apps

---
class: left

.blockquote[Ausblick Shiny Apps]

---
class: left

.blockquote[Ausblick Shiny Apps]

## Shiny Apps in der flexdashboard-Bibliothek

```yaml
---
title: "Airbnb Zürich"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny 
---
```

---
class: inverse, center, middle

## Zusammenfassung

---
class: left

.blockquote[Zusammenfassung]

## Dashboards...

.small[
* ...als gängige Form von Datenprodukten zur zusammenfassenden Darstellung (entscheidungs-)relevanter Daten.

* ...können mit Diagrammen, Karten, Kennzahlen, Tabellen und weiteren widgets bestückt werden und...

* ...bieten so die Möglichkeit einen Überblick mit selektiven "Deep-Dives" zu verbinden.

* ...können in Form von storyboards gestaltet werden, um den Leser durch das Dashboard zu führen.

* ...sollten unter Berücksichtigung der Grundsätze "guter" Datenvisualisierung gestaltet werden.

* ...sind nur so gut, wie die zur Erzeugung der Statistiken/Diagramme benutzten Daten.

* ...sind mit der flexdashboard-Bibliothek in <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg> flexibel und einfach umsetzbar.

* ...können durch Einbindung von shiny-Apps noch interkativer gestaltet werden.
]

---
name: EndHanks
class: center

background-size: 75%
background-image: url(data:image/png;base64,#https://media.giphy.com/media/KJ1f5iTl4Oo7u/giphy.gif)

---
class: left

## Quellenverzeichnis

.ref-slide[
<a name=bib-kirk_data_2019-1></a>[Kirk, A.](#cite-kirk_data_2019-1)
(2019). _Data Visualisation: A Handbook for Data Driven Design_. 2nd
edition. Los Angeles London New Delhi Singapore Washington DC
Melbourne: SAGE. ISBN: 978-1-5264-6893-2 978-1-5264-6892-5.

<a name=bib-wexler_big_2017-1></a>[Wexler, S., J. Shaffer, and A.
Cotgreave](#cite-wexler_big_2017-1) (2017). _The Big Book of
Dashboards: Visualizing Your Data Using Real-World Business Scenarios_.
Hoboken, New Jersey: Wiley. ISBN: 978-1-119-28271-6.
]