Tema ove lekcije jest izrada nadzorne ploče (engl. dashboard) u RStudiju uz pomoć paketa flexdashboard. U okviru ove lekcije prikazat će se:

Za praćenje lekcije smatra se da je korisnik već upoznat s osnovama jezika R i korištenjem sučelja RStudio.

Procijenjeno vrijeme potrebno za pregled sadržaja je 15 min.

Početak rada

Prije prve uporabe, potrebno je jednokratno instalirati paket flexdashboard. Preporuča se instalacija upisom naredbe install.packages("flexdashboard") u konzolu.

Nakon toga se standardno odabere vrsta datoteke u kojoj se planira raditi, u ovom slučaju R Markdown.

Slika  1: Otvaranje datoteke

Slika 1: Otvaranje datoteke

Nakon odabira R Markdown datoteke, pojavljuje se novi izbornik gdje se s lijeve strane odabere zadnja opcija From Template, a s desne strane Flex Dashboard.

Slika  2: Uz instalirani paket flexdashboard, u izborniku predložaka pojavljuje se dodatna opcija Flex Dashboard

Slika 2: Uz instalirani paket flexdashboard, u izborniku predložaka pojavljuje se dodatna opcija Flex Dashboard

Otvorit će se datoteka koja počinje s dijelom omeđenim s trima crticama --- zvanim YAML koji kaže kakva vrsta dokumenta može nastati iz ove R Markdown datoteke, te koja sadrži sintaksu za jedan standardni raspored nadzorne ploče. Može se vidjeti da se ta nadzorna ploča sastoji od dvaju stupaca od kojih prvi sadrži jedan objekt (Chart A), a drugi dva objekta (Chart B i Chart C).

Uočimo da se stupci određuju pomoću niza znakova --- koji slijedi ispod naziva stupca, a objekti pomoću trostrukog znaka ljestvica ### nakon kojih slijedi ime objekta.

Slika  3: Standardan izgled predloška Flex Dashboard

Slika 3: Standardan izgled predloška Flex Dashboard

Iako nema nikakvog sadržaja osim onog koji upućuje na raspored nadzorne ploče, ova datoteka se već može “knitati” u dashboard pritiskom na Knit ili istovremenim pritiskom tipki [Ctrl]+[Shift]+[K].

Slika  4: Izgled nadzorne ploče dobivene zadanim predloškom

Slika 4: Izgled nadzorne ploče dobivene zadanim predloškom

Raspored i izgled

Širina i visina stupca može se definirati unutar vitičaste zagrade pored oznake Column, argumentima data-width i data-height kao što je u gornjem primjeru navedeno Column {data-width = 650} i Column {data-width = 350}. Ove mjere nemaju jedinicu, nego određuju relativnu veličinu i širinu jednoga stupca u odnosu na drugi, dok njihova apsolutna širina ovisi o širini zaslona. Ako se data-width / data-height ne navedu, svi stupci će biti jednakih širina/visina.

Apsolutna visina objekata u stupcima ovisi o opcijama navedenim unutar YAML dijela, vertical_layout: fill ili vertical_layout: scroll. Opcijom fill ispunit će se cijela visina ekrana, a opcijom scroll svaki objekt će standardno biti visine 5 inća ili 480 piksela osim ako to ne promijenimo atributom fig.height iz paketa knitr.

U slučaju da se objekti žele rasporediti u retke potrebno je u dijelu YAML promijeniti orientation: rows, te svaki redak označiti pomoću Row na istovjetan način kao što je prethodno svaki stupac označen s Column.

Proizvoljan primjer objekata složenih u retke:

---
title: "Raspoređivanje objekata nadzorne ploče po retcima"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
---
```{r} 
library(flexdashboard)
``` 
Row
-------------------
### Chart A1         
```{r} 
``` 
### Chart A2         
```{r} 
``` 
Row
-------------------
### Chart B         
```{r} 
``` 
### Chart C         
```{r} 
``` 
### Chart D         
```{r} 
``` 
Slika  5: Izgled nadzorne ploče izrađene gornjim kôdom

Slika 5: Izgled nadzorne ploče izrađene gornjim kôdom

Stranice

Nadzorna ploča može sadržavati više stranica. One se označavaju znakom # iza kojeg slijedi naziv stranice, ili tako da se ispod naziva stranice ispiše “===”.

# Prva stranica

ili

Prva stranica
===

Naziv stranice može se ukrasiti ikonom. Ikone se mogu besplatno preuzeti s neke od sljedećih web-stranica:

Ikona se preuzima bez prethodnog učitavanja paketa, dovoljno je pored naziva stranice nadzorne ploče dodati vitičastu zagradu unutar koje se navede skraćeni naziv jednog od gornjih triju pružatelja usluge te naziv ikone.

Primjer odabira ikone srce (engl. heart):

# Prva stranica {data-icon="fa-heart"} ili
# Prva stranica {data-icon="ion-heart"} ili
# Prva stranica {data-icon="glyphicon-heart"}.

NAPOMENA: Unutar vitičaste zagrade ne smije biti praznih polja oko znaka “=”.

---
title: "Izrada stranica na nadzornoj ploči"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---
```{r} 
library(flexdashboard)
``` 
Ljeto {data-icon="fa-umbrella-beach"}  
===

Row
---
### Objekt 1         
```{r} 
``` 
### Objekt 2         
```{r} 
``` 
Zima {data-icon="fa-snowflake"}
===

Row
---
### Objekt 3         
```{r} 
``` 
Slika  6: Izgled nadzorne ploče sa stranicama, izrađene gornjim kôdom

Slika 6: Izgled nadzorne ploče sa stranicama, izrađene gornjim kôdom

