Entwicklungsumgebung vorbereiten

4.3. Entwicklungsumgebung vorbereiten#

In diesem Abschnitt richten wir Ihre Entwicklungsumgebung in RStudio ein, bereiten die benötigten Daten vor und bauen anschließend das Grundgerüst unseres Dashboards auf.

Für das gesamte Dashboard arbeiten wir ab jetzt in der Datei app.R, die Sie bereits in Kapitel 1.2 erstellt haben. Löschen bzw. ersetzen Sie den dortigen Beispielcode Schritt für Schritt durch die nachfolgenden Codeblöcke.

In einer R-Shiny-App werden alle Bibliotheken, Datenladebefehle und globalen Einstellungen ganz oben im Skript (oberhalb der ui- und server-Definition) platziert:

app.R
│
├── 1. Bibliotheken laden (library(...))
├── 2. Daten einlesen & vorbereiten (st_read, readRDS)
├── 3. Globale Einstellungen & Farbpalette (GDK_PALETTE_BASE)
│
├── 4. UI-Definition (ui <- dashboardPage(...))
├── 5. Server-Logik (server <- function(input, output) {...})
└── 6. App starten (shinyApp(ui = ui, server = server))

4.3.1. Einrichtung der Entwicklungsumgebung#

Bevor Sie mit dem Aufbau des Dashboards beginnen können, müssen Sie die benötigten Pakete installieren und laden. Öffnen Sie RStudio und führen Sie folgenden Befehl (wahlweise in der Konsole oder am Anfang eines Skripts) aus, um die erforderlichen Pakete zu installieren:

install.packages(c("shiny", "shinydashboard", "leaflet",
                   "dplyr", "htmltools", "stringr", "sf",
                   "tidyr", "ggplot2", "plotly"))

Nachdem die Installation abgeschlossen ist, laden Sie die Pakete in Ihr Skript:

library(shiny)
library(shinydashboard)
library(leaflet)
library(dplyr)
library(htmltools)
library(stringr)
library(sf)
library(tidyr)
library(ggplot2)
library(plotly)

Jedes dieser Pakete übernimmt eine spezifische Rolle:

  • Benutzeroberfläche (UI): shiny und shinydashboard bilden das interaktive Grundgerüst der Anwendung. htmltools hilft bei erweiterten HTML-Elementen.

  • Datenverarbeitung: dplyr und tidyr strukturieren und verarbeiten die Datensätze, sf lädt und verarbeitet räumliche Daten wie die Berliner Bezirksgrenzen, und stringr hilft bei der Manipulation von Zeichenketten.

  • Visualisierung: leaflet ermöglicht den Bau der interaktiven Landkarte, während ggplot2 und plotly für die Erstellung der Diagramme genutzt werden.

4.3.2. Daten laden und vorbereiten#

Einlesen und Aufbereitung der RDS-Datei

Die Grundlage für unser Dashboard bildet eine RDS-Datei der Nutzungsdaten, welche in Kapitel 3.2 generiert wurde. (Denken Sie daran, Ihr Arbeitsverzeichnis wie in Kap. 3.2 auf den Speicherort von app.R zu setzen, damit data/ gefunden wird.)

Fügen Sie folgenden Code in Ihre app.R direkt unter die Bibliotheken ein. Der dem Code vorangestellte Text hinter dem # zeigt Ihnen an, was die darunter folgenden Codezeilen tun:

# Bezirksgrenzen laden
bezirksgrenzen <- st_read("data/bezirksgrenzen.geojson", quiet = TRUE)

# Bewässerungsdaten laden
df_merged <- readRDS("data/df_merged_final.rds")

# Bezirksgrenzen vorbereiten
berlin_bezirke_sf <- bezirksgrenzen %>%
  rename(bezirk = Gemeinde_name) %>%     # Spalte vereinheitlichen
  mutate(bezirk = str_to_title(bezirk))  # gleiche Schreibweise wie in df_merged

Erklärung des Codes:

  • st_read(...) lädt die GeoJSON-Datei mit den Berliner Bezirksgrenzen als räumliches Objekt ein.

  • readRDS(...) lädt die RDS-Datei mit den vorbereiteten Bewässerungsdaten und gibt das gespeicherte R-Objekt zurück.

  • rename(...) benennt die Spalte Gemeinde_name in bezirk um, um eine einheitliche Schreibweise sicherzustellen.

  • mutate(bezirk = str_to_title(bezirk)) sorgt dafür, dass die Bezirksnamen in der Geodatei dieselbe Schreibweise wie in df_merged haben.

4.3.3. Dashboard bauen#

Farbpalette definieren

Eine globale Farbpalette definiert ein einheitliches Farbschema für alle Grafiken des Dashboards. Dies ermöglicht Konsistenz in der Gestaltung und erleichtert Nutzer:innen die Orientierung. Diese Palette wird in allen Grafiken der folgenden Kapitel konsistent verwendet:

# GLOBALE FARBPALETTE - Einheitliches Farbschema für alle Grafiken
GDK_PALETTE_BASE <- c(
  "#3C6E97", "#6894B5", "#95BBD4", "#C8E0EF",
  "#3E8395", "#67A7B6", "#98CBD6", "#D0EDF2",
  "#508B71", "#7AB097", "#A5D2BC", "#D6EFE5",
  "#4F626E", "#8D9FA9", "#B2C2CC", "#DCE6EB"
)

