Styling

Überblick

In diesem Practical wirst du an der ästhetischen Gestaltung deines Berichts arbeiten

Am Ende des Practicals wirst du wissen wie man:

Den YAML header mit einem Inhaltsverzeichnis und einem neuen Theme ergänzt.
Ein zwei Spalten Layout erstellt, dass den Text in der linken und die Grafiken/Tabellen in der rechten Spalte anzeigt.
Eine CSS Datei erstellt und in deinen Bericht einbindet.

Aufgaben

A - Setup

Öffne dein TheRBootcamp R Projekt. Es sollte die Ordner 1_Data, 2_Assets, und 3_Markdown enthalten.
Lade die airbnb_level_two.Rmd Datei, das fertige Produkt am Ende des zweiten Markdown Practicals.
Speichere die Datei und dem neuen Namen: airbnb_level_three.Rmd ab.

B - YAML erweitern

Um Einstellungen des Dokuments vornehmen zu können füge zunächst hinter html_document im YAML Header einen Doppelpunkt hinzu.
Füge nun in einer Zeile darunter toc: true hinzu um ein Inhaltsverzeichnis zu ergänzen. Stelle sicher, dass toc: true gegenüber html_document: eingerückt ist. Knitte das Dokument. Siehst du alle Überschriften im Inhaltsverzeichnis?
Damit alle Überschriften Levels angezeigt werden ergänze in einer weiteren Zeile (selbe Ebene wie toc: true) den Befehl toc_depth: 5.
Knitte das Dokument. Wird der Abschnitt Neueinstellungen mit zwei Unterkapiteln Entwicklung und Stadteile angezeigt?
Füge in einer neuen Zeile: includes: hinzu und dann darunter eingrückt in_header: ../2_Assets/header.Rhtml ein. Damit lädst du eine kleine HTML Vorlage für den Kopf des Berichts.
Knitte das Dokument. Hat sich die Anzeige des Titels und Untertitels verändert? Ist das AirBnB Logo zu sehen?
Entferne nun die Zeile mit title: aus dem YAML Header, da jetzt kein zweiter Titel benötigt wird.
Als letztes Gestaltungselement ergänze theme: lumen auf der selben Ebene wie toc: true oberhalb von includes:, womit verschiedene Eigenschaften des Schriftbildes angepasst werden (hier findest du eine Übersicht über weitere Themes)
Knitte das Dokument. Sieht alles in Ordnung aus?

C - Grafiken

Als ersten Schritt um die Grafiken weiter anzupassen, ergänze in den allgemeinen Chunk-Optionen (knitr::opts_chunk$set()) im setup Chunk das Argument dev.args = list(bg = "transparent").
Nun ergänze im setup Chunk folgenden Code, welcher das theme der ggplot Grafiken auf theme_minimal setzt. Knitte das Dokument. Hat sich etwas verändert?

theme_set(theme_minimal())

Ergänze nun darunter folgenden Code um dafür zu sorgen, dass die Hintergründe der Grafiken transparent sind.

theme_update(panel.background = element_rect(fill = "transparent", colour = NA),
             plot.background = element_rect(fill = "transparent", colour = NA))

Gleich darunter, im setup Chunk, stelle mit folgendem Code die Farbpaletten der ggplot Grafiken auf die AirBnB Farben ein.

ggplot <- function(...) ggplot2::ggplot(...) + 
  scale_fill_gradientn(colors = c('#555555','#6BB7B9')) + 
  scale_colour_gradientn(colors = c('#555555','#6BB7B9'))

Knitte das Dokument. Hat sich der Hintergrund und die Farbpalette der Grafiken verändert?

D - CSS Funktionen anpassen

Die Bildunterschriften sind noch nicht zentriert. Setze das HTML Tag center um die beiden cap Definitionen der Grafiken. Siehe Code.

"<center>Abbildung 1. Neueinstellungen pro Monat</center>"
"<center>Abbildung 2. Neueinstellungen pro Bezirk</center>"

In der Regressions-Tabelle, die Du mit sjPlot erstellt hast, ergänze CSS = list(css.caption = "font-weight: 500") um die Schrift anzupassen
Im gleichen Argument füge css.table = "width: auto; margin-right: 0px;margin-left: auto;" zusätzlich in die list ein, um die Tabelle rechts auszurichten.

