h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1r
en 30 minutos o menos
…o másJoshua Kunst, @jbkunst, Meetup UseRchile Junio 2019

Antes de partir

slides, código y material en https://github.com/jbkunst y jkunst.com/slides
Twitter, gmail, github username jbkunst
Muchos de los ejemplos vienen de jkunst.com/blog

Hola! Qué haremos?

Por qué la visualización?
Qué es HighchartsJS, y que es highcharter?
Mostraremos las mejores características

Así me siento
cuando uso highcharter

Pero la realidad:
Donde está la documentación?!?!?

Porque
visualización
de dados?

Ejercicio

Cuál gráfico funciona mejor con: La región del sur mostró un mayor aumento

region	Q1	Q2	Q3	Q4
sur	100	150	225	290
norte	150	160	180	300
este	180	200	200	240
oeste	250	250	300	170

Opción #1

Opción #2

Opción #3

En el gráfico va
n|1u|0e|3s|2t|1r|2o|1
mensaje

h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1r

HighchartsJS & Highcharter

HighchartsJS es una librería javascript (como plotly)
HighchartsJS es una librería madura, lleva tiempo
Highcharter es apenas un wrapper de highcharts…
…más algunas funcionalidades

1. `hchart`

`hchart`

hchart es una función genérica (similar a plot)
Dependiendo de la clase del objeto graficará algo particular
Interactividad con una línea de código

Importante: datos y paquetes

library(tidyverse)
library(highcharter)
library(datos)

data("diamantes", packages = "datos")
glimpse(diamantes)

## Observations: 53,940
## Variables: 10
## $ precio      <int> 326, 326, 327, 334, 335, 336, 336, 337, 337, 338, 33…
## $ quilate     <dbl> 0.23, 0.21, 0.23, 0.29, 0.31, 0.24, 0.24, 0.26, 0.22…
## $ corte       <ord> Ideal, Premium, Bueno, Premium, Bueno, Muy bueno, Mu…
## $ color       <ord> E, E, E, I, J, J, I, H, E, H, J, J, F, J, E, E, I, J…
## $ claridad    <ord> SI2, SI1, VS1, VS2, SI2, VVS2, VVS1, SI1, VS2, VS1, …
## $ profundidad <dbl> 61.5, 59.8, 56.9, 62.4, 63.3, 62.8, 62.3, 61.9, 65.1…
## $ tabla       <dbl> 55, 61, 65, 58, 58, 57, 57, 55, 61, 61, 55, 56, 61, …
## $ x           <dbl> 3.95, 3.89, 4.05, 4.20, 4.34, 3.94, 3.95, 4.07, 3.87…
## $ y           <dbl> 3.98, 3.84, 4.07, 4.23, 4.35, 3.96, 3.98, 4.11, 3.78…
## $ z           <dbl> 2.43, 2.31, 2.31, 2.63, 2.75, 2.48, 2.47, 2.53, 2.49…

Variables numéricas

hchart(diamantes$precio, name = "Precio")

Factores

hchart(diamantes$corte, name = "Corte", color = "#509EF4")

Series temporales

data("AirPassengers")
hchart(AirPassengers, showInLegend = FALSE, name = "Pasajeros")

library(forecast)
fit <- forecast(AirPassengers)
hchart(fit, name = "Pasajeros")

corcar <- cor(tibble::column_to_rownames(datos::mtautos, "modelo"))
hchart(corcar)

library(quantmod)
goog <- getSymbols("GOOG", auto.assign = FALSE)
hchart(goog)

Y más:

Data frames, densidades
Paquetes igraph, survival, quantmod
Componentes principales
Más en http://jkunst.com/highcharter/hchart.html

via GIPHY

2. Opciones y Documentación

Opciones y Documentación

HighchartsJS (y entonces highcharter) tienens muuuchas opciones
Existe al menos un ejemplo para cada parámetro
Referencia https://api.highcharts.com/highcharts/

data(citytemp)

citytemp_long <- citytemp %>% 
  gather(city, temp, -month) %>% 
  mutate(month = factor(month, month.abb))

glimpse(citytemp_long)

## Observations: 48
## Variables: 3
## $ month <fct> Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec…
## $ city  <chr> "tokyo", "tokyo", "tokyo", "tokyo", "tokyo", "tokyo", "tok…
## $ temp  <dbl> 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 1…

