Antes de começar 1

Todas as traduções são feitas com o google tradutor

Vou falar em portuñolglish

Antes de começar 2

• slides, código e material estão em https://github.com/jbkunst
• Twitter, gmail, github username jbkunst
  
• Muitos dos exemplos são detalhados e comentados na minha blog jkunst.com/blog

, Ola. Eu sou joshua

• Analista em um banco
• co-fundador useRchile meetup
• highcharter creator/developer
• R
• E…

Exercício

Qual gráfico funciona bem com: A região sul mostrou o maior aumento

Opção #1

Opção #2

Opção #3

HighchartsJS & Highcharter

• HighchartsJS é uma biblioteca javascript (como plotly)
• HighchartsJS é uma livraria madura / antiga
• Highcharter é apenas o wrapper de highcharts mais algumas funcionalidades

hchart

• hchart é uma função genérica (semelhante a plot)
• Dependendo da classe do objeto irá gerar um grafo particular
• Interatividade com uma linha de código

Datos

data("diamonds", package = "ggplot2")
glimpse(diamonds)

## Observations: 53,940
## Variables: 10
## $ carat   <dbl> 0.23, 0.21, 0.23, 0.29, 0.31, 0.24, 0.24, 0.26, 0.22, ...
## $ cut     <ord> Ideal, Premium, Good, Premium, Good, Very Good, Very G...
## $ color   <ord> E, E, E, I, J, J, I, H, E, H, J, J, F, J, E, E, I, J, ...
## $ clarity <ord> SI2, SI1, VS1, VS2, SI2, VVS2, VVS1, SI1, VS2, VS1, SI...
## $ depth   <dbl> 61.5, 59.8, 56.9, 62.4, 63.3, 62.8, 62.3, 61.9, 65.1, ...
## $ table   <dbl> 55, 61, 65, 58, 58, 57, 57, 55, 61, 61, 55, 56, 61, 54...
## $ price   <int> 326, 326, 327, 334, 335, 336, 336, 337, 337, 338, 339,...
## $ 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, ...

Variáveis numéricas

hchart(diamonds$price, name = "preco")

Fatores

hchart(diamonds$cut, name = "corte")

Séries temporais

data("AirPassengers")
hchart(AirPassengers, name = "Passengers")

E muito mais:

• Densidades
• Pacotes igraph, survival, quantmod
• Componentes principais
• Mais en http://jkunst.com/highcharter/hchart.html

via GIPHY

Opções y Documentação

• Highcharts (e portanto highcharter) têm muitas opções
• E ter um exemplo para cada parâmetro
• Tudo neste link: 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, D...
## $ city  <chr> "tokyo", "tokyo", "tokyo", "tokyo", "tokyo", "tokyo", "t...
## $ temp  <dbl> 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3,...

Flexibilidade

Highcharts (e portante highcharter) have a lot of type of charts implemented. Os clássicos (pie, column, point), mais:

• streamgraphs
• sankey
• pucketbubbles
• items list
• Miuto mais…Exemplo

Estilo

• Às vezes é importante dar contexto
• Como vimos antes, a flexibilidade dos highcharts é impressionante
  
• Highcharter ajuda você a usar a fonte em https://fonts.google.com/

glimpse(dspills)

## Observations: 86
## Variables: 3
## $ x   <dbl> 0.00000e+00, 3.15569e+10, 6.31138e+10, 9.46707e+10, 1.2622...
## $ 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 derramamentos de óleo nas últimas 4 décadas")

Expressar-se com seu próprio estilo

via GIPHY

highcharter e shiny

• highcharter é um htmlwidget, por isso shiny-ready
• Com a flexibilidade do highchart você pode obter o design que você quer

Por que mais design?

no início, todas as aplicações são semelhantes

Exemplo da vida real

O site foi

O site é agora

http://www.piaschile.cl/

• o site tinha que ter um shiny app
• e deve corresponder ao estilo de design
• http://www.piaschile.cl/mercado/benchmarking-internacional/

