Tipps

Sobald man die beiden Datensätze p1_wide und p1_long heruntergeladen hat, sollte man sich deren Aufbau anschauen. Der relevanteste Unterschied beider Datensätze besteht darin, dass die Prozentangaben der einzelnen Parteien bei p1_long in einer Spalte vorliegen, während bei p1_wide für jede Partei eine eigene Spalte vorliegt. Dadurch ergibt sich eine nötige Erweiterung des Datensatzes für die Erstellung der Diagramme: Bei p1_long musst du eine neue Variable mit den kumulierten Prozentangaben für die einzelnen Parteien erstellen. Dafür kannst du dir mal die tapply-Funktion anschauen.

Überlege dir, welche Input-Fenster für die App benötigt werden. Zur Hilfe kannst du hier eine kleine Übersicht der Input-Funktionen sehen:

In jedem Fall benötigst du Inputs für einfachen Text, eine Datumsspanne, Checkboxen und einen Button. Ein weiterer wichtiger Punkt für das User Interface ist die sogenannte navbarPage. Innerhalb dieser Funktion bestimmst du mit einzelnen tabsetPanel-Befehlen die Inhalte der verschiedenen Unterseiten. Schau dir dafür einfach die Hilfefunktion in R an oder suche im Internet nach weiterer Hilfe.

Zusatz: Sofern du alle Bestandteile im Einzelnen erstellen konntest, besteht nun die Frage, wie diese möglichst ästhetisch angeordnet und formatiert werden können. Da shiny auf Basis von HTML funktioniert, können dir hier auch Kenntnisse von CSS (Cascading Style Sheets - " gestufte Gestaltungsbögen") weiterhelfen. Schau dir dafür gerne auch Tutorials zu CSS an oder suche explizit nach der Umsetzung bestimmter Gestaltungsideen. An einigen Stellen im User Interface kannst du verschiedenste Gestaltungsvorschriften einsetzen, deren Gültigkeit vom gesamten Dokument bis auf die kleinste Einheit reichen kann. Derart lassen sich verschieden spezifische Optimierungen ästhetischer Natur überall im R-Skript vornehmen. Im Folgenden siehst du zwei beispielhafte Befehle:

##Beispiel 1 - Stellung im Skript relevant
style = "background: #337ab7; color: white;" #bestimmt je nach Stellung im Skript Hintergrundfarbe und Schriftfarbe

##Beispiel 2 - Allgemeine Style-Vorschrift am Anfang des Dokuments
tags$head(
  tags$style(".navbar {background-color: #eded00;}", #bestimmt Hintergrundfarbe der "navbar"
             ".navbar-default .navbar-brand {color: black; background-color: #ffaa00}")) #bestimmt Hintergrundfarbe und Schriftfarbe des Navbar-Titels

Beim Server geht es darum, die Outputs der App zu erstellen und dabei die Inputs mit einzubeziehen. Die bereits erstellten Diagramme musst du dafür zunächst in eine render-Funktion einfügen und dann anhand der zuvor definierten Bezeichnungen im User Interface den richtigen Outputs zuweisen. Eine kurze Erklärung dazu erhältst du hier. Für das Einbeziehen der Inputs in die Diagramme benötigst du Wissen darüber, wie die eingegebenen Daten in den Input-Variablen vorliegen (abrufen kannst du die Inputs über input$inputId). Der Titel wird als normaler Text vorliegen, weshalb man input$Titel einfach an die Stelle des Titels setzen kann. Der Input der Datumsspanne wird aus zwei Daten im Format “yyyy-mm-dd” bestehen (input$Datum[1] und input$Datum[2]). Damit R diese auch als Datum erkennen kann, müssen diese in das POSIXct-Format umgewandelt werden (das geht einfach mit asPOSIXct). Dann kann man mit zwei einfachen größer (>)/kleiner (<) Bedingungen die erwünschte Datumsspanne aus dem Datensatz herausfiltern. Hierfür braucht man die reactiveValues-Funktion zum Erstellen eines reaktiven Datensatzes (als Ausgangspunkt für Veränderungen anhand des Inputs und als Default-Datensatz zur Erstellung der Diagramme beim Öffnen der App) und die observeEvent-Funktion, damit die Aktualisierung des verwendeten Datensatzes erst nach dem Betätigen des Action-Buttons geschieht. Ist diese Veränderung vorgenommen, muss man auch den in den Diagrammen verwendeten Datensatz verändern (dort muss der reaktive Datensatz eingesetzt werden). Denk dabei daran, dass in den Diagrammen mit zwei Datensätzen gearbeitet wird, weshalb du zwei reaktive Datensätze erstellen musst. Als letztes musst du noch den Input der zu verwendenden Parteien in die Veränderung der reaktiven Datensätze (innerhab der observeEvent-Funktion) einbeziehen. Innerhalb von input$Parteien liegen die ausgewählten Parteien als Faktoren vor (z.B. CDU), weshalb du mithilfe einer is.element-Bedingung die ausgewählten Parteien aus dem Ursprungsdatensatz herausfiltern kannst.

