Shiny con Flexdashboard

El paquete flexdashboard ofrece la facilidad para crear tableros interactivos en R.

Dentro de las características más resaltantes que menciona la documentación oficial podemos encontrar:

  • Uso de Rmarkdown para publicar un conjunto de visualizaciones en formato de tablero.
  • Es posible el uso de diversos componentes así como de los htmlwidgets.
  • Flexibilidad para colocar los componentes agrupados en columnas o filas.
  • Posibilidad para presentar secuencias de visualizaciones.
  • Posibilidad para integrar shiny y por lo tanto dinamismo en los componentes que se visualizan.

Instalación

Lo primero que tenemos que hacer es descargar el paquete flexdashboard, el cual está disponible en el CRAN, esto se hace mediante el comando siguiente:

install.packages("flexdashboard", type = "source")

También necesitamos la última versión del paquete Rmarkdown:

install.packages("rmarkdown", type = "source")

La manera como generaremos una aplicación es a través de RStudio, creando un archivo Rmarkdown y señalando que el archivo se crea mediante una plantilla de tipo “Flex Dashboard”.

Componentes

Las aplicaciones con flexdashboard pueden ser estáticas (en las cuales se muestras solo gráficos o textos) o dinámicas (que dependen de entradas y salidas, por ejemplo, dependiendo de una selección se muestra algo específico).

Layout

Los layout son las divisiones que se le hacen a la página para colocar la información, es la forma como se agrupan los diversos componentes en columnas o filas.

Una sola columna

Por defecto la página está dividida en una columna y dentro de ésta se les pueden colocar cajas. La manera de crear cajas es con el comando ### seguido del título de la caja.

El comando vertical_layout: fill se puede colocar en las opciones del documento y este comando se usa para indicar que todas las cajas que se creen dentro de la columna tendrán el mismo tamaño, y este tamaño depende del tamaño de la página.

Veamos el codigo y la implementación de ésto, crearemos una página donde la columna se dividirá en dos cajas.

---
title: "Aplicación flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
---

### CAJA 1: Muestra aleatoria Normal estándar

```{r}
x<-rnorm(100)
head(x,3)
```

### CAJA 2: Gráfico de la muestra

```{r}
plot(x)
```

Por otra parte vertical_layout: scroll permite que se agregue una barra de scroll para visualizar el resto de los componentes:

---
title: "Aplicación flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
---

### CAJA 1: Muestra aleatoria Normal estándar
    
```{r}
x<-rnorm(100)
head(x,3)
```
    
### CAJA 2: Gráfico de la muestra

```{r}
plot(x)
```

Observamos un mismo tamaño para las dos cajas pero mucho mayor que el tamaño de la pantalla, por eso vemos la barra de desplazamiento en la parte derecha.

Más de una columna

Ahora supongamos que en nuestra página queremos más de una columna, la manera de especificarlas se hace con el comando Column { } seguido de -------------, dentro del primer comando se le puede específicar el tamaño de la columna colocando data-width.

A continuación crearemos una página que contiene dos columnas, en la primera columna colocaremos 2 cajas y en la otra colocaremos una caja.

Para el siguiente ejemplo estamos tomando que las dimensiones de la pantalla son $1024\times 768$.

---
title: "Aplicación flexdashboard"
output: flexdashboard::flex_dashboard
---

Column {data-width=680 }
-------------------------------------
    
### CAJA 1: Muestra aleatoria Normal estándar
    
```{r}
x<-rnorm(100)
head(x,50)
```
   
Column {data-width=344}
-------------------------------------
   
### CAJA 2: Últimos elementos de la muestra

```{r}
tail(x,20)
```   
 
### CAJA 3: Gráfico de la muestra

```{r}
plot(x)
```

Orientación por filas

orientation: rows

Anteriormente vimos como construir una página basándonos en las columnas, ahora podemos hacer lo mismo pero fijándonos en las filas de la misma, la manera de hacerlo es con el comando Row {} seguido de -------------, también se les puede indicar el ancho de cada fila y esto se hace colocando data-height dentro del comando Row.

A continuación crearemos una página con dos filas

---
title: "Aplicación flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---
    
Row {data-height=400 }
-------------------------------------
    
### CAJA 1: Muestra aleatoria Normal estándar
    
```{r}
x<-rnorm(100)
head(x,50)
```
   
Row {data-height=368 }
-------------------------------------
    
### CAJA 2: Últimos elementos de la muestra

```{r}
tail(x,20)
```  
    
### CAJA 3: Gráfico de la muestra

```{r}
plot(x)
```

Usando Shiny

