Visualização de dados é uma das principais tarefas de um analista de dados. A partir de visualizações, é possível explorar os dados e comunicar resultados de maneira mais efetiva. No R, além de visualizações estáticas, principalmente desenvolvidas com ggplot2 R, existem um conjunto de pacotes que são desenvolvidos utilizando o framework fornecido pelo pacote htmlwidgets. A ideia é trazer o mundo de bibliotecas de visualizações de dados em javascript para o R.
Como já mencionado, o htmlwidgets permite a criação de widgets que trazem a interatividade das visualizações em javascript para o R. A partir de pacotes criados com esse framework é possível visualizar os widgets no próprio RStudio, em documentos criados por RMarkdown ou em aplicações criadas em shiny.
Aqui está uma galeria dos widgets disponíveis. Por sinal, já existe um pacote em desenvolvimento para trazer o d3plus para dentro do R. A nossa opção em desenvolver um outro pacote deve-se à nossa expectativa de que talvez a estrutura que resolvemos adotar é mais flexível e conseguirá incorporar mais rapidamente todas as possibilidades do D3plus.
D3plus é uma biblioteca criada em cima de outra chamada D3. Então, vamos começar falando sobre o D3. A biblioteca D3 (Data-Driven Documents) é focada na manipulação de documentos que são baseados em dados, geralmente páginas webs em que se deve apresentar dados de uma maneira eficiente.
Por ser bastante flexível, o aprendizado pode não ser fácil, sendo necessário gastar um certo tempo para aprender a criar as suas próprias visualizações. Nesse sentido, o D3plus busca facilitar a criação de visualizações ao disponibilizar um conjunto de opões de gráficos que já estão pré-construídos.
Assim, basicamente o que se faz é trocar a flexibilidade por facilidade. Todavia, os criadores do D3plus fornecem um tutorial de como criar outras visualizações, o que devolve a flexibilidade novamente para os usuários.
Neste link estão vários exemplos de visualizações que podem ser construídas com o D3plus, inclusive com o código em javascript. Além do próprio site do D3plus, sugiro esses sites:
Bem, agora vamos ao pacote para usar o D3plus no R.
Como o pacote está em desenvolvimento, ele apenas está disponível no github. O código abaixo instala o pacote caso ele ainda não esteja instalado.
if(!require(D3plusR)){
devtools::install_github('paulofelipe/D3plusR')
}A função d3plus é a função principal do pacote. Ela é responsável por inicializar a visualização e nela são passados alguns argumentos que são comuns à maioria das visualizações. Depois de inicializada, outras funções são encadeadas. Por exemplo:
d3plusSize: define a variável/coluna responsável por definir o tamanho do retângulo de um treemap por exemplo, além de outros parâmetros referentes a essa característica do gráfico. .size() no pacote original;d3plusLabel: define a variável/coluna responsável pelos rótulos e outras opções, como o tamanho da fonte. .label() no pacote original.Para quem não conhece o D3plus pode ser um confuso em um primeiro momento, mas talvez com o exemplo abaixo fique mais claro.
De toda forma, as funções do pacote estão intimamente ligadas aos métodos disponíveis na biblioteca original. A lista de métodos e suas opções estão listadas nesta página. Esta página é fundamental, pois é lá que estarão listadas todas opções disponíveis. O importante é você saber como essas opções serão passadas dentro do R.
Algumas opções recebem um único valor, enquanto outras opções possuem opções internas, ou seja, recebem múltiplos valores. Quando uma opção tiver opções internas, os valores devem ser passados por meio de uma lista do R.
Por exemplo, o código original em javascript:
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("bar")
.id("name")
.x("year")
.y("value")
.draw()Agora, no R:
d3plus(data = data,
type = "bar",
id = "name",
elementId = "viz") %>%
d3plusX(value = "year") %>%
d3plusY(value = "value")Veja que para data, type, id e elementid não foram criadas funções separadas, pois todas as visualizações conterão esses métodos. Se o elementId não é informado, um id para o widget será automaticamente gerado.
Agora, vamos estender o exemplo para incluir um título e alterar algumas opções de legenda. A opção de fonte (chamada de key no pacote original) é passada em font que pode receber outras opções (keys), como size, align, weight etc. O código seria o seguinte:
d3plus(data = data,
type = "bar",
id = "name") %>%
d3plusX(value = "year") %>%
d3plusY(value = "value") %>%
d3plusTitle(value = "Título", font = list(size = 12, align = "left")) %>%
d3plusTooltip(font = list(align = "left"))O importante é ter isso em mente, que opções dentro de opções devem ser passadas em listas.
Atualmente, ainda não estão disponíveis funções para todos os métodos do D3plus, mas a ideia é que todos estejam disponíveis em breve. Reforço que esta página é fundamental para encontrar todas as opções disponíveis.
Para o primeiro exemplo, vamos utilizar um conjunto de dados que está disponível pelo próprio pacote. Para carregá-lo, basta usar o código abaixo:
data("trade_bra_chn")
head(trade_bra_chn)
Period Trade.Flow Reporter.Code Reporter Partner.Code Partner
1 2005 Export 76 Brazil 156 China
2 2005 Import 76 Brazil 156 China
3 2006 Export 76 Brazil 156 China
4 2006 Import 76 Brazil 156 China
5 2007 Export 76 Brazil 156 China
6 2007 Import 76 Brazil 156 China
TradeValue
1 6834996980
2 5354519158
3 8402368827
4 7989343057
5 10748813792
6 12617754515Os dados referem-se às exportações/importações brasileiras para/da China para os anos de 2005 a 2015. O nosso objetivo é criar um gráfico de barras. O que é estritamente necessário é informar os dados (data), o identificador (id) e os valores para os eixos X e Y usando as funções d3plusX() e d3plusY(), respectivamente. Outras funções estão sendo utilizadas para adicionar outras funcionalidades ao gráfico.
library(dplyr)
d3plus(data = trade_bra_chn, # dados
id = "Trade.Flow", # identificador das barras
type = "bar", # gráfico de barras
height = 400, # altura da visualização em px
locale = "pt_BR", # definição de localização
width = "100%") %>% # largura de 100%. Não é sempre necessário
d3plusX(value = "Period") %>%
d3plusY(value = "TradeValue") %>%
d3plusColor(value = "Trade.Flow") %>%
d3plusLegend(value = TRUE, size = 30, data = FALSE) %>%
d3plusTooltip(value = c("Period", "TradeValue")) %>%
d3plusTitle(value = "Exportações/Importações Brasileiras para/da China")Perceba que o D3plus automaticamente converte 30.000.000.000 para 30 B. Para alterar esse comportamento, podemos usar o argumento number_text na função d3plus(). O usuário deve informar o texto para mil, milhão, milhões, bilhão e bilhões. Além disso, vamos informar o símbolo da moeda e qual variável é monetária:
d3plus(data = trade_bra_chn, # dados
id = "Trade.Flow", # identificador das barras
type = "bar", # gráfico de barras
height = 400, # altura da visualização em px
locale = "pt_BR", # definição de localização
width = "100%", # largura de 100%. Não é sempre necessário
currency = "US$",
currency_var = "TradeValue",
number_text = c("Mil", "Milhão", "Milhões", "Bilhão", "Bilhões")) %>%
d3plusX(value = "Period") %>%
d3plusY(value = "TradeValue") %>%
d3plusColor(value = "Trade.Flow") %>%
d3plusLegend(value = TRUE, size = 30, data = FALSE) %>%
d3plusTooltip(value = c("Period", "TradeValue")) %>%
d3plusTitle(value = "Exportações/Importações Brasileiras para/da China")No segundo exemplo, vamos criar um Tree Map com os destinos das exportações brasileiras por continente e país (hierarquia) no ano de 2015. A profundidade (d3plusDepth()) inicial escolhida é continente, que é definida pelo valor 0. A cor está definida pela região. Além disso, foi alterado o ordenamento da legenda para apresentar primeiro os continentes de “maior tamanho”.
data("bra_exp_2015") # dados
d3plus(data = bra_exp_2015,
type = "tree_map",
id = c("region", "Partner"),
width = "100%",
height = 400) %>%
d3plusSize(value = "Trade.Value..US..") %>%
d3plusLegend(value = TRUE, order = list(sort = "desc", value = "size")) %>%
d3plusColor("region") %>%
d3plusDepth(0) %>%
d3plusLabels(valign = "top")Neste post, elaboramos uma pequena introdução ao pacote D3plusR. A ideia é evoluir o pacote. Portanto, comentários e críticas são bem-vindos. Também faremos mais posts com mais exemplos, aprofundando um pouco mais a cada publicação. Por exemplo, é possível utilizar uma lista como dicionário para traduzir o nome de uma variável, incluir ícones na legenda, customizar as cores, linkar visualizações, etc.