Shiny Visualizacion de datos con R Slides 1

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

---

# Shiny: Visualizacion de datos con R

## Version 2025

### Clases

* Martes 18 de noviembre

* Jueves 20 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/tree/main/apps

<br>

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",
    "forecast", "janitor")
  )
```

---

# Ayuda

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

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

---

# Por que shiny?

<br/>

---

# Por que shiny?

<br/>

- **De script a app en minutos**. Lo que ya tienes en R/Python lo envuelves en una interfaz sin crear APIs ni reescribir lógica.

<br/>

- **Sin cambiar de lenguaje ni stack**. Sigues usando R/Python — no necesitas aprender React, JS, Flask, Django, etc.

<br/>

- **Interactividad analítica inmediata**. La reactividad está integrada: los outputs se actualizan solos al cambiar los inputs.

---

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

<br/>

Algunos simples.

* https://jjallaire.shinyapps.io/shiny-kmeans/
* https://jbkunst.shinyapps.io/bias-variance/
(https://github.com/jbkunst/shiny-apps-educational apps para la educación)
<br/>

Otros con más detalle en la parte visual.

* Índice de Digitalización Comunal https://www.nudos.cl/ https://indice.nudos.cl/
* Observatorio de Sequía https://odes-chile.org/ https://odes-chile.org/app/unidades/
* Chatbot demo https://jbkunst.shinyapps.io/shiny-sidebot-demo-school/ https://jbkunst.shinyapps.io/shiny-sidebot-demo/
* Sustainability Science Metrics Viewer https://sna-ses.shinyapps.io/SSMviewer
* Trade Statistics 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

---

# La estructura de una ShinyApp

<br>

```r
library(shiny)
library(bslib) # Shiny incluye el paquete bslib, que usaremos para crear interfaces

ui <- page_fluid()

server <- function(input, output) {}

shinyApp(ui, server)
```

<br>

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

<br>

```r
library(shiny)
library(bslib)

*ui <- page_fluid()

server <- function(input, output) {}

shinyApp(ui, server)
```

<br>

- Se define una interfaz de usuario (user interface). En adelante `ui`.
- En este caso es una página fluida vacía `page_fluid()`.
- 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

<br>

```r
library(shiny)
library(bslib)

ui <- page_fluid()

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

shinyApp(ui, server)
```

<br>

- 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

<br>

```r
library(shiny)
library(bslib)

ui <- page_fluid()

server <- function(input, output) {}

*shinyApp(ui, server)
```

<br>

- `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

<br>

```r
library(shiny)
library(bslib)

ui <- page_fluid()

server <- function(input, output) {}

shinyApp(ui, server)    
```

De formar general la aplicación será:

```r
library(shiny)
library(bslib)
# acá se cargarán paquetes y también datos necesarios

ui <- page_fluid(
  # 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?

<br>

```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  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  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  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  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  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  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(50)
```
]
 
.panel2-quehace2-auto[

]

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

```r
set.seed(123)

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

```
##  [1] -0.56047565 -0.23017749  1.55870831  0.07050839  0.12928774  1.71506499  0.46091621 -1.26506123 -0.68685285 -0.44566197
## [11]  1.22408180  0.35981383  0.40077145  0.11068272 -0.55584113  1.78691314  0.49785048 -1.96661716  0.70135590 -0.47279141
## [21] -1.06782371 -0.21797491 -1.02600445 -0.72889123 -0.62503927 -1.68669331  0.83778704  0.15337312 -1.13813694  1.25381492
## [31]  0.42646422 -0.29507148  0.89512566  0.87813349  0.82158108  0.68864025  0.55391765 -0.06191171 -0.30596266 -0.38047100
## [41] -0.69470698 -0.20791728 -1.26539635  2.16895597  1.20796200 -1.12310858 -0.40288484 -0.46665535  0.77996512 -0.08336907
```
]

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

```r
set.seed(123)

x <- rnorm(50)
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(50)
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(50)
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(50)
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(50)
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(50)
x

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

c <- "green"
c

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

---

# Ejercicio: Nuestra primer App

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

Note que al *guardar* el script Rstudio lo reconoce como app y aparece un botón de RUN.

```r
library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Mi primera app",
  sidebar = sidebar(
    sliderInput("nrand", "Simulaciones", min = 50, max = 100, value = 70),
    selectInput("col", "Color", c("red", "blue", "black")),
    checkboxInput("punto", "Puntos:", value = FALSE)
    ),
  plotOutput("grafico")
  )

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

shinyApp(ui, server)
```
]

---

# Si quieres más ejemplos

```r
shiny::runExample("01_hello")      # un histograma
shiny::runExample("02_text")       # tablas y data frames
shiny::runExample("03_reactivity") # una expresión reactiva
shiny::runExample("04_mpg")        # variables globales
shiny::runExample("05_sliders")    # controles deslizantes (sliders)
shiny::runExample("06_tabsets")    # paneles con pestañas (tabs)
shiny::runExample("07_widgets")    # texto de ayuda y botones de envío
shiny::runExample("08_html")       # app Shiny construida desde HTML
shiny::runExample("09_upload")     # asistente para subir archivos
shiny::runExample("10_download")   # asistente para descargar archivos
shiny::runExample("11_timer")      # temporizador automático
```

---

# Funcionamiento de una app de Shiny

---

# App

![](imgs/shiny_works2/diapo1.jpg)

---

# Página/layout

![](imgs/shiny_works2/diapo2.jpg)

---

# Elementos

![](imgs/shiny_works2/diapo3.jpg)

---

# Inputs

![](imgs/shiny_works2/diapo4.jpg)

---

# Output(s)

![](imgs/shiny_works2/diapo5.jpg)

---

# Obtener valores en el *ui* del usuario el *server*

![](imgs/shiny_works2/diapo6.jpg)

---

# Resultado de *server* a *ui*

![](imgs/shiny_works2/diapo7.jpg)

---