hc <- hchart(citytemp_long, "line", hcaes(month, temp, group = city)) %>% 
  hc_title(text = "Mi zuperderduper gráfico") %>% 
  hc_credits(enabled = TRUE, text = "Este grafico es serio porque tiene <b>caption<b>", useHTML = TRUE)

hc2 <- hc %>% 
  hc_chart(zoomType = "xy") %>% 
  hc_xAxis(
    title = list(text = "Meses en el eje x"),
    plotLines = list(list(
      label = list(text = "Esto es una plotLine", verticalAlign = "bottom", textAlign = "right", y = -5),
      color = "#FF0000", width = 2, value = 5.5
    ))
    ) %>% 
  hc_yAxis(
    title = list(text = "Temperatura en el eje y"),
    opposite = TRUE,
    plotBands = list(list(
      from = 25, to = 80, color = "rgba(100, 0, 0, 0.1)",
      label = list(align = "right", textAlign = "right", x = -10, text = "Esto es una plotBand")
    ))
    ) %>%
    hc_annotations(
    list(
      labels = list(
        list(point = list(x = 7, y = 26.5, xAxis = 0, yAxis = 0), text = "Mucho calor oe"))
    )) %>% 
    hc_legend(verticalAlign = "top") %>%
  hc_mapNavigation(enabled = TRUE) %>% 
  hc_exporting(enabled = TRUE) # "exporting option" :)

3. Flexibilidad
y Estilo

Flexibilidad

HighchartsJS (y entonces highcharter) tienen muchos tipos de plots:

Los clásicos: pie, column, point
streamgraphs, sankey
pucketbubbles, items list
funnel, waterfall, pyramid, wordclouds
y más…

http://jkunst.com/highcharter/highcharts.html

Estilo

A veces es bueno dar contexto o enfatizarlo
Como vimos antes, la flexibilidad de highcharts es inmensa
highcharter tiene incluído algunos temas (http://jkunst.com/highcharts-themes-collection)
highcharter tambien tiene la funcionalidad de obtener fuentes de font.google.com

`ggplot2`

hc_add_theme(hc, hc_theme_ggplot2())

Financial times

hc_add_theme(hc, hc_theme_ft())

Flatdark

hc_add_theme(hc, hc_theme_flatdark())

O modificar/crear un tema

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

Ejemplo de http://jkunst.com/blog/posts/2017-03-03-giving-a-thematic-touch-to-your-interactive-chart/

glimpse(dspills)

## Observations: 86
## Variables: 3
## $ x   <dbl> 0.00000e+00, 3.15569e+10, 6.31138e+10, 9.46707e+10, 1.26228e…
## $ y   <int> 30, 14, 27, 31, 27, 20, 26, 16, 23, 32, 13, 7, 4, 13, 8, 8, …
## $ key <chr> ">700 Tonnes", ">700 Tonnes", ">700 Tonnes", ">700 Tonnes", …

hcspills <- hchart(dspills, "areaspline", hcaes(x, y, group = "key")) %>% 
  hc_plotOptions(series = list(stacking = "normal")) %>% 
  hc_xAxis(type = "datetime") %>% 
  hc_title(text = "Número de derrame de pretróleo en las últimas 4 décadas")

hcspills

hcspills2 <- hcspills %>%
  hc_colors(c("#000000", "#222222")) %>%
  hc_title(align = "left", style = list(color = "black")) %>%
  hc_plotOptions(series = list(marker = list(enabled = FALSE))) %>%
  hc_tooltip(sort = TRUE, table = TRUE) %>%
  hc_legend(align = "right",
            verticalAlign = "top",
            layout = "horizontal") %>%
  hc_credits(enabled = TRUE,
             text = "Data extraída de ITOPF.com",
             href = "http://www.itopf.com/knowledge-resources/data-statistics/statistics/") %>%
  hc_chart(divBackgroundImage = "https://images-na.ssl-images-amazon.com/images/I/71EUEG8orVL._SL1500_.jpg",
           backgroundColor = hex_to_rgba("white", 0.50)) %>%
  hc_xAxis(
    opposite = TRUE,
    gridLineWidth = 0,
    title = list(text = "Time", style = list(color = "black")),
    lineColor = "black",
    tickColor = "black",
    labels = list(style = list(color = "black"))
  ) %>%
  hc_yAxis(
    reversed = TRUE,
    gridLineWidth = 0,
    lineWidth = 1,
    lineColor = "black",
    tickWidth = 1,
    tickLength = 10,
    tickColor = "black",
    title = list(text = "Oil Spills", style = list(color = "black")),
    labels = list(style = list(color = "black"))
  ) %>%
  hc_add_theme(hc_theme_elementary())

Exprésate con tu propio estilo!

via GIPHY

4. Shiny

highcharter y shiny

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

Por que más diseño?

Al principio, todas as aplicaciónes se parecen mucho

Ejemplo de la vida real

Este era un sitio…

Se remodeló y ahora tiene una aplicación shiny

http://www.piaschile.cl/

Y…

Obviamente tenía que compartir el lenguaje de diseño, o estilo
Obviamente se podía :)
http://www.piaschile.cl/mercado/benchmarking-internacional/

