Dashboards in R

Enrique J. De La Hoz D.

Data Science - UTB

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 1 / 41

What is a Dashboard

Figure 1: Example 1
Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 2 / 41
What is a FlexDashboard

Figure 2: Example 1
Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 3 / 41
Rmarkdown the header

---
title: "Bikeshare"
output: html_document
---

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 4 / 41

Turning R Markdown into a flexdashboard

---
title: "Bikeshare"
output:
flexdashboard::flex_dashboard:
---

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 5 / 41

A flexdashboard is made of charts . . .

Enrique J. De La Hoz D. Figure

Dashboards 3:
in R Data Science - UTB 6 / 41
A flexdashboard is made of charts . . .

Enrique J. De La Hoz D. Figure

Dashboards 4:
in R Data Science - UTB 7 / 41
. . . and charts are arranged in columns

Figure 5:

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 8 / 41

Knit from template

Enrique J. De La Hoz D. Figure

Dashboards 6:
in R Data Science - UTB 9 / 41
Data
We’ll use data of a Bikesharing System

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 10 / 41

Columns Width

Figure 8:

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 11 / 41

Using rows instead of columns

---
title: "Bikeshare"
output:
flexdashboard::flex_dashboard:
orientation: rows
---

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 12 / 41

Comparing Layouts

Figure 9:

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 13 / 41

Scrolling

---
title: "Bikeshare"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
---

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 14 / 41

Tabsets

Figure 10:
Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 15 / 41
Pages

Figure 11:

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 16 / 41

Creating Menus

Enrique J. De La Hoz D. Figure

Dashboards12:
in R Data Science - UTB 17 / 41
Graphs

Adding Graphs: The Basics

plot(trips_df$time, trips_df$rides)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 18 / 41

Resizing Graphs
{r, fig.width=10, fig.height=5}

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 19 / 41

Results

Figure 14:
Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 20 / 41
Web friendly visualizations

What is web-friendly?
I Dynamic
I Interactive
I Based on html/javascript

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 21 / 41

Web-friendly options

plotly
highcharter
dygraphs
rbokeh
ggvis

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 22 / 41

The magic of plotly
library(plotly)
ggplotly(my_ggplot)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 23 / 41

Adding Widgets

What’s an htmlwidget?
I R packages that connect to Javascript libraries.
I Web-friendly visualizations of all sorts.
I Well suited to be part of a dashboard.

Learn more at: http://htmlwidgets.org

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 24 / 41

leaflet Basics

library(leaflet)
leaflet() %>%
addTiles() %>%
addMarkers(lng = data_df$longitude, lat = data_df$latitude)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 25 / 41

leaflet with Dataframes

library(leaflet)
leaflet(data_df) %>%
addTiles() %>%
addMarkers()

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 26 / 41

Highilighting a value

Figure 16:
Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 27 / 41
Gauges

library(flexdashboard)
trips_df<- read.csv('bikeshare.csv')

num_trips <- nrow(trips_df)

short_trips <- sum(trips_df$duration_sec < 600) # under 10 min
pct_short_trips <- round(100 * short_trips / num_trips, 0)

gauge(value = pct_short_trips,
min = 0,
max = 100)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 28 / 41

Links

valueBox(prettyNum(num_trips, big.mark = '

,'), caption = 'Total Daily Trips'
, icon = 'fa-bicycle' , href = '#trip-raw-data')

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 29 / 41

Basic Tables

library(knitr)
kable(my_data_df)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 30 / 41

Web-friendly Tables

library(DT)
datatable(my_data_df)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 31 / 41

Eliminating Row Numbering

library(DT)
datatable(my_data_df, rownames = FALSE)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 32 / 41

Changing Rows per Page

library(DT)
datatable(my_data_df, rownames = FALSE,
options = list(pageLength = 15))

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 33 / 41

Adding Buttons

library(DT)
datatable(
my_data_df, rownames = FALSE,
extensions = 'Buttons', options = list(
dom = 'Bfrtip',buttons = c('copy',
'csv','excel' , 'pdf', 'print')))

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 34 / 41

More Information on DT

https://rstudio.github.io/DT/

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 35 / 41

Converting to a Storyboard

---
title: "Bike Shares Daily"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
storyboard: true
---

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 36 / 41

Interactive Shiny Dashboard

Why should I add Shiny?

I Interactivity
I Lightweight
Why not
I Complication
I Hosting

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 37 / 41

Alternatives to Shiny

Flexdashboard with Shiny

Interactive Markdown Document

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 38 / 41

How to do it?

Add to the YAML

I runtime: shiny

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 39 / 41

Creating a sidebar

Column {data-width=200 .sidebar}

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 40 / 41

Adding user inputs

Column {data-width=200 .sidebar}

SliderInput("duration_slider",
label = "Select maximum trip duration
to display",
min = 0,
max = 120,
value = 15,
step = 5,
dragRange = TRUE)

Enrique J. De La Hoz D. Dashboards in R Data Science - UTB 41 / 41