¿Por qué Shiny? ¿Por qué con estilo?

Contado a través de preguntas y una historia

Joshua Kunst, @jbkunst, UAI Junio 2018

http://jkunst.com/r-material/201806-porque-shiny/

¿Que haremos?

¿Qué es shiny?
¿Por qué shiny?
¿Por qué con estilo?
Ejemplos de la vida real común y corriente del día a día

¿Qué es shiny?

Es un paquete para construir aplicaciones web usando solamente código R
De forma fácil. Sin aprender o saber de HTML, Javascript CSS frontend o backend

¿Cómo luce una shiny-app en código?

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

¿Cómo luce una shiny-app funcionando?

http://104.140.247.162:3838/por-que-shiny-por-que-con-estilo/app-01-basico/

Sospechosa

sospechosa

¿Cómo?

Contenedor

Otros contenedores

Inputs

Output(s!)

Interacción

Resultado

Me parece

¿Por qué shiny?

Educación

https://gallery.shinyapps.io/050-kmeans-example

Showcase de trabajos

Paquete R para X-13ARIMA-SEATS

Otra razones

¿Cuántos tienen su en la mano?
¿Cuántos siguen haciendo informes excel haciendo las resultados previos en R?
Salir del confort y aprender un mundo nuevo donde el primer paso es pequeño

¿Por qué con estilo?

Alternativas para refrescar

shinythemes
shinymaterial
shinydashboard
…CSS

`shinythemes`

Los más fácil de implementar, sin tan alto impacto en código ni imagen.

`shinythemes`

Antes:

library(shiny)

ui <- fluidPage(
   sidebarLayout(...

Ahora:

library(shiny)
library(shinythemes)

ui <- fluidPage(
   theme = shinytheme("superhero"),
   sidebarLayout(...

`shinythemes`

http://104.140.247.162:3838/por-que-shiny-por-que-con-estilo/app-02-shinythemes/

`shinymaterial`

Basado en las normativas de diseño Material Design desarrollado por Google para android

`shinymaterial`

Se debe cambiar el ui , pero no así el server

library(shiny)
library(shinymaterial)

ui <- material_page(
  nav_bar_color = "blue",
  material_row(
    material_column(width = 4, 
      material_card(depth = 4,
        material_slider("nrand", "Simulaciones", min_value = 50,
                        max_value = 100, initial_value = 70),
        material_dropdown("col", "Color", c("red", "blue", "black")),
        material_checkbox("punto", "Puntos", initial_value = TRUE)
      )
    ),
    material_column(width = 8,
      material_card(plotOutput("outplot"), depth = 4)
    )
  )
)

`shinymaterial`

http://104.140.247.162:3838/por-que-shiny-por-que-con-estilo/app-03-shinymaterial/

`shinydashboard`

Orientados a dashboards agrega más funcionalidades

`shinydashboard`

Cambio en el ui

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sliderInput("nrand", "Simulaciones", min = 50, max = 100, value = 70),
    selectInput("col", "Color", c("red", "blue", "black")),
    checkboxInput("punto", "Puntos:", value = FALSE)
  ),
  dashboardBody(
    fluidRow(box(width = 12, plotOutput("outplot")))
  )
)

`shinydashboard`

http://104.140.247.162:3838/por-que-shiny-por-que-con-estilo/app-04-shinydashboard/

`CSS`

La libertad a cierto costo

`CSS`

Todos los paquetes anteriores viven dentro de sus diseños/márgenes
CSS ofrece una libertad infinita
Claro, tiempo hay que dedicarle

`CSS`

http://104.140.247.162:3838/shiny-apps/cl-educ/

Una pequeña historia
de terror
Migrando análisis a R + Shiny

Comienza Así

El programa de Innovación de Alimentos + Saludables deseaba actualizar su sitio en cuanto a diseño y contenido
También agregar unos análisis que hacían… a mano
Consolidando cientos y cientos… de planillas excel

Los análisis

Se basaban en datos del UN Comtrade ( United Nations International Trade Statistics Database) y del OEC (Observatory of Economic complexity)
Se tenían los datos de países (muchos!) y sus transacciones de productos (muchos!!!)
El objetivo era comparar el posicionamiento de Chile respecto a sus competidores