5. Tooltips

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)

hc

hc_tooltip(hc, shared = TRUE, sort = TRUE)

Otro ejemplo

Ejemplos de http://jkunst.com/blog/posts/2019-02-04-using-tooltips-in-unexpected-ways/

glimpse(paises)

## Observations: 1,704
## Variables: 6
## $ pais              <fct> Afganistán, Afganistán, Afganistán, Afganistán…
## $ continente        <fct> Asia, Asia, Asia, Asia, Asia, Asia, Asia, Asia…
## $ anio              <int> 1952, 1957, 1962, 1967, 1972, 1977, 1982, 1987…
## $ esperanza_de_vida <dbl> 28.801, 30.332, 31.997, 34.020, 36.088, 38.438…
## $ poblacion         <int> 8425333, 9240934, 10267083, 11537966, 13079460…
## $ pib_per_capita    <dbl> 779.4453, 820.8530, 853.1007, 836.1971, 739.98…

paises2 <- paises %>% 
  filter(max(anio) == anio)

hcpaises <- hchart(
  paises2,
  "point",
  hcaes(pib_per_capita, esperanza_de_vida,  z = poblacion, group = continente)
  ) %>% 
  hc_xAxis(type = "logarithmic")

tooltip_table permite hacer: “tooltip”s como “tablas” ;)

x <- c("pais", "pib_per_capita", "esperanza_de_vida", "poblacion")
y <- str_c("{point.", x, "}")
x <- str_replace_all(x, "_", " ")
tt <- tooltip_table(x, y)

hcpaises <- hcpaises %>% 
  hc_tooltip(pointFormat = tt, useHTML = TRUE, headerFormat = "")

paises3 <- paises %>% 
  select(pais, x = anio, y = esperanza_de_vida) %>% 
  nest(-pais) %>% 
  rename(ttdata = data) %>% 
  mutate(ttdata = map(ttdata, list_parse))
  
paises3

## # A tibble: 142 x 2
##    pais       ttdata     
##    <fct>      <list>     
##  1 Afganistán <list [12]>
##  2 Albania    <list [12]>
##  3 Argelia    <list [12]>
##  4 Angola     <list [12]>
##  5 Argentina  <list [12]>
##  6 Australia  <list [12]>
##  7 Austria    <list [12]>
##  8 Baréin     <list [12]>
##  9 Bangladesh <list [12]>
## 10 Bélgica    <list [12]>
## # … with 132 more rows

tooltip_chart permite…

paises2 <- left_join(paises2, paises3, by = "pais")

ttchart <- tooltip_chart("ttdata", width = 350, height = 250)

hcpaises3 <- hchart(
  paises2, "point",
  hcaes(pib_per_capita, esperanza_de_vida,  z = poblacion, group = continente, name = pais)
  ) %>% 
  hc_tooltip(
    headerFormat = "<b>{point.key}</b>",
    pointFormatter = ttchart, useHTML = TRUE
    ) %>% 
  hc_plotOptions(series = list(maxSize = 30))

# mi torpedo
tooltip_chart -> pointFormatter
tooltip_table -> pointFormat

donutdata <- paises2 %>% 
  group_by(continente) %>% 
  summarise(poblacion = sum(poblacion/1e6)*1e6)

glimpse(donutdata)

## Observations: 5
## Variables: 2
## $ continente <fct> África, Américas, Asia, Europa, Oceanía
## $ poblacion  <dbl> 929539692, 898871184, 3811953827, 586098529, 24549947

