2.10 HTML Widgets

Aunque una de las mayores fortalezas de R es la visualización de datos, hay un gran número de librerías de JavaScript para la visualización de datos mucho más rica. Estas librerías se pueden utilizar para crear aplicaciones interactivas que pueden procesarse fácilmente en los navegadores web, por lo que los usuarios no necesitan instalar ningún paquete de software adicional para ver las visualizaciones. Una forma de llevar estas librerías JavaScript a R es a través del paquete htmlwidgets (Vaidyanathan et al. 2017).

Los HTML widgets pueden representarse como una página web independiente (al igual que un gráfico de R), o incrustarse en los documentos de R Markdown y aplicaciones Shiny. Fueron diseñados originalmente para salidas HTML solamente, y requieren la disponibilidad de JavaScript, por lo que no van a trabajar en formatos que no son HTML de salida, tales como LaTeX/PDF. Antes de la v1.13 de knitr, se obtenía un error cuando se procesaban widgets de HTML a un formato de salida que no era HTML. A partir de esta versión, los widgets de HTML se procesan automáticamente como imágenes tomadas a través del paquete webshot (???). Por supuesto, es necesario instalar el paquete webshot. Además, debe instalarse PhantomJS (http://phantomjs.org), ya que es lo que webshot utiliza para capturar imágenes. Tanto WebShot como PhantomJS se pueden instalar de forma automática desde R:

install.packages('webshot')
webshot::install_phantomjs()

La función install_phantomjs() funciona para Windows, OSX, y Linux. También puede optar por descargar e instalar PhantomJS por sí mismo, si está familiarizado con la modificación del entorno del sistema variable de PATH.

Cuando knitr detecta un objeto widget de HTML en un chunk, o compila el widget normalmente cuando el formato de salida actual es HTML, o guarda el widget como una página HTML y llama a webshot para capturar la pantalla de la página HTML cuando el formato de salida no es HTML. He aquí un ejemplo de una tabla creada a partir del paquete DT (Xie 2016):

DT::datatable(iris)

Figura: 2.5: Una tabla widget compilada a través del paquete DT.

Si usted está leyendo este libro como un página web ahora mismo, debería ver una tabla interactiva generada a partir del chunk anterior, por ejemplo, puede ordenar las columnas y generar la búsqueda en la tabla. Si está leyendo una versión que no sea HTML de este libro, debería ver una captura de pantalla de la tabla. La captura de pantalla puede tener un aspecto un poco diferente con el widget real mostrado en el navegador web, debido a la diferencia entre un navegador web real y navegador virtual PhantomJS ’.

Hay un número de opciones de chunk de knitr relacionados con la captura de pantalla. En primer lugar, si usted no está satisfecho con la calidad de las capturas de pantalla automáticas, o desea una captura de pantalla del widget en un estado en particular (por ejemplo, después de hacer clic y ordenar una determinada columna de una tabla), puede capturar la pantalla de forma manual, y proporcionar su propia captura a través de la opción del chunk screenshot.alt (capturas de pantalla alternativas). Esta opción toma las ubicaciones de las imágenes. Si tiene varios widgets en un chunk, se puede proporcionar un vector con las rutas de las imágenes. Cuando esta opción está presente, knitr ya no llamará a webshot para tomar capturas de pantalla automáticas.

En segundo lugar, a veces es posible que desee forzar a knitr a utilizar imágenes estáticas en lugar de compilar los widgets incluso en páginas HTML. En este caso, se puede establecer la opción del chunk screenshot.force = TRUE, y los widgets siempre serán mostrados como imágenes estáticas. Debe tenerse en cuenta que aún puede optar por utilizar capturas de pantalla automáticas o personalizadas.

En tercer lugar, webshot tiene algunas opciones para controlar las capturas de pantalla automáticas, y es posible especificar estas opciones a través de la opción en el chunk screenshot.opts, que toma una lista como list(delay = 2, cliprect = 'viewport'). Ver la página de ayuda ? webshot::webshot para la lista completa de posibles opciones, y la viñeta del paquete vignette('intro', package = 'webshot') ha ilustrado el efecto de estas opciones. Aquí la opción delay puede ser importante para los widgets que toman mucho tiempo en cargarse: delay especifica el número de segundos de espera antes de que PhantomJS capture la pantalla. Si ve una pantalla incompleta, es posible que desee especificar un retraso más largo (el valor predeterminado es 0,2 segundos).

En cuarto lugar, si usted siente que esto es lento para capturar las imágenes, o no quieren hacerlo cada vez que ejecuta el chunk, se puede utilizar la opción del chunk cache = TRUE para almacenar en caché el chunk. El almacenamiento en caché funciona tanto para HTML como para formatos de salida que no son HTML.

Las imágenes se comportan como gráficos normales en R en el sentido de que muchas opciones del chunk relacionadas con figuras también se aplican a las capturas, incluyendo fig.width,fig.height, out.width, fig.cap, etc. Así pues, puede especificarse el tamaño de las capturas de pantalla en el documento de salida, y asignar los pies de figura a ellos también. El formato de imagen de las capturas de pantalla automáticas puede especificarse mediante la opción dev, y los posibles valores son PDF, png, y jpeg. El valor predeterminado para la salida PDF es PDF, y png para otros tipos de salida. Nótese que PDF puede no funcionar tan fielmente como png: a veces hay ciertos elementos en una página HTML que no puede representarse en la captura de pantalla en PDF, por lo que es posible que desee utilizarse dev = 'png' incluso para la salida PDF. Depende de los casos específicos de widgets de HTML, y se puede intentar tanto PDF como png (o jpeg) antes de decidir qué formato es el más deseable.

Referencias

Vaidyanathan, Ramnath, Yihui Xie, JJ Allaire, Joe Cheng, and Kenton Russell. 2017. Htmlwidgets: HTML Widgets for R. https://CRAN.R-project.org/package=htmlwidgets.

Xie, Yihui. 2016. DT: A Wrapper of the Javascript Library ’Datatables’. https://CRAN.R-project.org/package=DT.