Da sažmemo, ponovimo još jednom kako se izrađuju tri osnovne komponente nadzorne ploče:

Načini izrade osnovnih elemenata nadzorne ploče
Komponenta Jedan način izrade Drugi način izrade
Stranica # ===
Redak ili stupac ## ---
Objekt ###

NAPOMENA: Broj “=” i “-” znakova u nizu može biti i veći od tri.

Kartice

Osim po stranicama, objekti se mogu posložiti i u kartice (engl. tabs). Ako uz oznaku za stupac ili redak, odnosno uz Column ili Row dodamo oznaku {.tabset}, svaki objekt unutar tog stupca/retka bit će u zasebnoj kartici. Naziv kartice jednak je nazivu objekta.

Row {.tabset}
----------------
### ¸Populacija         
```{r} 
``` 
### Žene         
```{r} 
``` 
### Muškarci         
```{r} 
``` 
Row
-----------------
### Grafikon         
```{r} 
``` 
Slika  7: Izgled nadzorne ploče koja sadrži kartice izrađene gornjim kôdom

Slika 7: Izgled nadzorne ploče koja sadrži kartice izrađene gornjim kôdom

Teme

Za podešavanje izgleda stranice, može se odabrati tema, odnosno skup definiranih stilova kojima se određuje izgled stranice, poput boje pozadine, vrste i veličine slova itd. Dostupne teme su:

  • default
  • cosmo
  • bootstrap
  • cerulean
  • journal
  • flatly
  • readable
  • spacelab
  • united
  • lumen
  • paper
  • sandstone
  • simplex
  • yeti.

Tema se zadaje u odlomku YAML argumentom theme.

---
title: "Moja stranica, moji stilovi"
output: 
  flexdashboard::flex_dashboard:
    theme : bootstrap
---         

Standardna tema je cosmo. Korisnik također može sam izraditi skriptu s CSS-stilovima i proslijediti je u YAML putem argumenta css.

---
title: "Moja stranica, moji stilovi"
output: 
  flexdashboard::flex_dashboard:
    css: stilovi.css
---         

Objekti

Nakon upoznavanja s izradom rasporeda nadzorne ploče, slijedi kratak pregled o objektima koji se mogu postaviti u nadozornu ploču.

Grafikoni jezika R

Standardni paketi jezika R koji sadrže funkcije za vizualizaciju podataka, poput base, lattice, gglot2, grid itd., mogu poslužiti za izradu grafikona koji se mogu postaviti kao objekti nadzorne ploče.

Row
----------------
### base::plot         
```{r} 
plot(cars, main = "Cars")
``` 
### lattice::dotplot         
```{r}
library(lattice)
xyplot(dist ~ speed, data = cars, main = "Cars")
``` 
Row
----------------
### ggplot2::ggplot - Nepodešene dimenzije         
```{r} 
library(ggplot2)
ggplot(data = cars, aes(x = speed, y = dist)) + 
  geom_point() + labs(title = "Cars")
``` 
### ### ggplot2::ggplot - Podešene dimenzije         
```{r}
ggplot(data = cars, aes(x = speed, y = dist)) + 
  geom_point() + labs(title = "Cars")
``` 
Slika  8: Nadzorna ploča izrađena gornjim kôdom koja sadrži standardne grafikone jezika R

Slika 8: Nadzorna ploča izrađena gornjim kôdom koja sadrži standardne grafikone jezika R

Treba imati na umu da su grafikoni dobiveni pomoću standardnih paketa jezika R statični i da se pohranjuju kao datoteke nastavka .png, odnosno kao slike. Zbog toga nema dinamičkoga podešavanja dimenzija grafikona kako bi potpuno iskoristile sebi namijenjen prostor nadzorne ploče. Jedan od načina na koji tome doskočiti jest definiranje dimenzije slike pomoću vrijednosti fig.width i fig.height u postavkama bloka kako bi se podesila njena optimalna dimenzija.

HTML Widgets

HTML Widgets ili HTML dodatci su dodatne aplikacije kompatibilne s jezikom R, a koje pružaju bogati izbor objekata koji se mogu postaviti na nadzornu ploču poput raznolikih interaktivnih grafikona, mapa i tablica. Objekti dobiveni iz HTML dodataka dinamički mijenjaju dimenziju kako se mijenja dimenzija nadzorne ploče tako da maksimalno zauzimaju svoj prostor unutar nje.

Preporuča se pogledati galeriju dostupnih dodataka i dodatno proučiti aplikacije po izboru radi njihovih interaktivnih i dinamičkih svojstava koje pogoduju prezentiranju informacija u obliku nadzorne ploče.

```{r}
library(flexdashboard)
library(plotly)
``` 
Row
----------------
### Jednostavni plotly grafikon         
```{r}
iris %>% plot_ly(x = ~Petal.Width, y = ~Petal.Length, color = ~Species) %>%
  add_markers() %>% 
  layout(title = "Latice irisa",
         xaxis = list(title = "Širina latica", range = c(0, 2.8)),
         yaxis = list(title = "Duljina latica", range = c(0, 7.5)))
``` 
Row
----------------
### Stupčasti grafikon u plotlyju         
```{r}
iris %>% group_by(Species) %>% summarise(m1 = mean(Sepal.Length),
                                         m2 = mean(Sepal.Width)) %>%
  plot_ly(x = ~Species) %>%
  add_bars(y = ~m1, name = "Duljina čašičnog listića") %>%
  add_bars(y = ~m2, name = "Širina čašičnog listića") %>%
  layout(title = "Latice irisa",
         xaxis = list(title = "Vrsta cvijeta iris"),
         yaxis = list(title = "Srednja vrijednost (cm)", range = c(0, 6)))
```