donutdata <- paises2 %>% 
  select(continente, x = esperanza_de_vida, y = pib_per_capita) %>% 
  nest(-continente) %>% 
  mutate(data = map(data, list_parse)) %>%
  rename(ttdata = data) %>% 
  left_join(donutdata, by = "continente")

glimpse(donutdata)

## Observations: 5
## Variables: 3
## $ continente <fct> Asia, Europa, África, Américas, Oceanía
## $ ttdata     <list> [[[43.828, 974.5803], [75.635, 29796.05], [64.062, 1…
## $ poblacion  <dbl> 3811953827, 586098529, 929539692, 898871184, 24549947

hc <- hchart(
  donutdata,
  "pie",
  hcaes(name = continente, y = poblacion),
  innerSize = 400
  ) %>% 
  hc_tooltip(
    useHTML = TRUE,
    headerFormat = "<b>{point.key}</b>",
    pointFormatter = tooltip_chart(
      accesor = "ttdata",
      hc_opts = list(
        chart = list(type = "scatter"),
        credits = list(enabled = FALSE),
        plotOptions = list(scatter = list(marker = list(radius = 2)))
        ),
      height = 225
      ),
    positioner = JS(
      "function () {
      
        /* one of the most important parts! */
        xp =  this.chart.chartWidth/2 - this.label.width/2
        yp =  this.chart.chartHeight/2 - this.label.height/2
      
        return { x: xp, y: yp };
      
      }"),
    shadow = FALSE,
    borderWidth = 0,
    backgroundColor = "transparent",
    hideDelay = 1000
    )

Bonus

# remotes::install_github("rladies/meetupr")
library(meetupr) # paquete r-ladies :)

# my ultra secret api key :)
Sys.setenv(MEETUP_KEY = "0415f259076560493e4968452863")

miembros <- get_members("useRchile")

## Downloading 1311 record(s)...

eventos  <- get_events("useRchile", "past")

## Downloading 31 record(s)...

Un poco (?!?!) de cleaning/wrangling

# obtengo fecha incorporacion
miembros <- miembros %>% 
  mutate(
    gp = map(resource, "group_profile"),
    fecha_inc = map_dbl(gp, "created"),
    fecha_inc = as.Date(as.POSIXct(fecha_inc/1000, origin="1970-01-01"))
  )

# vino hoy?
evento_hoy <- get_events("useRchile", "upcoming") %>% 
  pull(id) %>% 
  get_event_rsvps("useRchile", event_id = .) %>% 
  select(id = member_id) %>% 
  mutate(vino_hoy = TRUE)

## Downloading 1 record(s)...Downloading 1 record(s)...

miembros <- left_join(miembros, evento_hoy, by = "id")

miembros <- miembros %>%
  arrange(fecha_inc) %>% 
  mutate(
    photo_link = replace_na(photo_link, "https://www.qualiscare.com/wp-content/uploads/2017/08/default-user-300x300.png"),
    bio = replace_na(bio, ""),
    nacum = 1, nacum = cumsum(nacum),
    vino_hoy = replace_na(vino_hoy, FALSE)
  ) %>% 
  select(id, name, bio, fecha_inc, city, photo_link, nacum, vino_hoy)

urlheart <- "https://static.xx.fbcdn.net/images/emoji.php/v9/f6c/1/16/2764.png"
miembros <- miembros %>% 
  mutate(
    marker = map_if(vino_hoy, vino_hoy, ~ list(enabled = TRUE, symbol = sprintf("url(%s)", urlheart))) 
  )

# memebers
x <-  c("city", "bio")
y <- str_c("{point.", x, "}")
x <- str_replace_all(x, "_", " ")
tt <- tooltip_table(
  # x, y,
  x = NULL, y = NULL,
  img = tags$img(src = "{point.photo_link}", width = "120px"),
  title = "{point.name}"
)

Finalmente

glimpse(miembros)

