Neste primeiro exemplo, iremos replicar o exemplo disponibilizado pelo desenvolvedores do pacote neste link.
O código original é o seguinte:
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var data = [
{"year": 1991, "name":"alpha", "value": 15},
{"year": 1991, "name":"beta", "value": 10},
{"year": 1991, "name":"gamma", "value": 5},
{"year": 1991, "name":"delta", "value": 50},
{"year": 1992, "name":"alpha", "value": 20},
{"year": 1992, "name":"beta", "value": 10},
{"year": 1992, "name":"gamma", "value": 10},
{"year": 1992, "name":"delta", "value": 43},
{"year": 1993, "name":"alpha", "value": 30},
{"year": 1993, "name":"beta", "value": 40},
{"year": 1993, "name":"gamma", "value": 20},
{"year": 1993, "name":"delta", "value": 17},
{"year": 1994, "name":"alpha", "value": 60},
{"year": 1994, "name":"beta", "value": 60},
{"year": 1994, "name":"gamma", "value": 25},
{"year": 1994, "name":"delta", "value": 32}
]
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("bar")
.id("name")
.x("year")
.y("value")
.draw()
</script>O nosso interesse é na parte que está dentro da tag <script>. Perceba que foi criar um objeto chamado data que é um array de objetos. Esses objetos têm as seguintes chaves (keys) year,name e value com seus respectivos valores (values). Assim, vamos criar a estrutura de dados no R que após ser convertida irar gerar um objeto igual ao criado acima:
data <- data.frame(year = c(1991, 1991, 1991, 1991, 1992, 1992, 1992, 1992, 1993,
1993, 1993, 1993, 1994, 1994, 1994, 1994),
name = c("alpha", "beta", "gamma", "delta", "alpha", "beta",
"gamma", "delta", "alpha", "beta", "gamma", "delta",
"alpha", "beta", "gamma", "delta"),
value = c(15, 10, 5, 50, 20, 10, 10, 43, 30, 40, 20, 17,
60, 60, 25, 32))Não precisamos nos preocupar com o jsonlite agora, pois o pacote D3plusR é faz essa conversão.
A segunda parte do código (visualization) cria a visualização. Cada método é representado por um método (.metodo()). Ou seja, .data() refere-se ao método de dados, .type() controla o tipo de gráfico, .size() controla opções refente a codificação visual de tamanho etc. De maneira geral, o pacote D3plusR fornece uma função para cada método desse. Por exemplo, o método .size() é utilizado a partir da função d3plusSize().
Vale ressaltar que alguns métodos mais comuns e que não usam muitas opções já estão disponíveis na função d3plus(), que é a função utilizada para inicializar a visualização. Por exemplo, ao invés de usar d3plusData(), pode-se passar diretamente o data.frame no argumento data. O mesmo vale para type e id. A função também fornece uma funcionalidades extras que serão descritas mais a frente, como a possibilidade de uso de um dicionário e definição de características de moeda.
library(D3plusR)
library(jsonlite)
library(dplyr)
d3plus(data = data,
type = "bar",
id = "name",
height = 500,
width = "100%") %>%
d3plusX("year") %>%
d3plusY("value")O id é um pouco específico do pacote. Ele serve de identificador de cada ponto. No caso da visualização acima, cada name é um identificador daquele ponto. No exemplo acima, name poderia ser o nome de um país. A variável value é usada para definir o valor de y de cada barra e year informa o valor de x. O entendimento do id fica mais claro com os demais exemplos.
Veja também a lógica de encadeamento com o %>% que replica uma estrutura similar ao código original.
Para finalizar esse capítulo, vamos apenas incluir um título:
d3plus(data = data,
type = "bar",
id = "name",
height = 500,
width = "100%") %>%
d3plusX("year") %>%
d3plusY("value") %>%
d3plusTitle(value = "Minha primeira visualização com D3plusR",
sub = "Um simples gráfico de barras",
font = list(size = 22, weight = 900))O importante aqui é perceber que:
d3plusY("value"), é o equivalente a d3plusY(value = "value")d3plusY(value = "value")d3plusTitle(value = "Título", sub = "Subtítulo")d3plusTitle(value = "Minha primeira visualização com D3plusR",
sub = "Um simples gráfico de barras",
font = list(size = 22, weight = 900))