GDK_ACCENT <- "#95BBD4"

options(ggplot2.discrete.fill = function() scale_fill_manual(
  values = colorRampPalette(GDK_PALETTE_BASE)(16)
))

Erklärung des Codes:

  • GDK_PALETTE_BASE speichert einen Vektor mit Hexadezimal-Farbcodes. Für dieses Dashboard ist hier eine Farbpalette mit 16 Farben definiert. An dieser Stelle lassen sich problemlos eigene Farben eintragen, um eine ganz individuelle Palette zu erstellen. Alternativ können in R auch Pakete wie RColorBrewer oder viridis genutzt werden, die bereits vorgefertigte Farbpaletten zur Verfügung stellen.

  • GDK_ACCENT definiert eine zusätzliche Akzentfarbe für Hervorhebungen.

  • options(ggplot2.discrete.fill = ...) setzt die Farbpalette als globale Voreinstellung für ggplot2. colorRampPalette() interpoliert zwischen den definierten Farben und erzeugt bei Bedarf Zwischentöne.

  • scale_fill_manual() weist diese Farben den diskreten Kategorien eines Diagramms zu. „Manual“ bedeutet dabei, dass die verwendeten Farben nicht automatisch von ggplot2 ausgewählt werden, sondern explizit durch den Parameter values vorgegeben sind. Dadurch kann sichergestellt werden, dass Kategorien in verschiedenen Grafiken nach Möglichkeit mit demselben Farbschema dargestellt werden.

Grundstruktur einer Shiny-Anwendung

Eine typische Shiny-Anwendung besteht aus zwei Hauptkomponenten, die Sie in Kapitel 4.2 kennen gelernt haben:

  1. User Interface (UI): Definiert das Layout und die Gestaltung der Anwendung, einschließlich aller Eingabe- und Ausgabeelemente.

  2. Server: Beinhaltet die serverseitige Logik, verarbeitet Eingaben und generiert entsprechende Ausgaben.

Diese beiden Komponenten führen Sie schließlich durch den Befehl shinyApp(ui = ui, server = server) zusammen, um die Anwendung zu starten.

Das shinydashboard-Paket erweitert Shiny um Funktionen zur Erstellung von Dashboards. Ein Dashboard besteht typischerweise aus drei Hauptbereichen:

  1. Header: Der obere Bereich des Dashboards, der den Titel und optionale Steuerungselemente enthält.

  2. Sidebar: Eine seitliche Navigationsleiste, die Links oder Schaltflächen zur Navigation innerhalb des Dashboards bereitstellt.

  3. Body: Der Hauptbereich, in dem die Inhalte wie Diagramme, Tabellen und Texte angezeigt werden.

Die Grundstruktur eines Dashboards erstellen Sie mit der Funktion dashboardPage(), die die oben genannten Komponenten kombiniert (bitte führen Sie den folgenden Codeabschnitt nicht in der Konsole aus, sondern ersetzen Sie damit vollständig die in Kapitel 1 automatisch generierte Rshiny Schablone im Rshiny Skript):

ui <- dashboardPage(
  # 1. HEADER: Titelbereich des Dashboards
  dashboardHeader(title = "Gieß den Kiez Dashboard"),

  # 2. SIDEBAR: Seitliche Navigationsleiste mit Menüeinträgen
  dashboardSidebar(
    sidebarMenu(
      menuItem("Startseite", tabName = "start", icon = icon("home")),
      menuItem("Karte", tabName = "map", icon = icon("map")),
      menuItem("Zeitverlauf", tabName = "stats", icon = icon("bar-chart")),
      menuItem("Baumstatistik", tabName = "engagement", icon = icon("bar-chart")),
      menuItem("Bewässerungsanalyse", tabName = "analysis", icon = icon("chart-area"))
    )
  ),

  # 3. BODY: Inhaltsbereich
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "start"
        # Hier folgt später der UI-Code für die Startseite (Texte, Bilder, etc.)
      ),
      tabItem(
        tabName = "map"
        # Hier folgen später die UI-Komponenten für die Karte
      ),
      tabItem(
        tabName = "stats"
        # Hier folgen später die UI-Komponenten für den Zeitverlauf
      ),
      tabItem(
        tabName = "engagement"
        # Hier folgen später die UI-Komponenten für die Baumstatistik
      ),
      tabItem(
        tabName = "analysis"
        # Hier folgen später die UI-Komponenten für die Bewässerungsanalyse
      )
    )
  )
)

# 4. SERVER: Backend-Logik, die Daten verarbeitet und an die UI generiert
server <- function(input, output, session) {
  # Hier folgt später der R-Code zur Datenverarbeitung (z.B. renderPlot, renderLeaflet),
  # der die Grafiken und Inhalte für die jeweiligen Tabs im Body erzeugt.
}

# 5. Zusammenführung: Startet die Shiny-Anwendung
shinyApp(ui = ui, server = server)

Die sidebarMenu-Funktion definiert die Navigationselemente, während tabItems die entsprechenden Inhalte für jeden Tab bereitstellt.

Interaktive Elemente und Reaktivität

Ein wesentliches Merkmal von Shiny ist seine Reaktivität, die es ermöglicht, dass sich Ausgaben automatisch aktualisieren, wenn sich Eingaben ändern. Dies wird durch reaktive Funktionen und Objekte erreicht.