Style
from dvisiondesign.net

Überblick

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

Am Ende des Practicals wirst du wissen wie man:

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

Aufgaben

A - Setup

  1. Öffne dein TheRBootcamp R Projekt. Es sollte die Ordner 1_Data, 2_Assets, und 3_Markdown enthalten.

  2. Lade die airbnb_level_two.Rmd Datei, das fertige Produkt am Ende des zweiten Markdown Practicals.

  3. Speichere die Datei und dem neuen Namen: airbnb_level_three.Rmd ab.

B - YAML erweitern

  1. Um Einstellungen des Dokuments vornehmen zu können füge zunächst hinter html_document im YAML Header einen Doppelpunkt hinzu.

  2. 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?

  3. Damit alle Überschriften Levels angezeigt werden ergänze in einer weiteren Zeile (selbe Ebene wie toc: true) den Befehl toc_depth: 5.

  4. Knitte das Dokument. Wird der Abschnitt Neueinstellungen mit zwei Unterkapiteln Entwicklung und Stadteile angezeigt?

  5. 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.

  6. Knitte das Dokument. Hat sich die Anzeige des Titels und Untertitels verändert? Ist das AirBnB Logo zu sehen?

  7. Entferne nun die Zeile mit title: aus dem YAML Header, da jetzt kein zweiter Titel benötigt wird.

  8. 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)

  9. Knitte das Dokument. Sieht alles in Ordnung aus?

C - Grafiken

  1. 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").

  2. 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())
  1. 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))
  1. 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'))
  1. Knitte das Dokument. Hat sich der Hintergrund und die Farbpalette der Grafiken verändert?

D - CSS Funktionen anpassen

  1. 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>"
  1. In der Regressions-Tabelle, die Du mit sjPlot erstellt hast, ergänze CSS = list(css.caption = "font-weight: 500") um die Schrift anzupassen

  2. 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.

  1. 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>
  1. Ergänze nun zwischen dem zweitem Absatz und dem Grafik-Chunk den folgenden Code. Noch nicht Knitten!
  </td>
  <td>
  
  </td>
  <td>
  1. Schliesslich ergänze zwischen dem Grafik-Chunk und #### Stadtteile den folgenden Code, welcher die HTML Tabelle abschliesst.
  </td>
  </tr>
</table>
  1. Knitte jetzt das Dokument. Sind der Text und die Grafik nun in 2 Spalten gesetzt?

  2. 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>
  1. 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>
  1. Schliesslich ergänze nach dem Grafik-Chunk und vor ### Preis folgende HTML code um die Tabelle abzuschliessen.
  </td>
  </tr>
</table>
  1. Knitte jetzt wieder das Dokument. Sind der Text und die Grafik nun in 2 Spalten gesetzt?

  2. 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>
  1. Nach dem zweiten, fett gesetzten Absatz und dem Grafik Chunk füge folgenden Code ein. Noch nicht Knitten!
  </td>
  <td>
  
  </td>
  <td>
  1. Ergänze nach dem Grafik Chunk und vor #### Regressionsmodell den Abschluss der Tabelle.
  </td>
  </tr>
</table>
  1. Knitte jetzt wieder das Dokument. Sind der Text und die Grafik nun in 2 Spalten gesetzt?

  2. Setze den letzten Abschnitt selbständig mit einer HTML Table (widths 50%, 10%, 40%) in 2 Spalten.

  3. 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

  1. 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.

  2. 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)

  3. 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;
  }
  1. 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;
}
  1. 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;
  }
  1. 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;
  }
  1. Knitte dein Dokument. Du solltest nun einen wohlformatierten AirBnB Bericht vor dir haben.

  2. Speichere das fertige Dokument unter: 3_Markdown/airbnb_final.Rmd ab.

G - Export als PDF

  1. 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