Visualización interactiva

R es una herramienta muy poderosa que permite realizar cálculos estadísticos y también nos permite observar gráficos y resultados estadísticos que nos ayudan a obtener más información sobre nuestros datos, a raíz de esto se han desarrollado una variedad de paquetes que muestran un mayor detalle de los mismos para asistir a los investigadores en su proceso de estudio.

Los HTMLWidgets son gráficos que producen una visualización interactiva, estos se pueden visualizar desde la cónsola de R, documentos Rmarkdown o en aplicaciones Shiny. Aquí mostraremos algunos ejemplos de estos tipos de gráficos y como usarlos en Shiny.

Leaflet

Se usa para crear mapas. Este paquete se puede instalar y cargar en la consola de R con los siguientes comandos:

# Instalar el paquete
install.packages("leaflet")
# Cargar el paquete
library(leaflet)

La función principal de este paquete es leaflet(), la misma crea un mapa usando htmlwidgets, este mapa puede ser generado desde un documento RMarkdown o en una aplicación Shiny. Hay dos posibles opciones para generar un mapa: una es cargalo directamente mediante un objeto espacial o simplemente utilizar el que ofrece el paquete por defecto.

La función leaflet() tiene los siguientes parámetros de entrada:

  • data : El objeto que se desea cargar, puede ser una matriz, un data.frame, un objeto espacial generado por los paquetes SpatialPoints, SpatialPointsDataFrame, Polygon, Polygons, SpatialPolygons, SpatialPolygonsDataFrame, Line, Lines, SpatialLines y SpatialLinesDataFrame, o un data.frame espacial con el paquete sf.

  • width : Este parámetro corresponde al ancho del mapa.

  • height : Altura del mapa.

  • padding: Espacio alrededor del mapa.

  • options : Opciones del mapa, para especificarlos se utiliza la función leafletOptions(), dentro de esta última función podemos encontrar el mínimo y máximo de zoom que se le puede hacer al mapa, entre otros.

Cuando en la función leaflet() no se le especifica el mapa podemos agregarle objetos que tienen por defecto un mapa cargado en http://www.openstreetmap.org, el cual se puede utilizar sin costo. Algunos de los objetos que se pueden agregar al mapa son los siguientes:

  • addMarkers() : Agrega marcadores al mapa.

  • addCircles() : Agrega círculos al mapa.

  • addPolylines() : Agrega líneas de un polígonos al mapa.

Este paquete ofrece dos funciones que se usan en el momento de crear una aplicación Shiny, recordemos que se especifican los elementos de la interfaz en ui y se generan los resultados o componentes dinámicos en el servidor serve. Las funciones que se usan en cada la aplicación Shiny son:

  • Dentro del ui se utiliza leafletOutput(outputId, width = "100%", height = 400)

  • En el servidor serve se utiliza la función renderLeaflet(expr, env = parent.frame(), quoted = FALSE), dentro del parámetro expr se deben colocar los comando del mapa correspondiente.

A continuación crearemos un mapa con un marcador en la dirección de Synergy Vision, con un círculo de 60 metros al rededor de dicho punto.

library(shiny)
library(leaflet)

ui <- fluidPage(
          titlePanel (title="Dirección de Synergy Vision"),
          leafletOutput("map")
)

server <- function(input, output, session) {

  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      addMarkers(lng=-66.85356, lat=10.49845, popup="Synergy Vision",
                 icon =  icons(iconUrl = "http://synergy.vision/img/vision.png",
                               iconWidth = 100)) %>%
      addCircles(lng =-66.85356, lat =10.49845, radius = 60, color = "orange")
  })
}

shinyApp(ui, server)

Dichos comandos generan la aplicación siguiente:

dygraphs

Se usa para generar gráficos de series de tiempo. Para instalar y cargar dicho paquete usamos los siguientes comandos:

# Instalar el paquete
install.packages("dygraphs")
# Cargar el paquete
library(dygraphs)

