Visualizacion de datos con R: Shiny

.title[
# Visualizacion de datos con R: Shiny
]
.subtitle[
## Diplomado en Data Science 22, MatPUC
]
.author[
### Joshua Kunst Fuentes <a href="mailto:jbkunst@gmail.com" class="email">jbkunst@gmail.com</a> Claudio Alarcón Ratsch <a href="mailto:caalarcon1@uc.cl" class="email">caalarcon1@uc.cl</a>
]

---

# Clases

### Johnson

Jue 21/7 - Sáb 23/7 - Jue 28/7 - Jue 4/8

### Touring

Mie 27/7 - Mie 02/8 - Mie 10/8 - Mie 17/8

---

# Programa

- Clase 1
  - Aplicación (web), ejemplos.
  - Introducción a shiny: Interfaz usuario y servidor
  - Layouts  
- Clase 2
  - Integración HTMLWidgets
  - Templates y diseño  
- Clase 3
  - Ejercicios
  - Compartir una app
- Clase 4
  - Expresiones reactivas
  - Extensiones shiny

---

# Antes de Partir

---

# Antes de Partir

La prestación podrá acceder desde https://datosuc.github.io/Visualizacion-de-datos-con-R/#1 y el código fuente, apps, ejemplos en https://github.com/datosuc/Visualizacion-de-datos-con-R/tree/master/apps

Asumimos que tenemos conocimiento de como funciona R, paquetes, funciones, etc.

No es necesario en `shiny` pero usaremos los paquetes `dplyr` y `ggplot2` principalmente
para hacer manipulación y visualización de los datos.

Necesitaremos algunos paquetes:

```r
install.packages(
  c("tidyverse", "shiny", "shinythemes", "shinyWidgets",
    "shinydashboard", "DT", "leaflet", "plotly", "highcharter")
  )
```

---

# Ayuda

No olvidar que una buena forma de aprender es con la documentación oficial:

- https://mastering-shiny.org/ (proceso de traducción al español https://github.com/cienciadedatos/mastering-shiny)
- https://shiny.rstudio.com/tutorial/
- https://shiny.rstudio.com/tutorial/written-tutorial/lesson1/
- https://github.com/rstudio/cheatsheets/raw/master/shiny.pdf
- https://github.com/rstudio/cheatsheets/raw/master/translations/spanish/shiny_Spanish.pdf

La infaltable _ayuda memoria_:

https://content.cdntwrk.com/files/aT0xMTI0NDEzJnY9MSZpc3N1ZU5hbWU9c2hpbnktc3BhbmlzaCZjbWQ9ZCZzaWc9ZTdhMThkY2VjYzM1YjkyNmI1NTVlNWM3ZWViNjE4MmU%253D

---

# ¿Qué es una __app__(licación) web?

---

# Aplicación Web

(Wikipedia:) Herramientas que los usuarios pueden utilizar accediendo 
a un servidor web a través de internet o de una intranet mediante un navegador.

Puede ser de lo más simple...

![](imgs/miprimerapp.png)

---

# Aplicación Web

Hasta algo más complejo con más `input`s y `output`s

---

# Ejemplos para motivarse!

Algunos simples.

* https://jjallaire.shinyapps.io/shiny-kmeans/
* https://jbkunst.shinyapps.io/05-arma/ (https://github.com/jbkunst/highcharter-shiny/tree/master/05-arma)

Otros con más detalle en la parte visual.

* https://jorgehcas1998.shinyapps.io/Dataton-app/ (https://github.com/socapal/dataton-tudinero)
* https://nz-stefan.shinyapps.io/commute-explorer-2

Fuente: Shiny contest https://blog.rstudio.com/2021/06/24/winners-of-the-3rd-annual-shiny-contest/ 
se le pide a los concursantes compartir el código, todos aprenden!

---

# La estructura de una ShinyApp

```r
library(shiny)

ui <- fluidPage()

server <- function(input, output) {}

runApp(list(ui = ui, server = server)) 
```

En `shiny`, una aplicación constará de **2** partes:

- La interfaz de usuario, `ui` (user interface), donde definiremos el look de nuestra aplicación, y lugar de  `inputs` y `outputs`.
- El `server`, en donde especificaremos como interactuan los `outputs` en función de los `inputs`.

---

# La estructura de una ShinyApp

```r
library(shiny)

*ui <- fluidPage()

server <- function(input, output) {}

runApp(list(ui = ui, server = server)) 
```

- Se define una interfaz de usuario (user interface). En adelante `ui`.
- En este caso es una página fluida vacía `fluidPage()`.

- En el futuro acá definiremos diseño/estructura de nuestra aplicación (_layout_).
Que se refiere la disposición de nuestros `inputs` y `outputs`.

---

# La estructura de una ShinyApp

```r
library(shiny)

ui <- fluidPage()

*server <- function(input, output) {}

runApp(list(ui = ui, server = server)) 
```

- Se define el `server` en donde estará toda la lógica de nuestra aplicación.
- Principalmente serán instrucciones que dependeran de `inputs` y
reflejaremos `outputs`: como tablas, gráficos.

---

# La estructura de una ShinyApp

```r
library(shiny)

ui <- fluidPage()

server <- function(input, output) {}

*runApp(list(ui = ui, server = server))
```

- `runApp` es la funcion que crea y deja corriendo la app con los 
parámetros otorgados.
- **No siempre** tendremos que escribirla pues veremos que RStudio
al crear una shinyApp nos pondrá un botón para _servir_ la aplicación.

---

# La estructura de una ShinyApp

```r
library(shiny)

ui <- fluidPage()

server <- function(input, output) {}

runApp(list(ui = ui, server = server))       
```

De formar general la aplicación será:

```r
library(shiny)
# acá se cargarán paquetes y posiblemente también datos
# necesarios para ui (como definir opciones de inputs)

ui <- fluidPage(
 # código que da forma a nuestrá aplicación: títulos, secciones, textos, inputs
)

server <- function(input, output) {
 # toooda la lógica de como interactuan los outputs en función de los inputs
} 
```

---

# Ejercicio: Nuestra primer App andando

Hacer funcionar el siguiente `código` en R Rstudio: (hint: sí, copy + paste + run)

```r
library(shiny)

ui <- fluidPage(
 sidebarLayout(
 sidebarPanel(
 sliderInput("nrand", "Simulaciones", min = 50, max = 100, value = 70),
 selectInput("col", "Color", c("red", "blue", "black")),
 checkboxInput("punto", "Puntos:", value = FALSE)
 ),
 mainPanel(plotOutput("outplot"))
 )
)

server <- function(input, output) {
 output$outplot <- renderPlot({
 set.seed(123)
 x <- rnorm(input$nrand)
 t <- ifelse(input$punto, "b", "l")
 plot(x, type = t, col = input$col)
 })
}

shinyApp(ui, server)
```
]

---

# Funcionamiento de una app de Shiny

---

# App

![](imgs/shiny_works/Diapositiva1.PNG)

---

# Contenedor

![](imgs/shiny_works/Diapositiva2.PNG)

---

# Otros contenedores

![](imgs/shiny_works/Diapositiva3.PNG)

---

# Inputs

![](imgs/shiny_works/Diapositiva4.PNG)

---

# Outputs

![](imgs/shiny_works/Diapositiva5.PNG)

---

# Interacción

![](imgs/shiny_works/Diapositiva6.PNG)

---

# Resultado

![](imgs/shiny_works/Diapositiva7.PNG)

---