{"id":321,"date":"2018-05-27T09:01:30","date_gmt":"2018-05-27T07:01:30","guid":{"rendered":"https:\/\/benedict-witzenberger.de\/wordpress\/?p=321"},"modified":"2018-05-26T20:57:26","modified_gmt":"2018-05-26T18:57:26","slug":"r-shiny-statt-javascript","status":"publish","type":"post","link":"https:\/\/benedict-witzenberger.de\/wordpress\/2018\/05\/27\/r-shiny-statt-javascript\/","title":{"rendered":"Shiny statt Javascript"},"content":{"rendered":"

Mit Javascript wird das Internet interaktiv. Das kann auch bei Datenanalysen wichtig sein. Mit „Shiny“ klappt sowas auch in R \u2013 ganz ohne Javascriptkenntnisse.<\/strong><\/p>\n

Zun\u00e4chst ein Gest\u00e4ndnis: Ich habe Probleme mit Javascript. Leider kann ich nicht genau begr\u00fcnden, warum \u2013 denn im Grunde finde ich die Sprache hervorragend in ihrer Flexibilit\u00e4t. Aber irgendwie komme ich mit der Syntax nicht ganz klar. Mein Gl\u00fcck: Ich darf oft mit super Entwicklern zusammenarbeiten, die JS im Schlaf schreiben k\u00f6nnen. Ich kann mich dann darauf konzentrieren, die Daten im Vorfeld bereitzustellen mit Python oder R.<\/p>\n

Immer wieder kommt es aber vor, dass wir Datenjournalisten den Fachredakteuren aus verschiedenen Ressorts gro\u00dfen Datenmengen zug\u00e4nglich machen m\u00fcssen. W\u00e4hrend wir am schnellsten w\u00e4ren, wenn wir die Analysen einfach in R-Code schreiben k\u00f6nnen, brauchen die Kollegen was einfacheres. Und trotzdem sollten sie zu eigenen Erkenntnissen kommen k\u00f6nnen. Exceltabellen sind da oft nicht die ideale L\u00f6sung.<\/p>\n

In einem meiner letzten Gro\u00dfprojekte zu den Wanderungsbewegungen in M\u00fcnchen<\/a> habe ich sehr viel mit R Markdown-Dokumenten gearbeitet, in denen die Redakteure Tabellen zu verschiedenen Themen durchsuchen konnten. Das war gut, aber ich will f\u00fcr die Zukunft andere M\u00f6glichkeiten ausprobieren. Da kommt mir ein Einfall von neulich ganz recht, um mal Shiny auszuprobieren. denn ich will meine Daten selbst interaktiv bekommen.<\/p>\n

Was ist Shiny?<\/h2>\n

Shiny ist zun\u00e4chst Mal ein Paket f\u00fcr R. Es erm\u00f6glicht, interaktive Web-Apps direkt in R zu programmieren, ohne dass die Daten von R rausgespeichert werden m\u00fcssen und dann mit Javascipt (oder anderen Sprachen) weiterverarbeitet werden. Shiny verspricht viel Funktionalit\u00e4t: Ausgabe als HTML-Dateien, flexible Layouts und Themes, eigenes CSS oder interaktive htmlwidgets (auch eine R-Bibliothek).<\/p>\n

Meine Idee: Ein WM-Planer<\/h2>\n

Ich stand neulich vor einem Problem: Ich wollte einen Termin Anfang Juli planen. Zwar hatte ich auf dem Schirm, dass da Fu\u00dfball-WM ist. Aber wann genau Deutschland spielt, musste ich erst m\u00fchsam ergooglen. Meine Idee soll das vereinfachen: Eine kleine App mit zwei Auswahlfeldern f\u00fcr alle Mannschaften und ihr Abschneiden in der Vorrunde. Daraus l\u00e4sst sich der komplette Weg ins Finale ableiten. Und es ist ein einfaches Beispiel f\u00fcr den Einsatz von Shiny mit ein wenig Interaktivit\u00e4t und einer \u00fcberschaubaren Datenmenge.<\/p>\n

Die Vorarbeit<\/h2>\n

An die Daten zu kommen ist kein Problem. Es gibt zahlreiche M\u00f6glichkeiten, den WM-Spielplan maschinenlesbar zu bekommen, etwa als JSON<\/a> oder als CSV<\/a>.<\/p>\n

Ich habe mir die Daten als CSV heruntergeladen und in R vorbereitet. Dazu geh\u00f6rt zum Beispiel, das Datum in das richtige Format f\u00fcr die interne Datenverarbeitung umzuwandeln (als sogenanntes POSIXct). Das geht gut mit der Bibliothek lubridate<\/a>. Au\u00dferdem musste ich aus den Daten die jeweiligen Gruppen extrahieren (nicht „Group XYZ“, sondern nur „XYZ“). Das klappt gut mit dem Package stringR<\/a> und dessen Funktion str_extract()<\/a>. Der „spektakul\u00e4rste“ Teil ist das Umwandeln vom sogenannten „langen Format“ der Daten in das „weiten Format“. Beim langen Format steht jede Beobachtung mit nur einer Variable in einer Zeile, die Daten werden quasi \u00fcbereinander gestapelt. Beim weiten Format steht jede Spalte f\u00fcr eine Variable und jede Zeile f\u00fcr eine Beobachtung. Das funktioniert hier besser. Diese Umwandlung erledigt das Paket tidyR<\/a> f\u00fcr uns. Mit der Funktion spread()<\/a>.<\/p>\n

library(tidyverse)\r\nlibrary(lubridate)\r\n\r\ndata <- read.csv(\"match_schedule.csv\")\r\n\r\ndata$Group <- as.character(data$Group)\r\ndata$Home.Team <- as.character(data$Home.Team)\r\ndata$Away.Team <- as.character(data$Away.Team)\r\ndata$Date <- dmy_hm(data$Date, tz=\"Europe\/Berlin\")\r\n\r\ndata %>%\r\nmutate(Group = str_extract(Group, \"[A-Z]$\")) %>%\r\nselect(-Result) -> data\r\n\r\nteams <- unique(filter(data, Round.Number %in% c(1,2,3))$Home.Team)\r\n\r\ndata %>%\r\ngather(key = \"Place\", value = \"Team\", Home.Team:Away.Team) -> data_long\r\n\r\ndata_vorrunde <- list()\r\nfor (i in seq_along(teams)) {\r\n\r\ndata_long %>%\r\nfilter(Team == teams[i]) %>%\r\ngroup_by(Team) %>%\r\nselect(-c(Location, Place)) %>%\r\nspread(Round.Number, Date) -> d_current\r\n\r\ndata_vorrunde[[i]] <- d_current\r\n}\r\n\r\ndata_vorrunde <- bind_rows(data_vorrunde)\r\ncolnames(data_vorrunde) <- c(\"Group\", \"Team\", \"Erste Runde\", \"Zweite Runde\", \"Dritte Runde\")<\/pre>\n
Die Vorarbeit ist beendet. An dieser Stelle speichere ich die Daten in R und mache kurz mit Excel weiter, um dort die Daten f\u00fcr die m\u00f6glichen Wege durch die Finals einzuf\u00fcgen? Warum? Weil es schneller geht. Ich k\u00f6nnte theoretisch Filter bauen, um immer genau die Spiele zu treffen, bei denen ich bestimmte Daten f\u00fcr Achtel-, Viertel- und Halbfinale eintragen will. Denn meine Daten bisher enthalten logischerweise nur die Gruppenspiele, noch keine Finalspiele. Doch die kann ich auch schon vorhersehen, je nachdem, ob die Teams Gruppenerster oder Gruppenzweiter werden. Aber das dauert in R etwa genauso lange, wie die Arbeit in Excel. Da ich das nur einmal machen muss, bin ich mit einer optischen Tabellenverarbeitung auch z\u00fcgig unterwegs.<\/p>\n
Ich suche mir also alle Spielpaarungen (unter anderem der Kicker hat da eine gute \u00dcbersicht<\/a>), die die gleichen Termine haben (Gruppenerste von der einen Gruppe, Gruppenzweite von einer anderen) und f\u00fcge die in die noch leeren Spalten ein, au\u00dferdem kopiere ich die Spiele und f\u00fcge die Trennung „Gruppenerster\/Gruppenzweiter“ als Variable ein. Gespeichert wird das Ergebnis in Excel als CSV und dann wieder in R geladen.<\/p>\n
In R muss ich leider die Spalten wieder ins richtige Datumsformat bringen. CSVs speichern das nicht ab. (Ich k\u00f6nnte mir das also ganz am Anfang sparen) Damit ich das nicht f\u00fcr alle Spalten einzeln machen muss, nutze ich mutate_at(), das hier in den Spalten 3 bis 10 arbeitet (also diese Spalten modifiziert, wie ich das uns .funs eingebe):<\/p>\n
data_edited %>%\r\nmutate_at(.vars = c(3:10), .funs = dmy_hm, tz=\"Europe\/Berlin\") -> data_edited<\/pre>\n
Danach bringe ich die bisher noch englischen Teamnamen mit einem W\u00f6rterbuch f\u00fcr die deutschen Begriffe zusammen. So haben wir hinterher die Teams in der deutschen Schreibweise:<\/p>\n
countries %>% read_csv2(\"countries.csv\")\r\n \r\ndata_edited %>%\r\n left_join(countries, by = c(\"Team\" = \"Englisch\")) -> data_edited<\/pre>\n
Das Ergebnis geht jetzt an die App. Ich speichere es als RDS-Datei. Ein R-Format.<\/p>\n
Die Shiny-App<\/h2>\n
Eine Shiny-App besteht aus zwei Komponenten. Man kann die in zwei verschiedene Dateien schreiben, man kann sie aber auch kombinieren, was ich in diesem Beispiel mache. Das ist hier \u00fcbersichtlicher. Ein guter Startpunkt f\u00fcr die Entwicklung mit Shiny ist das Tutorial bei RStudio<\/a>, oder der Kurs bei Datacamp<\/a> ($). Es ist anfangs ein bisschen kompliziert, geht aber nach einer kurzen Einarbeitungszeit ganz gut von der Hand.<\/p>\n
Zun\u00e4chst werden \u2013 wie bei R \u00fcblich \u2013 die ben\u00f6tigten Pakete geladen. Au\u00dferdem lade ich hier unsere Daten von eben als Variable d<\/em>.<\/p>\n
Die beiden Shiny-Komponenten sind die sogenannte UI und der Server. Beide muss ich definieren, und am Ende zur App kombinieren.<\/p>\n
Die UI<\/h3>\n
In der Variable ui definiere ich das Aussehen der App. Vor allem, welche Eingabe und Ausgabefelder es geben wird. Au\u00dferdem kann ich hier einstellen, wie das Seitenlayout funktioniert und das Theme der App (mit der Einstellung theme = „“).<\/p>\n
Die vorgefertigten Layouts basieren auf Bootstrap. Einem Layout, das von Twitter entwickelt wurde, und sich an die Displaygr\u00f6\u00dfe anpasst. Grunds\u00e4tzlich k\u00f6nnten wir aber auch eigene Layouts verwenden.<\/p>\n
Das UI besteht aus verschiedenen Inputs, mit denen die Nutzer unsere Daten ver\u00e4ndern k\u00f6nnen. Eine Auswahl:<\/p>\n