Shiny Visualizacion de datos con R Slides 1

.title[
# Shiny Visualizacion de datos con R Slides 1
]
.subtitle[
## Diplomado en Data Science, MatPUC
]
.author[
### Joshua Kunst Fuentes <a href="mailto:jbkunst@gmail.com" class="email">jbkunst@gmail.com</a>
]

---

# Shiny: Visualizacion de datos con R

## Version 2024

### Clases

* Lunes 4 de noviembre

* Miércoles 6 de Noviembre

---

# Programa

- [Slides 1](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-01.html)
  - Aplicación (web), ejemplos.
  - Introducción a shiny: Interfaz usuario y servidor
- [Slides 2](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-02.html)
  - Layouts  
  - Integración HTMLWidgets
- [Slides 3](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-03.html)
  - Temas, templates y diseño    
  - Compartir una app
  - Shiny en Python
- [Slides 4](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-04.html)
  - Expresiones reactivas
  - Orden de ejecución  
  - Extensiones shiny

---

# Antes de Partir

---

# Antes de Partir

La prestación podrá acceder desde https://jkunst.com/shiny-visualizacion-de-datos-con-R/clase-01.html y el código fuente, apps, ejemplos en https://github.com/jbkunst/shiny-visualizacion-de-datos-con-R

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", "bslib",
    "shinydashboard", "DT", "leaflet", "plotly", "highcharter")
  )
```

---

# Ayuda

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

- https://mastering-shiny.org/
- https://shiny.posit.co/r/getstarted/shiny-basics/lesson1/

---

# Por que shiny?

---

# ¿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...

# 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/bias-variance/
(https://github.com/jbkunst/shiny-apps-educational)

Otros con más detalle en la parte visual.

* https://jbkunst.shinyapps.io/trd-sttstcs/ (https://github.com/jbkunst/trd-sttstcs)
* https://jorgehcas1998.shinyapps.io/Dataton-app/ (https://github.com/socapal/dataton-tudinero)
* https://nz-stefan.shinyapps.io/commute-explorer-2
* https://odes-chile.org/app/unidades/

---

# 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) {}

shinyApp(ui, 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) {}

shinyApp(ui, 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) {}

*shinyApp(ui, server)
```

- `shinyApp` 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) {}

shinyApp(ui, 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
} 
```

---

# Repaso R: Que hace el siguiente código?

``` r
set.seed(123)

x <- rnorm(10)
x

t <- ifelse(TRUE, "b", "l")
t

c <- "darkred"
c

plot(x, type = t, col = c)    
```

---

``` r
*set.seed(123)
```
]
 
.panel2-quehace-auto[

]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

*x <- rnorm(10)
```
]
 
.panel2-quehace-auto[

]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

x <- rnorm(10)
*x 
```
]
 
.panel2-quehace-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

x <- rnorm(10)
x

*t <- ifelse(TRUE, "b", "l")
```
]
 
.panel2-quehace-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

x <- rnorm(10)
x

t <- ifelse(TRUE, "b", "l")
*t 
```
]
 
.panel2-quehace-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197
```

```
## [1] "b"
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

x <- rnorm(10)
x

t <- ifelse(TRUE, "b", "l")
t

*c <- "darkred"
```
]
 
.panel2-quehace-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197
```

```
## [1] "b"
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

x <- rnorm(10)
x

t <- ifelse(TRUE, "b", "l")
t

c <- "darkred"
*c 
```
]
 
.panel2-quehace-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197
```

```
## [1] "b"
```

```
## [1] "darkred"
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace-auto[

``` r
set.seed(123)

x <- rnorm(10)
x

t <- ifelse(TRUE, "b", "l")
t

c <- "darkred"
c

*plot(x, type = t, col = c)
```
]
 
.panel2-quehace-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197
```

```
## [1] "b"
```

```
## [1] "darkred"
```

![](imgs/slides1/quehace_auto_08_output-1.png)
]

---

``` r
*set.seed(123)
```
]
 
.panel2-quehace2-auto[

]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

*x <- rnorm(30)
```
]
 
.panel2-quehace2-auto[

]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

x <- rnorm(30)
*x 
```
]
 
.panel2-quehace2-auto[

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499
##  [7]  0.46091621 -1.26506123 -0.68685285 -0.44566197  1.22408180  0.35981383
## [13]  0.40077145  0.11068272 -0.55584113  1.78691314  0.49785048 -1.96661716
## [19]  0.70135590 -0.47279141 -1.06782371 -0.21797491 -1.02600445 -0.72889123
## [25] -0.62503927 -1.68669331  0.83778704  0.15337312 -1.13813694  1.25381492
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

x <- rnorm(30)
x

*t <- ifelse(FALSE, "b", "l")
```
]
 
.panel2-quehace2-auto[

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

x <- rnorm(30)
x

t <- ifelse(FALSE, "b", "l")
*t 
```
]
 
.panel2-quehace2-auto[

```
## [1] "l"
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

x <- rnorm(30)
x

t <- ifelse(FALSE, "b", "l")
t

*c <- "green"
```
]
 
.panel2-quehace2-auto[

```
## [1] "l"
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

x <- rnorm(30)
x

t <- ifelse(FALSE, "b", "l")
t

c <- "green"
*c 
```
]
 
.panel2-quehace2-auto[

```
## [1] "l"
```

```
## [1] "green"
```
]

---
count: false
 
# Repaso R: Que hace el siguiente código?
.panel1-quehace2-auto[

``` r
set.seed(123)

x <- rnorm(30)
x

t <- ifelse(FALSE, "b", "l")
t

c <- "green"
c

*plot(x, type = t, col = c)
```
]
 
.panel2-quehace2-auto[

```
## [1] "l"
```

```
## [1] "green"
```

![](imgs/slides1/quehace2_auto_08_output-1.png)
]

``` r
set.seed(123)

x <- rnorm(30)
x

t <- ifelse(FALSE, "b", "l")
t

c <- "green"
c

plot(x, type = t, col = c)    
```

---

# 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/diapo1.png)

---

# Contenedor

![](imgs/shiny_works/diapo2.png)

---

# Otros contenedores

![](imgs/shiny_works/diapo3.png)

---

# Inputs

![](imgs/shiny_works/diapo4.png)

---

# Outputs

![](imgs/shiny_works/diapo5.png)

---

# Interacción

![](imgs/shiny_works/diapo6.png)

---

# Resultado

![](imgs/shiny_works/diapo7.png)

---