runtime: shiny

Al agregar el comando correspondiente a Shiny, podemos tener una página dinámica, es decir dentro de las cajas podemos colocar entradas y salidas que dependan de dichas entradas. A continuación explicaremos los principios básicos para introducir Shiny dentro de estas páginas.

Cargar datos

La manera de crear datos globales, es decir, datos que se usarán en distintas partes de la página, es agregar el chuck global al inicio.

```{r global, include=FALSE}
# load data in 'global' chunk so it can be shared by all users of the dashboard
data <- readr::read_csv("data.csv")
```

Entradas y Salidas (Inputs y Outputs)

Dentro de cada caja puedes agregar controles para especificar parámetros dinámicos de entradas y componentes para visualizar los resultados (salidas), recordemos que las entradas pueden ser sliders, botones, texto, entre otros, y las salidas pueden ser gráficos, tablas, textos, otros controles dinámicos, entre otros.

Recordemos algunas controles de entrada:

  • selectInput : Una caja que cambia las opciones de selección.

  • sliderInput : Una barra para seleccionar un número.

  • radioButtons : Conjunto de botones para seleccionar.

  • textInput : Para introducir un texto.

  • numericInput : Para introducir un número.

  • checkboxInput: Para seleccionar alguna casilla.

  • dateInput : Para seleccionar una fecha.

  • passwordInput : Para introducir una clave.

  • fileInput : Para cargar datos.

Algunas controles para mostrar resultados (salidas):

  • renderPlot : Para mostrar gráficos.

  • renderPrint : Imprime cualquier objeto.

  • renderTable : Imprime una tabla.

  • renderText : Muestra un texto.

Un ejemplo:

---
title: "Aplicación flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    runtime: shiny
---

```{r global, include=FALSE}
x<-rnorm(1000)
```

Row 
-------------------------------------
    
### Selección del número de intervalos

```{r}
sliderInput("bins", "Número de intervalos", 
             min = 1, max = 100, value = 30,width = "90%")

```  

Row 
-------------------------------------

### Histograma

```{r}
renderPlot({
  hist(x, breaks = input$bins)
})
```

Barra/Menú lateral (Sidebar)

Para agregar el menú (Sidebar) del lado izquierdp de la página colocamos el comando Sidebar {.sidebar} seguido de =======================, seguido con los comandos que quieres que aparezcan dentro de el dentor de {r}.

A continuación agregaremos en el sidebar un control de entrada:

---
title: "Aplicación flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    runtime: shiny
---

Inputs {.sidebar data-width=300}
-----------------------------------------------------------------------

```{r}
sliderInput("bins", "Número de intervalos", 
             min = 1, max = 100, value = 30,width = "90%")
```

```{r global, include=FALSE}
x<-rnorm(1000)
```

Row 
-------------------------------------

### Histograma

```{r}
renderPlot({
  hist(x, breaks = input$bins)
})
```

Páginas

Podemos también tener distintas páginas dentro de un flexdashboard, esto lo hacemos colocando el título de la página seguido de =====================.

A continuación vamos a crear una página que contiene a su vez dos páginas, una correspondiente al histograma de una distribución Normal y la otra con respecto a la distribución Weibull.

---
title: "Aplicación flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    runtime: shiny
---

```{r global, include=FALSE}
x<-rnorm(1000)
y<-rweibull(1000,shape = 1.2,scale=1)
```

Distribución Normal
=====================================  

### Selección

```{r}
sliderInput("bins", "Número de intervalos", 
             min = 1, max = 100, value = 30,width = "90%")
```

### Histograma

```{r}
renderPlot({
  hist(x, breaks = input$bins,col = "blue")
})
```
   
Distribución Weibull
=====================================     

### Selección

```{r}
sliderInput("bins2", "Número de intervalos", 
             min = 1, max = 100, value = 30,width = "90%")
```

### Histograma

```{r}
renderPlot({
  hist(y, breaks = input$bins2,col = "green")
})
```

A continuación observemos las dos páginas del ejemplo:

  • Primera Página:

  • Segunda Página:

En la página que se coloca como referencia pueden encontrar más detalles sobre los comandos e instrucciones que usamos.

Son variadas y diversas las opciones para crear contenido interactivo desde R y el paquete flexdashboard es otro ejemplo de esta versatilidad.

Copyright © 2014-2018 Synergy Vision. Los artículos del Corpus se comparten bajo los términos de la licencia Creative Commons con Reconocimiento, Propósito no comercial, Compartir contenido similar, 4.0 Internacional (CC BY-NC-SA 4.0).

Citar el artículo.