E - Layout in 2 Spalten setzen

Setze folgenden HTML Code im Abschnitt Entwicklung ein - damit positionierst du den Text in die linke Spalte und die Grafik in die rechte Spalte.

Um nun die Berichtinhalte in zwei Spalten zu trennen - Text links, Abbildung rechts - setze zwischen #### Entwicklung und dem ersten Absatz “Seit …” folgenden HTML Code ein. Noch nicht Knitten!

<table>
  <col width = 40%>
  <col width = 10%>
  <col width = 50%>
  <tr>
  <td>

Ergänze nun zwischen dem zweitem Absatz und dem Grafik-Chunk den folgenden Code. Noch nicht Knitten!

  </td>
  <td>
  
  </td>
  <td>

Schliesslich ergänze zwischen dem Grafik-Chunk und #### Stadtteile den folgenden Code, welcher die HTML Tabelle abschliesst.

  </td>
  </tr>
</table>

Knitte jetzt das Dokument. Sind der Text und die Grafik nun in 2 Spalten gesetzt?
Für die weiteren Abschnitte gehe gleich vor. Zwischen #### Stadtteile und dem Code-Chunk für die Berechnung der Häufigkeiten über die Bezirke fügen den folgnden HTML Code ein. Noch nicht Knitten!

<table>
  <col width = 40%>
  <col width = 10%>
  <col width = 50%>
  <tr>
  <td>

Nach dem in fett gesetzten Absatz “Die grösste Veränderung…” und dem Grafik-Chunk füge den folgenden Code ein. Noch nicht Knitten!

  </td>
  <td>
  
  </td>
  <td>

Schliesslich ergänze nach dem Grafik-Chunk und vor ### Preis folgende HTML code um die Tabelle abzuschliessen.

  </td>
  </tr>
</table>

Knitte jetzt wieder das Dokument. Sind der Text und die Grafik nun in 2 Spalten gesetzt?
Für den Abschnitt ###Preis gehe gleich vor. Ergänze nach dem ersten Code-Chunk mit Berechnungen zur Ausstattung und vor dem ersten Absatz den folgenden Code. Noch nicht Knitten!

<table width=100%>
<col width = 25%>
<col width = 10%>
<col width = 65%>
<tr>
  <td>

Nach dem zweiten, fett gesetzten Absatz und dem Grafik Chunk füge folgenden Code ein. Noch nicht Knitten!

  </td>
  <td>
  
  </td>
  <td>

Ergänze nach dem Grafik Chunk und vor #### Regressionsmodell den Abschluss der Tabelle.

  </td>
  </tr>
</table>

Knitte jetzt wieder das Dokument. Sind der Text und die Grafik nun in 2 Spalten gesetzt?
Setze den letzten Abschnitt selbständig mit einer HTML Table (widths 50%, 10%, 40%) in 2 Spalten.
Knitte wieder das Dokument. Der gesamte Text ist nun in 2 Spalten gesetzt mit den Textinhalten links und den Grafiken bzw. Tabellen rechts.

F - CSS

Um allgmeine Gestaltungsmkermale des gesamten HTML-Berichts zu ändern erstelle die Datei my_airbnb.css und speichere sie in 2_Assets ab. Du kannst die Datei direkt in RStudio erstellen und mit .css als Extension speichern.
Binde nun die leere Datei im YAML Header deines Airbnb Markdown Dokumentes ein. Dafür ergänze css: ../2_Assets/airbnb.css unter html_document: (selbe Ebene wie toc: true)
Füge den folgenden Code in my_airbnb.css hinzu um die vertikale Ausrichtung der Tabellen anzupassen. Speichere die .css Datei und knitte dein Markdown Dokument.

table td {
  vertical-align: top;
  }

Ergänze weiterhin folgenden Code my_airbnb.css um Schriftart und Farbe der beiden Überschriftenlevel anzupassen. Die .css Datei speichern und knitten.

h3, h4 {
  font-weight: 500;
  color: #555555;
}