## Observations: 1,311
## Variables: 9
## $ id         <int> 12312938, 77138632, 9910972, 79685942, 79674872, 8039…
## $ name       <chr> "George G Vega Yon", "Alejandro Zahler", "Joshua", "L…
## $ bio        <chr> "Doing #rstats at USC's Department of Preventive Medi…
## $ fecha_inc  <date> 2013-01-22, 2013-02-06, 2013-02-07, 2013-02-07, 2013…
## $ city       <chr> "Pasadena", "Santiago", "Santiago", "Santiago", "Sant…
## $ photo_link <chr> "https://secure.meetupstatic.com/photos/member/1/4/7/…
## $ nacum      <dbl> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16…
## $ vino_hoy   <lgl> FALSE, FALSE, TRUE, FALSE, FALSE, FALSE, FALSE, TRUE,…
## $ marker     <list> [FALSE, FALSE, [TRUE, "url(https://static.xx.fbcdn.n…

Entonces

hcmeetup <- hchart(miembros, "line", hcaes(fecha_inc, nacum), 
                   lineWidth = 10, color = "white") %>%
  hc_chart(
    backgroundColor = "rgba(255, 255, 255, 0.0)",
    # backgroundColor = "black",
    style = list(color = "white")
    ) %>% 
  hc_navigator(enabled = TRUE, buttonOptions = list(enabled = TRUE)) %>% 
  hc_rangeSelector(
    enabled = TRUE,
    labelStyle = list(display = "none"),
    inputEnabled = FALSE,
    buttons = list(
      list(type = "month", count = 1, text = "mes"),
      list(type = "year", count = 1, text = "año"),
       list(type = "all", text =  "Todo")
    )
    ) %>% 
  hc_tooltip(
    useHTML = TRUE,
    backgroundColor = "transparent",
    borderColor = "transparent",
    shadow = FALSE,
    headerFormat = "",
    shadow = FALSE,
    style = list(fontSize = "1.0em", fontWeight = "normal", color = "white"),
    positioner = JS("function () { return { x: this.chart.plotLeft + 15, y: this.chart.plotTop + 0 }; }"),
    shape = "square",
    pointFormat = tt
  ) %>%
  hc_xAxis(
    type = "datetime",
    minTickInterval = 24 * 3600 * 1000 * 31 * 12,
    pointStart = JS("Date.UTC(2013, 0, 1)"),
    title = list(text = ""),
    labels = list(style = list(fontSize = 20, color = "white")),
    # plotLines = plns
    dateTimeLabelFormats = list(year = "%Y", month = "%Y %b"),
    gridLineWidth = 0,
    lineWidth = 2,
    tickWidth = 2
  ) %>% 
  hc_yAxis(
    title = list(text = ""),
    labels = list(style = list(fontSize = 20, color = "white")),
    gridLineWidth = 0,
    showLastLabel = FALSE,
    opposite = TRUE,
    lineWidth = 2,
    tickWidth = 2
  ) 
hcmeetup

h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1ren 30 minutos o menos…o másJoshua Kunst, @jbkunst, Meetup UseRchile Junio 2019

Antes de partir

Hola! Qué haremos?

Así me sientocuando uso highcharter

Pero la realidad:Donde está la documentación?!?!?

Porquevisualizaciónde dados?

Ejercicio

En el gráfico va n|1u|0e|3s|2t|1r|2o|1 mensaje

h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1r

HighchartsJS & Highcharter

1. hchart

hchart

Importante: datos y paquetes

2. Opciones y Documentación

Opciones y Documentación

3. Flexibilidady Estilo

Flexibilidad

Estilo

ggplot2

Financial times

Flatdark

O modificar/crear un tema

O modificar/crear un tema

4. Shiny

highcharter y shiny

Por que más diseño?

Ejemplo de la vida real

5. Tooltips

Tooltips

Otro ejemplo

Bonus

Un poco (?!?!) de cleaning/wrangling

Finalmente

Entonces

h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1ren 30 minutos o menos…o másJoshua Kunst, @jbkunst, Meetup UseRchile Junio 2019

h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1r
en 30 minutos o menos
…o másJoshua Kunst, @jbkunst, Meetup UseRchile Junio 2019

Así me siento
cuando uso highcharter

Pero la realidad:
Donde está la documentación?!?!?

Porque
visualización
de dados?

En el gráfico va
n|1u|0e|3s|2t|1r|2o|1
mensaje

1. `hchart`

`hchart`

3. Flexibilidad
y Estilo

`ggplot2`

h|1i|0g|3h|2c|1h|2a|1r|3t|2e|1r
en 30 minutos o menos
…o másJoshua Kunst, @jbkunst, Meetup UseRchile Junio 2019