Izrada nadzorne ploče pomoću paketa flexdashboard
Tema ove lekcije jest izrada nadzorne ploče (engl. dashboard) u RStudiju uz pomoć paketa flexdashboard. U okviru ove lekcije prikazat će se:
- kako podesiti izgled nadzorne ploče i rasporediti njene elemente (objekte, kartice, stranice)
- pregled raznih vrsta objekata od kojih je moguće sačiniti nadzornu ploču (grafikovni, html dodaci, okviri s istaknutim vrijednostima, mjerači i tekst).
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
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
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
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
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
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
Da sažmemo, ponovimo još jednom kako se izrađuju tri osnovne komponente 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
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
--- Logo
Često je u nadzornu ploču poželjno postaviti logo kompanije te tzv. favicon, to jest ikonu koja se nalazi u pregledniku uz naziv web-stranice. Za ove detalje koriste se argumenti logo i favicon u odlomku YAML.
---
title: "Moja stranica, moji stilovi"
output:
flexdashboard::flex_dashboard:
logo: moj_brend.png
favicon: moja_ikona.png
--- 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
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)))
``` 
Slika 9: Nadzorna ploča izrađena gornjim kôdom koja sadrži interaktivne grafikone paketa plotly
Value Boxes
Value box je prozorčić na nadzornoj ploči koja sadrži jednu istaknutu vrijednost, kojoj se mogu pridružiti svojstva poput naslova, ikone i boje.
Definira se funkcijom ValueBox().
Row
----------------
### Broj poznatih vrsti cvijeta iris ```{r}
valueBox("300", icon = "fa-globe", color = "purple")
``` ### Broj vrsti cvijeta iris u promatranom uzorku ```{r}
vrste <- length(unique(iris$Species))
valueBox(vrste, icon = "fa-sun")
``` ### Broj jedinki u uzorku ```{r}
duljina_uzorka <- nrow(iris)
valueBox(duljina_uzorka, icon = "fa-vial", color = "teal")
``` 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)))
``` 
Slika 10: Nadzorna ploča izrađena gornjim kôdom koja sadrži value box prozorčiće
Mjerači
Mjerači (engl. gauges) su prozorčići sa specijalnim vrijednostima, ali prikazanima na mjeraču kojem se definira raspon te intervali na kojima poprima zelenu (engl. success), narančastu (engl. warning) i crvenu (engl. danger) boju.
Definira se funkcijom gauge().
Row
----------------
### Maksimalna duljina kočenja ```{r}
distance_max <- max(cars$dist)
gauge(distance_max, min = 0, max = 130, symbol = "m",
gaugeSectors(success = c(0, 20), warning = c(20, 80), danger = c(80, 130)))
``` ### Minimalna duljina kočenja ```{r}
distance_min <- min(cars$dist)
gauge(distance_min, min = 0, max = 130, symbol = "m",
gaugeSectors(success = c(0, 20), warning = c(20, 80), danger = c(80, 130)))
``` ### Srednja duljina kočenja ```{r}
distance_mean <- mean(cars$dist)
gauge(distance_mean, min = 0, max = 130, symbol = "m",
gaugeSectors(success = c(0, 20), warning = c(20, 80), danger = c(80, 130)))
``` 
Slika 11: Redak nadzorne ploče izrađen gornjim kôdom koji sadrži tri mjerača
Tekst
Tekst možemo postaviti na vrh stranice ispod naslova, a prije objekata, ili ga možemo postaviti u vlastiti prozorčić, odnosno objekt, tako da ga označimo s ### baš kao i ostale objekte. U tekst se mogu uključiti slike, formule i poveznice koristeći uobičajenu markdown sintaksu.
---
title: "Dodavanje teksta"
output:
flexdashboard::flex_dashboard:
orientation: rows
---
Neki tekst na vrhu stranice. ```{r}
library(flexdashboard)
``` Row
--------------------------------------------
### Objekt 1 ```{r}
```
### Objašnjenje
Lijevi prozor je trenutačno prazan.
#### Markdown sintaksa
Mogu dodati naslov tekstu, odlomak, **podebljana slova**, *ukošena slova*... Ovdje vrijedi skoro sve ono što inače vrijedi za rmarkdown sintaksu, no treba pripaziti s naslovima (#, ##, i ### nisu naslovi nego oznake za stranicu, redak/stupac i objekt).
Row
--------------------------------------------
### Naslov
Ovdje možemo napisati nešto o skupu cars čiji je grafikon prikazan desno od ovog teksta.
```{r}
plot(cars)
``` 
Slika 12: Nadzorna ploča izrađena gornjim kôdom
Ovo je bio kratak uvod u flexdashboard, a više o toj temi može se saznati na poveznici o paketu flexdashboard.