Este paquete permite realizar gráficos interactivos, al igual que el paquete anterior este también se usa en documentos RMarkdown y en aplicaciones Shiny´, la función principal de este paquete es dygraphs()` la cual tiene como parámetros de entrada los siguientes argumentos:

  • data : Puede ser una serie de tiempo o datos numéricos.

  • main : Título del gráfico.

  • xlab y ylab : Nombre que se le da al eje $x$ y al eje $y$, respectivamente.

  • periodicity : Periodicidad de la serie de tiempo (si no se especifica se calcula con la función periodicity() del paquete xts).

  • group : Grupos para asociar este gráfico.

  • elementId : Guardar un elemento ID para el widget. En caso de que se necesite para otro widget.

  • width : Ancho en píxeles del gráfico.

  • height : Altura en píxeles del gráfico.

Utilizaremos el paquete quantmod, para descargar una serie de tiempo asociado a los datos de precios de cierre de AAPL en el período de 2015-01-01 al 2017-08-18.

# Extracción de los datos de la acción de Apple, desde Google Finance
AAPL <- getSymbols("AAPL", src="google", from = "2015-01-01", 
                   to = "2017-08-18", auto.assign = FALSE)

Despues de crear el gráfico con la función dygraphs(), le podemos agregar características utilizando la función dyOptions(), algunos de sus parámetros son:

  • colors : Seleccionar un color para la línea de la serie.

  • stepPlot : es verdadero o falso, en caso de ser falso agrega líneas entre los puntos de la serie y si es verdadero gráfica líneas de saltos (tipo escaleras) entre los puntos.

  • fillGraph : Parámetro verdadero o falso, si es verdadero se sombrea el área debajo de la curva, la transparencia del color se especifica en fillAlpha.

  • drawPoints : Si es verdadero coloca puntos en cada dato de la serie, el grosor de dicho punto se especifica en pointSize.

También podemos usar la función dySeries() para especificar las opciones antes mencionadas. Otra función dentro de este paquete que es importante mencionar es dyRangeSelector(), la cual tiene los siguientes parámetros:

  • dateWindow : Si se desea especificar una fecha, sino se deja vacía.

  • height: Tamaño en píxeles del rango de selección.

  • fillColor: Color de fondo del gráfico correspondiente al rango.

  • strokeColor: Color de la línea del gráfico correspondiente al rango

  • keepMouseZoom: Mantiene el zoom en el rango seleccionado.

  • retainDateWindow: Para conservar los valores correspondientes al eje de las x, y utilizarlo en otros gráficos.

Las funciones que se usan para utilizar dicho paquete en una aplicación Shiny son:

  • Dentro de la interfaz ui se utiliza dygraphOutput(outputId, width = "100%", height = "400px").

  • En la parte del servidor serve se usa la función renderDygraph(expr, env = parent.frame(), quoted = FALSE), dentro del parámetro expr se deben colocar los comando del gráfico que se quiere mostrar.

A contiuación vamos a crear una aplicación Shiny que muestra los precios de apertura y cierre de AAPL, dándole la opción al usuario de seleccionar cual de las dos series quiere ver, la que corresponde a los precios de apertura o de cierre.

library(dygraphs)
library(datasets)
library(quantmod)

ui<-shinyUI(
      fluidPage(
        titlePanel("Precios de AAPL desde 2015-01-01 hasta 2017-08-18"),
        selectInput( inputId = "opc", label = "Seleccione:",
                     choices= c("Precio de Apertura"="Open",
                                "Precio de Cierre"="Close") ),
        dygraphOutput("dygraph")
      )
)

server<- shinyServer(function(input, output) {

  AAPL <- getSymbols( "AAPL", src="google", from = "2015-01-01",
                      to = "2017-08-18", auto.assign = FALSE)

  data <- reactive({
    inFile <- input$opc
      if (is.null(inFile))
          return(NULL)
      if(inFile=="Open") { AAPL$AAPL.Open }
      else { AAPL$AAPL.Close }

  })

  output$dygraph <- renderDygraph({
    dygraph( data(), main = "AAPL", xlab = "Fecha", ylab = "Precio")%>%
      dyOptions( colors = "blue", stepPlot = FALSE, fillGraph = TRUE, fillAlpha = 0.5)%>%
      dyRangeSelector( fillColor = "green", strokeColor = "black")
  })

})

shinyApp(ui, server)

Lo que mostraremos a continuación es lo que observamos si seleccionamos los precios de cierre.

Ploty

Con este paquete podemos hacer gráficos de alta calidad en 2D y 3D. Estos gráficos pueden ser líneas, histogramas, gráficos de áreas, mapas de calor, entre otros. Para instalar y cargar dicho paquete usamos los siguientes comandos:

# Instalar el paquete
install.packages("plotly")
# Cargar el paquete
library(plotly)

La función base de este paquete es plot_ly(), a continuación algunos de los argumentos:

  • data : Es un objeto tipo data.frame.

  • x : Datos que corresponden al eje de las x.

  • y : datos que corresponden al eje de las y.

  • ... : Atributos del gráfico, se puede ver más detalle sobre estos en la documentación de plotly, un atributo que cabe la pena destacar es mode el cual es una combinación de marcadores, líneas y texto unidos con + o ninguno (ejemplo lines+markers+text, none).

  • type: Un caracter que describe la forma que tendrá el gráfico.

  • size: Indica el tamaño o grosor de las líneas del gráfico, tiene que ser un valor mayor o igual a cero, debe usarse la función I() (por ejemplo I(2)).

  • color: Color del gráfico se debe colocar usando la función I()( ejemplo I("red"))

  • symbols: Un vector que contiene los símbolos que se colocarán en el gráfico, se usa el argumento symbol para indicar un símbolo específico dentro de la función I().

  • linetypes: Un vector que contiene los tipos de líneas que se usarán. El argumento linetype se usa para indicar un tipo de línea en particular también para definirlo debe usarse también la funcion I().

A estos gráficos se les pueden agregar características o otros gráficos, algunas de las funciones que se usan para estos casos son add_annotations() (Agregar una nota), add_area() (agregar un área), add_bars() (agregar barras), add_boxplot() (agregar boxplot), entre otros.

Las funciones que se utilizan en una aplicación Shiny son:

  • Dentro de la interfaz ui se utiliza plotlyOutput(outputId, width = "100%", height = "400px", inline = FALSE).

  • En la parte del servidor serve se usa la función renderPlotly(expr, env = parent.frame(), quoted = FALSE), dentro del parámetro expr se deben colocar los comando del gráfico correspondiente.

A contiuación crearemos una aplicación Shiny que muestra un gráfico 3D de una distribución Normal bivarida, en la parte del servidor estará la función que genera los datos de la Normal bivariada y el generador del gráfico usando este paquete.

library(shiny)
library(plotly)

ui <- fluidPage(
        titlePanel("Gráfico en 3D"),
        plotlyOutput("plot")
)

server <- function(input, output, session) {

  normalbiva <- function(x,y) {
    rho <- 0.2; mu1 <- 0; mu2 <- 0; s1 <- 2; s2 <- 2

    z_1 <- ( (x-mu1)^2/s1^2 ) + ( (2*rho*(x-mu1)*(y-mu2))/(s1*s2) )
            + ( (y-mu2)^2/s2^2 ) 
    
    (2*pi*s1*s2*sqrt(1-rho^2))^(-1)*exp( -z_1/(2*(1-rho^2)) )
  }

  output$plot <- renderPlotly({
    x <- seq(-6,6,0.1)
    y <- seq(-6,6,0.1)
    z <- outer(x, y, FUN="normalbiva")

    plot_ly(x=x,y=y,z=z, type="surface") %>% layout( title = "Normal Bivariada")
  })

}

shinyApp(ui, server)

rbokeh

Bokeh es una librería de visualización de datos que permite crear gráficos basados en tecnología Web, utiliza el canvas de HTML y provee varios mecanismos de interacción.

Para instalar y cargar el paquete usamos los comandos siguientes:

# Instalar el paquete
install.packages("rbokeh")
#Cargar la libreria
library(rbokeh)

La función principal para la construcción de gráficos con este paquete es figure(), los argumentos principales de dicha función son:

  • data : Los datos puede ser colocados en las funciones que crean capas sobre éste.

  • width y height : Ancho y alto en píxeles, respectivamente.

  • title, xlab y ylab : Título y nombre de los ejes.

  • xlim y ylim : Para especificar los límites de los ejes.

Sobre el gráfico que genera la función figure() podemos agregarle capas, gráficos que se van agregando al gráfico base, a continuación nombraremos algunas funciones que realizan los gráficos que se usan como capas:

  • ly_abline() : Agrega una línea.

  • ly_boxplot() : Agrega un boxplot.

  • ly_points() : Agrega puntos.

  • ly_polygons() : Agrega polígonos.

Si queremos que el gráfico muestre leyenda lo especificamos dentro de las capas (colocando legend) y allí especificamos los nombres respectivos a las leyendas.

Los nombres de los ejes también se pueden agregar con las funciones x_axis() y y_axis().

La forma de crear un gráfico tipo rbokeh en Shiny es usando las funciones siguientes:

  • Dentro de la interfaz ui se utiliza rbokehOutput(outputId, width = "100%", height = "400px").

  • En el servidor serve se usa la función renderRbokeh(expr, env = parent.frame(), quoted = FALSE), dentro del parámetro expr se deben colocar los comando del gráfico correspondiente.

Seguidamente presentaremos el codigo de una aplicación Shiny utilizando los precios de AAPL que se usaron en la función anterior, mostraremo un gráfico donde colocamos los precios de apertura y cierre.

library("shiny")
library("rbokeh")

ui <- fluidPage(
  titlePanel("AAPL precios de apertura y cierre"),
  rbokehOutput("rbokeh")
)

server <- function(input, output, session) {
  output$rbokeh <- renderRbokeh({
    figure(width = 900,height = 400) %>%
      ly_points(x=1:n,y= data$AAPL.Open, color = "green", size=2) %>%
      ly_lines(x=1:n,y= data$AAPL.Open,legend = "Open", color = "green", alpha = 0.3)%>%
      ly_points(x=1:n,y= data$AAPL.Close, color = "blue", size=2)%>%
      ly_lines(x=1:n,y= data$AAPL.Close,legend = "Close", color = "blue", alpha = 0.3)%>%
      x_axis("Tiempo") %>% y_axis("Precio")
  })
}

shinyApp(ui, server)

Son diversas las opciones que se ofrecen para visualizar con HTMLWidgets, esperamos esta sea una pequeña muestra que sirva como referencia y alimente la curiosidad.

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.