Der erste Tipp behandelt einige notwendige sowie auch optionale Vorbereitungen. Dabei geht es in erster Linie um die Anpassung der Sudoku-Ausgabe für die App. Wenn man die Abbildung aus Projekt 5 übernimmt, hat man ein Sudoku-Gitter mit farbig hinterlegten Zahlen und der Überschrift “Sudoku”. Als Abbildung allein ergibt das vielleicht Sinn, doch für die App sollten einige Veränderungen daran vorgenommen werden:

1. Die Beschriftung der Achsen sollte wieder hinzugefügt werden.
2. Die Legende auf der rechte Seite sollte entfernt werden.
3. Das Sudoku benötigt keinen Titel (dieser sitzt in der App an einer anderen Stelle).
4. Die Abstände des Sudokus zu den Rändern der Abbildung können mit dem mar-Argument in der par-Funktion angepasst werden.
5. Die Größe der Zahlen in den Feldern kann vergrößert werden.

Dieser Tipp beschäftigt sich mit der Frage “Wie soll die App aufgebaut sein und welche Bestandteile soll diese implizieren?”. Im User Interface muss entschieden werden, mit welchen Inputs das Einsetzen von Zahlen und das Hochladen eines eigenen Sudokus umgesetzt werden sollen. Das Einsetzen von Zahlen gestaltet sich nicht so einfach wie in der analogen Form, bei der man “einfach” eine Zahl in ein Kästchen schreibt. In einer digitalen Form muss angegeben werden, an welcher Position die ausgewählte Zahl eingesetzt werden soll. Aus diesem Grund braucht man hier neben einem Zahlen-Input zwei weitere Zahlen-Inputs für Zeilen und Spaltenangabe jeweils mit einem Wertebereich von 1 bis 9 sowie auch einen Action-Button für das tatsächliche Einsetzen der Zahl. Für das Hochladen eines eigenen Sudokus braucht man darüber hinaus einen Input für Dateien. Damit es dabei zu keinen Problemen kommt, kann man hier auch einen weiteren Action-Button einbauen, der später steuert, ob und wann genau die hochgeladene Datei als Quelle für die Abbildung übernommen werden soll.

Als zweiter Punkt geht es im User Interface darum, die benötigten Inputs ansehnlich anzuordnen, sodass auch eine optisch ansprechende App entsteht. Dafür benutzen wir in diesem Fall das übergeordnete Layout pageWithSidebar, das aus sidebarPanel und mainPanel (+ optional einem titlePanel) besteht. Darüber hinaus kann die App auch durch weitere Style-Vorgaben verschönert werden, die man mithilfe der Formatierungssprache CSS in R einbinden kann. Beispiele dafür siehst du hier:

##Beispiel 1 - Stellung im Skript relevant
style = "background: #337ab7; color: white;" #bestimmt je nach Stellung im Skript Hintergrundfarbe und Schriftfarbe

##Beispiel 2 - Allgemeine Style-Vorschrift am Anfang des Dokuments
tags$head(
  tags$style(".navbar {background-color: #eded00;}", #bestimmt Hintergrundfarbe der "navbar"
             ".navbar-default .navbar-brand {color: black; background-color: #ffaa00}")) #bestimmt Hintergrundfarbe und Schriftfarbe des Navbar-Titels