Tooltips

• Bom recurso para não saturar um gráfico escondendo informações
• Permite dar detalhes que o usuário decide ver
• (eu gosto dos tooltips)

Exemplo mais real

dabr <- read_excel("data/BasesEstados.xlsx") %>% 
  select(Sigla, Perc_pobres, Expectativa_anos_de_estudo, Populacao,
         PIB, Gini, Agua, Estado, CodigoReg)

glimpse(dabr)

## Observations: 27
## Variables: 9
## $ Sigla                      <chr> "AC", "AL", "AM", "AP", "BA", "CE",...
## $ Perc_pobres                <dbl> 29.46, 34.29, 30.78, 24.07, 28.72, ...
## $ Expectativa_anos_de_estudo <dbl> 8.69, 9.07, 8.54, 9.44, 8.63, 9.82,...
## $ Populacao                  <dbl> 733559, 3120494, 3483985, 669526, 1...
## $ PIB                        <dbl> 9629239, 29544708, 64119836, 104195...
## $ Gini                       <dbl> 0.63, 0.63, 0.65, 0.60, 0.62, 0.61,...
## $ Agua                       <dbl> 86.51, 77.56, 77.32, 91.44, 85.66, ...
## $ Estado                     <chr> "Acre", "Alagoas", "Amazonas", "Ama...
## $ CodigoReg                  <chr> "N", "NE", "N", "N", "NE", "NE", "M...

hcbr <- hchart(dabr, "point", hcaes(Perc_pobres, Expectativa_anos_de_estudo,  z = Populacao, group = CodigoReg))

tooltip_table permite: “tooltip” as “table” ;)

x <- c("Estado", "PIB", "Gini", "Agua")
y <- str_c("{point.", x, "}")
tt <- tooltip_table(x, y)

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

dabt_temporal <- read_excel("data/BasesEstadosSerie.xlsx") %>% 
  select(Sigla, x = ANO, y = PIB_Estadual) %>% 
  nest(-Sigla) %>% 
  rename(ttdata = data) %>% 
  mutate(ttdata = map(ttdata, list_parse))
  
dabt_temporal

## # A tibble: 27 x 2
##    Sigla ttdata     
##    <chr> <list>     
##  1 AC    <list [26]>
##  2 AL    <list [26]>
##  3 AM    <list [26]>
##  4 AP    <list [26]>
##  5 BA    <list [26]>
##  6 CE    <list [26]>
##  7 DF    <list [26]>
##  8 ES    <list [26]>
##  9 GO    <list [26]>
## 10 MA    <list [26]>
## # ... with 17 more rows

tooltip_chart permite…

dabr <- left_join(dabr, dabt_temporal, by = "Sigla")

ttchart <- tooltip_chart("ttdata", hc_opts = list(title = list(text = "point.name")),
                         width = 350, height = 250)

hcbr3 <- hchart(dabr, "point", hcaes(Perc_pobres, Expectativa_anos_de_estudo,  z = Populacao, group = CodigoReg, name = Estado)) %>% 
  hc_tooltip(pointFormatter = ttchart, useHTML = TRUE, headerFormat = "") %>% 
  hc_plotOptions(series = list(maxSize = 30))

tooltip_chart -> pointFormatter
tooltip_table -> pointFormat

Bonus: Mapas

Eu quase esqueci de mostrar mapas

hcbr5 <- hcmap("countries/br/br-all", showInLegend = FALSE, data = dabr, value = "Gini") %>% 
  hc_colorAxis(dataClasses = color_classes(breaks = seq(0.45, 0.65, length.out = 5))) %>% 
  hc_legend(layout = "vertical", align = "right", floating = TRUE, valueDecimals = 2, valueSuffix = "%") 

Estou muito grato

• SER: Luciane, Ariel, Orlando, Steven, …
• Obrigado por ser tão gentil e alegre (e bom para o futebol)