Um sowohl die Farbe des Links, als auch den Mouseover Effekt (Link verändert sich, wenn der Mauscursor auf den Link zeigt) an das Farbschema anzupassen ergänze folgenden Code in my_airbnb.css und knitte das Dokument.

a, a:hover {
  color: #007D8C;
  }

Als letztes Designelement wirst du nun ein Wasserzeichen als Hintergrundbild einfügen. Ergänze dafür den folgenden Code in deiner my_airbnb.css Datei und knitte das Dokument.

body {
  background-image: url(watermark.svg);
  background-repeat: repeat-y;
  background-size: contain;
  }

Knitte dein Dokument. Du solltest nun einen wohlformatierten AirBnB Bericht vor dir haben.
Speichere das fertige Dokument unter: 3_Markdown/airbnb_final.Rmd ab.

G - Export als PDF

Um den Bericht nun als PDF ausgeben und teilen zu können, kannst du wk<html>topdf verwenden (vorausgesetzt du hast die Software installiert). Verwende hierzu den Befehl unten im Terminal (nicht im Markdown). Danach sollte sich im Markdown Ordner die Datei airbnb_final.pdf befinden, welche du öffnen und begutachten kannst.

wkhtmltopdf --javascript-delay 1 3_Markdown/airbnb_final.html 3_Markdown/airbnb_final.pdf

Datensatz

Der airbnb.csv Datensatz enthält Zahlen zu 9868 Berliner Airbnbs

Variable	Beschreibung
Preis	Preis pro Nacht
Erstellungsdatum	Eröffnungsdatum des Airbnbs
Unterkunftsart	Appartement, Loft, House, etc.
Schlafplätze	Anzahl Schlafplätze
Schlafzimmer	Anzahl Schlafzimmer
Badezimmer	Anzahl Badezimmer
Reinigungsgebühr	Reinigungsgebühr
Verfügbarkeit_90Tage
Viertel	In welchem Viertel befindet sich das Airbnb
Stadtteil	In welchem Stadtteil befindet sich das Airbnb
Breitengrad	Breitengrad
Längengrad	Längengrad
Host_id	Host id
Host_seit	Erfahrung des Hosts
Host_antwortzeit	Host Antwortzeit
Host_antwortrate	Host Antwortrate
Host_superhost	Superhost Ja/Nein
Host_anzahl	Anzahl Gäste
Rating_gesamt	Gesamtrating
Rating_genauigkeit	Genauigkeitsrating
Rating_sauberkeit	Sauberkeitsrating
Rating_checkin	Checkinrating
Rating_kommunikation	Kommunikationsrating
Rating_lage	Lagerating
Rating_wertigkeit	Wertigkeitsrating
Küche	Küche vorhanden TRUE/FALSE
Wifi	WLAN vorhanden TRUE/FALSE
TV	TV vorhanden TRUE/FALSE
Kaffeemaschine	Kaffeemaschine vorhanden TRUE/FALSE
Geschirrspüler	Geschirrspüler vorhanden TRUE/FALSE
Terrasse_Balkon	Terrasse/Balkon vorhanden TRUE/FALSE
Badewanne	Badewanne vorhanden TRUE/FALSE
Check_in_24h	24h Check-In vorhanden TRUE/FALSE

Funktionen

Paket

Paket	Installation
`tidyverse`	`install.packages("tidyverse")`

Funktionen

Funktion	Paket	Beschreibung
`scale_fill_gradientn`	`ggplot`	Erstellt eine Farbpalette
`scale_colour_gradientn`	`ggplot`	Erstellt eine Farbpalette
`theme_set`	`ggplot`	Festlegung und Gestaltung von themes

Materialien

HTML Referenz
CSS Referenz
DIE Referenz für RMarkdown bis ins letzte Detail.
Rmarkdown Dokumentation und Befehlsreferenz.

Styling

Reporting mit R The R Bootcamp

Überblick

Aufgaben

A - Setup

B - YAML erweitern

C - Grafiken

D - CSS Funktionen anpassen

E - Layout in 2 Spalten setzen

F - CSS

G - Export als PDF

Datensatz

Funktionen

Paket

Funktionen

Materialien

Reporting mit R
The R Bootcamp