class: center, middle, inverse, title-slide #
library(
highcharter
)
¡De principiante a experto! ## Latin
R
Santiago, CL - Septiembre 2019 ### Joshua Kunst & Ignacio Rossi --- class: clear, right, bottom background-image: url("img/trip.jpg") background-size: cover # Antes de Partir --- # Como seguir el taller - Descargar el proyecto R-Studio https://bit.ly/2kGGltk (comprimido) - Descomprimir, yay! - Abrir el proyecto: doble click en el archivo `LatinR-2019-Highcharter-taller.Rproj` - Códigos y ejercicios en carpeta `R` - Slides en la ruta `slides/index.html` o versión online de las slides en http://jkunst.com/LatinR-2019-Highcharter-taller/slides/ - En las slides lo que aparezca de `esta forma` indica que es código (generalmente) - Internet: 1) eduroam 2) red UC_CentroExtension Password plaza.2020 --- # Evitar errores usuales - Siempre correr los scripts en orden: línea por línea - ¡Sí! Comenzando por la primera - En caso de <code style="color:red">Warning: ... </code>, es un warning no más, nada grave. - En caso de <code style="color:red">Error ... </code>, leerlo con calma y en caso de no poder solucionarlo levantar la manto para ser socorrido - En caso de <code style="color:red">Error ... </code>, leerlo con calma y en caso de no poder solucionarlo levantar la manto para ser socorrido - En caso de <code style="color:red">Error ... </code>, leerlo con calma y en caso de no poder solucionarlo levantar la manto para ser socorrido --- # Los paquetes Necesitaremos de tidyverse: `dplyr` y `purrr` en algunos casos para manipulación de datos y datos. ```r if(!require(tidyverse)) install.packages("tidyverse") if(!require(datos)) install.packages("datos") if(!require(gapminder)) install.packages("gapminder") if(!require(tradestatistics)) install.packages("tradestatistics") if(!require(highcharter)) install.packages("highcharter") library(tidyverse) library(datos) library(tradestatistics) # y lo más importante supongo :P library(highcharter) ``` --- # Prueba de fuego ```r highcharts_demo() ```
--- class: clear, middle, left background-image: url("img/strc.jpg") background-size: cover # Estructura<br>taller --- # Temas - ¿Por que la visualización? (y algunos tips que he aprendido [con errores]) - Highcharts y `highcharter` - Función `hchart` - ¡Ayuda! y documentación - Siempre con estilo y tipos de gráficos - Todo mejora con tooltips, en particular la lectura - Mapas - Integración con `shiny` y `rmarkdown` - Esto no termina aquí: ¡Otros htmlwidgets! --- class: clear, middle, inverse background-image: url("img/dataviz2.png") # ¿Por qué<br>visualización? --- background-image: url("img/chn.png") background-size: normal # ¿Alguien entiende? --- background-image: url("img/russianr4ds.jpg") background-size: cover # Lenguaje común --- # ¿Alguien entiende? ¿Cuál es el mensaje/propósito?
--- # La visualización - Lleva información, es un mensaje - Ejercicio mental para interpretar o _decodificar_(!!) información - No siempre es el fin - Herramienta exploratoria - Distintas visualizaciones en mismos datos / Distintas historias --- # Detalles que importan - Tipo de gráfico (https://blog.datawrapper.de/area-charts/) - Colores (https://blog.datawrapper.de/colors/) - Legendas y ejes (https://blog.datawrapper.de/dualaxis/) - Tipografía Mi humilde recomendación con mucho cariño y respeto https://blog.datawrapper.de/category/thoughts-how-to-s/; [Lisa Charlotte Rost](https://twitter.com/lisacrost) --- # Errores que no hay que imitar - https://twitter.com/CedScherer/status/1176163029681102848 - https://twitter.com/lizardbill/status/1127005323636686848/photo/1 --- class: clear, center, middle, inverse background-image: url("img/hc.gif") background-size: cover # <span id="brand">h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1r</span> --- # HighchartsJS & Highcharter - HighchartsJS es una librería javascript (como plotly, apexcharts, eCharts) - Highcharter es apenas un _wrapper_ de R para highcharts... - Es decir poder usar highchartsJS desde R sin saber _necesariamente_ javascript https://www.highcharts.com/demo  --- class: clear, middle, right background-image: url("img/magic.jpg") background-size: cover # hchart --- # hchart - `hchart` es una función ~~mágica~~ genérica (similar a `plot`) - Dependiendo de la clase del objeto graficará algo particular - Interactividad con una línea de código --- # Antes de graficar! Yo procederé a cambiar el tema por default de highcharts que no me gusta mucho: ```r options(highcharter.theme = hc_theme_smpl()) ``` Usted puede buscar su favorito, por ejemplo: ```r options(highcharter.theme = hc_theme_ggplot2()) ``` Más variedad en http://jkunst.com/highcharts-themes-collection/ --- # Datos a probar ```r diamantes ``` ``` ## # A tibble: 53,940 x 10 ## precio quilate corte color claridad profundidad tabla x y z ## <int> <dbl> <ord> <ord> <ord> <dbl> <dbl> <dbl> <dbl> <dbl> ## 1 326 0.23 Ideal E SI2 61.5 55 3.95 3.98 2.43 ## 2 326 0.21 Premi~ E SI1 59.8 61 3.89 3.84 2.31 ## 3 327 0.23 Bueno E VS1 56.9 65 4.05 4.07 2.31 ## 4 334 0.290 Premi~ I VS2 62.4 58 4.2 4.23 2.63 ## 5 335 0.31 Bueno J SI2 63.3 58 4.34 4.35 2.75 ## 6 336 0.24 Muy b~ J VVS2 62.8 57 3.94 3.96 2.48 ## 7 336 0.24 Muy b~ I VVS1 62.3 57 3.95 3.98 2.47 ## 8 337 0.26 Muy b~ H SI1 61.9 55 4.07 4.11 2.53 ## 9 337 0.22 Regul~ E VS2 65.1 61 3.87 3.78 2.49 ## 10 338 0.23 Muy b~ H VS1 59.4 61 4 4.05 2.39 ## # ... with 53,930 more rows ``` --- # Variables numéricas ```r hchart(diamantes$precio, name = "Precio") # Pruebe el zoom! ```
--- # Factores ```r hchart(diamantes$corte, name = "Corte", color = "#509EF4") ```
--- # Series temporales ```r data("AirPassengers") hchart(AirPassengers, showInLegend = FALSE, name = "Pasajeros") ```
--- # Matrices (correlaciones o distancias) ```r corcar <- cor(datos::mtautos) hchart(corcar) ```
--- class: clear, center <iframe src="https://giphy.com/embed/12NUbkX6p4xOO4" width="480" height="440" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/shia-labeouf-12NUbkX6p4xOO4">via GIPHY</a></p> --- # ¡Y más! - Data frames, densidades - Paquetes `igraph`, `survival`, `quantmod` - Componentes principales - Ver ejemplos en http://jkunst.com/highcharter/hchart.html --- # Tiempo de _codear_ .font150[ <br> ¡Ahora usted! Revisemos el archivo `R/01-hchart.R` ] --- # hchart en data frames El caso de data frame es particular: - En una data frame (tabla) pueden existir varias columnas las cuales querríamos representar o no visualmente en un gráfico - Debemos _hacer el esfuerzo_ de mencionar comos queremos _mapear_ (¡¿KHÉ?!) las variables; y que variables - Y obviamente mencionar el tipo de representación -tipo de gráfico- a usar. - En data frames `hchart` funciona relativamente parecido a `ggplot2` --- # ¿Qué es esto de _mapear_? Por ejemplo para graficar un puntos debemos decirle a `R` la posición `x`, `y` y tamaño si quisiéramos para cada punto: .center[] https://www.sharpsightlabs.com/blog/r-package-think-about-visualization/ https://rpubs.com/JoanClaverol/405488 --- # Datos a utilizar ```r glimpse(millas) ``` ``` ## Observations: 234 ## Variables: 11 ## $ fabricante <chr> "audi", "audi", "audi", "audi", "audi", "audi", "a... ## $ modelo <chr> "a4", "a4", "a4", "a4", "a4", "a4", "a4", "a4 quat... ## $ motor <dbl> 1.8, 1.8, 2.0, 2.0, 2.8, 2.8, 3.1, 1.8, 1.8, 2.0, ... ## $ anio <int> 1999, 1999, 2008, 2008, 1999, 1999, 2008, 1999, 19... ## $ cilindros <int> 4, 4, 4, 4, 6, 6, 6, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6,... ## $ transmision <chr> "auto(l5)", "manual(m5)", "manual(m6)", "auto(av)"... ## $ traccion <chr> "d", "d", "d", "d", "d", "d", "d", "4", "4", "4", ... ## $ ciudad <int> 18, 21, 20, 21, 16, 18, 18, 18, 16, 20, 19, 15, 17... ## $ autopista <int> 29, 29, 31, 30, 26, 26, 27, 26, 25, 28, 27, 25, 25... ## $ combustible <chr> "p", "p", "p", "p", "p", "p", "p", "p", "p", "p", ... ## $ clase <chr> "compacto", "compacto", "compacto", "compacto", "c... ``` --- # De vuelta a hchart ```r hchart(millas, "point", hcaes(x = ciudad, y = autopista, group = clase)) ```
--- # Tiempo de _codear_ nuevamente .font150[ <br> ¿De nuevo? Yay!/Buuu! Revisemos el archivo `R/02-dataframes.R` ] --- class: clear, center, middle, inverse background-image: url("img/panel.jpg") background-size: cover # Opciones y Documentación --- # ¡Parámetros para todes! - HighchartsJS (y entonces `highcharter`) tienens _muuuuchas_ opciones - Existe al menos un ejemplo para cada opción/parámetro - Referencia https://api.highcharts.com/highcharts/  --- # Ejemplo: De esto
--- # Ejemplo: A esto
--- # ¡¿Cómo usarlas?! - Hay configuraciones para eje x, eje y, leyendas, titulo, subtitulo, ver (nuevamente toooodas las opciones) en https://api.highcharts.com/highcharts/ - Desde `R` cada una se accede con el prefijo `hc_`, por ejemplo, para titulos `hc_title`, para eje x (xAxis) `hc_xAxis` - Ya las descubriremos: cuales son y como usarlas - Mientras un buen post del amigo Danton Noriega https://dantonnoriega.github.io/ultinomics.org/post/2017-04-05-highcharter-explainer.html: > ... The key to building any plot in highcharter is understanding how to build a series in R and how it relates to the structure of a series in Highcharts. (@dantonnoriega) --- # Hora de _codear_ y testear las opciones .font150[ <br> ¿Qué archivo es ahora? Revisemos el archivo `R/03-highcharts-api-options.R` y las opciones más relevantes ] --- class: clear, middle, right background-image: url("img/style.png") background-size: cover # Flexibilidad<br>y Estilo --- # Estilo - A veces es bueno dar contexto o enfatizarlo - Como vimos antes, la flexibilidad de highcharts en los demos es inmensa - `highcharter` tiene incluído algunos temas (http://jkunst.com/highcharts-themes-collection) - `highcharter` tambien tiene la funcionalidad de obtener fuentes de https://fonts.google.com/ --- # ggplot2 ```r hc %>% hc_add_theme(hc_theme_ggplot2()) ```
--- # Financial times ```r hc %>% hc_add_theme(hc_theme_ft()) ```
--- # Flatdark ```r hc %>% hc_add_theme(hc_theme_flatdark()) ```
--- # O modificar/crear un tema ```r hc_theme_terror <- function(...){ theme <- list( colors = c("#A9CF54", "#C23C2A", "white", "#979797", "#FBB829"), chart = list( style = list(fontFamily = "Amatic SC", fontSize = "0.8em", color = "white"), backgroundColor = "#2e0504" ), legend = list( enabled = TRUE, align = "right", verticalAlign = "bottom", itemStyle = list( color = "white", fontSize = "1.1em" ), itemHoverStyle = list( color = "#C0C0C0" ), itemHiddenStyle = list( color = "#444444" ) ), title = list( text = NULL, style = list( color = "red", fontSize = "1.5em", fontFamily = "Creepster" ) ), tooltip = list( backgroundColor = "#1C242D", borderColor = "#1C242D", borderWidth = 1, borderRadius = 0, style = list( color = "white" ) ), subtitle = list( style = list( color = "white", fontSize = "1.2em" ) ), xAxis = list( gridLineColor = "#946b6a", gridLineWidth = 1, labels = list( style = list( color = "white" ) ), lineColor = "#946b6a", tickColor = "#946b6a", title = list( style = list( color = "white" ), text = NULL ) ), yAxis = list( gridLineColor = "#946b6a", gridLineWidth = 1, labels = list( style = list( color = "#white" ), lineColor = "#946b6a", tickColor = "#946b6a", title = list( style = list( color = "white" ), text = NULL ) ) ) ) theme <- structure(theme, class = "hc_theme") if (length(list(...)) > 0) { theme <- hc_theme_merge( theme, hc_theme(...) ) } theme } ``` --- # O modificar/crear un tema ```r hcterror <- hc %>% hc_add_theme(hc_theme_terror()) %>% hc_title(text = "Grafica tus datos de Miedo") %>% hc_subtitle(text = "Obviamente pudes (ab)usar de esto") ``` --- # O modificar/crear un tema ```r hcterror ```
--- # Hora de CTRL+R y testear los temas .font150[ <br> Revisemos el archivo `R/04-customization-themes.R` ] --- # Flexibilidad - HighchartsJS (y entonces `highcharter`) tienen muchos tipos de representar datos - Los clásicos: pie, column, point - streamgraphs, sankey - pucketbubbles, items list - funnel, waterfall, pyramid, wordclouds - Faltan algunas actualizaciones en highcharter para soportar algunos tipos de gráficos (estamos trabajando para usted) y nuevas opciones que van apareciendo - Algunas referencias http://jkunst.com/highcharter/highcharts.html y https://www.highcharts.com/demo --- # Ya es tiempo de... .font150[ <br> Replicar unos buenos ejemplos! Revisemos el archivo `R/05-chart-types.R` ] --- class: clear, middle, left background-image: url("img/tooltip.jpg") background-size: contain # <span style="color:black">Tooltips</span> --- # Tooltips... - Buen recurso para no saturar de información un gráfico con información - Permite dar detalle que el _usuario_ decide ver - (Y son bknes porque a mi me gustan) --- # Comparemos esto ```r hc ```
--- # Con ```r hc %>% hc_tooltip(split = TRUE) ```
--- # Y quizás, tal vez con ```r hc %>% hc_tooltip(table = TRUE, sort = TRUE) ```
--- # Algo más entretenido `tooltip_table`
--- # Algo más más entretenido `tooltip_chart`
--- # Otros ejemplos - Meetup cl http://jkunst.com/slides/201906-Highcharter-en-30-minutos-o-menos-o-m%C3%A1s/index.html#/section-1 - Introducción a `tooltip_chart` http://jkunst.com/blog/posts/2019-02-04-using-tooltips-in-unexpected-ways/ - Estilo http://jkunst.com/blog/posts/2017-03-03-giving-a-thematic-touch-to-your-interactive-chart - Tooltips + marker shttp://jkunst.com/blog/posts/2016-03-08-pokemon-vizem-all/ --- # Toooooltips! .font150[ <br> Revisemos el archivo `R/06-tooltip.R` ] --- class: clear, bottom, left background-image: url("img/maps.jpg") background-size: cover # Mapas --- # Mapas - A veces se usan (cierto?), y que mejor que tener todos los gráficos con el mismo _sabor_, estilo. - Podemos usar geojson, shapes y la gracia que la sitaxis para opciones es la misma - Para comenzar la función `hcmap` es últi para comenzar usar mapas de una colleción ya existente http://code.highcharts.com/mapdata/ - Referencias: https://www.highcharts.com/maps/demo, http://jkunst.com/highcharter/highmaps.html, https://onsocialtrends.org/politics/political_history.html (Gracias a Uma Huggins) --- # hcmap ```r hcmap("custom/world-robinson-lowres") ```
--- # Vamos a realizar mapas más entretenidos! .font150[ <br> Revisemos el archivo `R/07-maps.R` ] --- class: clear, bottom, left background-image: url("img/shiny.jpg") background-size: cover # Shiny --- # shiny & highcharter <3 - `highcharter` es un htmlwidget, por lo que es _shiny-ready_ - Y con la flexibilidad de `shiny` y `highcharter` puedes hacer lo que te de la gana - Ejemplos: https://centre.humdata.org/fighting-rumors-to-fight-ebola/, http://www.piaschile.cl/mercado/benchmarking-internacional/, https://shiny.tradestatistics.io/dashboard/ - El gráfico no solo se puede _ver_ (output) también, con conocimiento suficiente, poder usarlo como input --- # Revisemos un ejemplo simple .font150[ <br> Pero no por eso FOME! Revisemos el archivo `R/07-maps.R` ] --- class: clear, middle, right background-image: url("img/html.png") background-size: cover # <span style="background-color:#202020">htmlwidgets</span> --- # Esto no termina aquí (a menos que no te haya gustado la _interactivdad_) Highcharter es solo uno de muchos otros paquetes (http://gallery.htmlwidgets.org/) para aceder a las bondades ~~y dolores de cabeza~~ de html/javascript. Existe muchas librerías javascripts. Ploty es muy conocido pero existen muy muy buenas otras opciones: - [echarts4r](https://echarts4r.john-coene.com/) de [John (JP) Coene](https://twitter.com/jdatap), - [aperxcharter](https://dreamrs.github.io/apexcharter/articles/starting-with-apexcharts.html) y [billboarder](https://dreamrs.github.io/billboarder/articles/billboarder.html) de [Victor Perrier](https://twitter.com/_pvictorr) John y Victor tienen más paquetes tanto para visualización como shiny Como cada librería JS tiene su propia sintaxis el paquete R se desarrolla en función de dicha forma, pero muy son similares en cuanto a uso --- # Créditos y gracias totales ## Personas importantes! Patricia, Elio, Ignacio, Riva! La comunidad y desarrolladores (desde R a JS) ## Logo Mauricio @pacha Vargas ## Imágenes https://500px.com/photo/43752970/Mount-Fitzroy-at-sunset-by-Jimmy-Mcintyre