In paulofelipe/D3plusR: Create D3plus visualizations

About D3plus

D3plus is a javascript library build on top of D3.js. The idea of D3plusR package is supply a R interface to this (D3plus) javascript library. The original package has several methods. Almost every method will be available in a R function. However, some of them are grouped in a specific function: d3plus() To know about those methods see this page.

Below we see an example in the original javascript library:

var visualization = d3plus.viz()
    .container("#viz")
    .data(data)
    .type("bar")
    .id("name")
    .x("year")
    .y("value")
    .draw()

In this R package the code above is translated in this way:

d3plus(data = data,
       type = "bar",
       id = "name") %>% 
  d3plusX(value = "year") %>% 
  d3plusY(value = "value")

Options

To see all available options, see this page.

Example:

D3plus:

.axes({"ticks": false,
       "background": {"color": "#FFFFFF",
                      "stroke": {"width": 0}}})

D3plusR:

d3plusAxes(ticks = FALSE,
           background = list(color = "#FFFFFF",
                             stroke = list(width = 0)))

If a method key (option) can receive other keys (options), this must be supplied as list.

Bar Chart

The data for first example comes from the Comtrade API. By default, the D3plus library adds the symbol % to variables named share. To include this symbol in other variables use the percent_var argument. To add methods to the chart, use the %>% operator.

It is important to notice that the icons only show up when the htmlwidgets are in a Rmarkdown document, saved widget or in a shiny app.

library(D3plusR)
library(dplyr)
library(jsonlite)
data("trade_bra_chn")

# Fake shares
trade_bra_chn <- trade_bra_chn %>% 
  mutate(share = sample(100, nrow(trade_bra_chn), replace = TRUE))

dictionary <- list(TradeValue = "Trade Value", Period = "Year",
                   share = "Share")

attributes <- list(Trade.Flow = data.frame(Trade.Flow = c("Export", "Import"),
                             icon = c("exp.png",
                                      "imp.png"),
                             hex = c("#344969", "#992234")))

d3plus(data = trade_bra_chn, id = "Trade.Flow",
       type = "bar",
       dictionary = dictionary,
       height = 400,
       width = "100%") %>% 
  d3plusX(value = "Period") %>% 
  d3plusY(value = "TradeValue") %>% 
  d3plusLegend(value = TRUE, size = 30, data = FALSE) %>% 
  d3plusTooltip(value = c("Period", "TradeValue", "share")) %>% 
  d3plusAttrs(value = attributes) %>% 
  d3plusColor(value = "hex") %>% 
  d3plusIcon(value = "icon", style = "knockout") %>% 
  d3plusTitle("Brazilian Exports and Imports to/from China")

Line chart

The example below uses type = "line" and adds the d3plusTime() function (.time() method).

data("bra_inflation")
# Date variables must have this format
bra_inflation$Date <- format(bra_inflation$Date, "%Y/%m/%d")
# dates to be passed in solo argument
date_filter <- bra_inflation$Date[bra_inflation$Date > "2013/01/01"]


d3plus(data = bra_inflation, id = "country",
       type = "line",
       percent_var = "Rate",
       height = 400,
       width = "100%") %>% 
  d3plusX(value = "Date", grid = FALSE) %>% 
  d3plusY(value = "Rate") %>% 
  d3plusTime(value = "Date", solo = date_filter) %>% 
  d3plusTooltip(value = "Date") %>% 
  d3plusTitle("Brazilian Inflation (IPCA)")

Treemap

data("bra_exp_2015")
d3plus(data = bra_exp_2015,
       type = "tree_map",
       id = c("region", "Partner"),
       width = "100%",
       height = 500) %>% 
  d3plusSize(value = "Trade.Value..US..") %>% 
  d3plusLegend(value = TRUE, order = list(sort = "desc", value = "size")) %>% 
  d3plusColor("region") %>% 
  d3plusDepth(0) %>% 
  d3plusLabels(value = TRUE, valign = "top") %>% 
  d3plusUi(value = list(list(method = "color",
                             value = list(list(Region = "region"), list(Value = "Trade.Value..US.."))),
                        list(method = "depth", type = "drop",
                             value = list(list(Continent = 0), list(Country = 1)))))

Geo Map

mapa <- system.file("extdata", "countries.topojson", package = "D3plusR")
mapa <- jsonlite::fromJSON(mapa, simplifyVector = F)

d3 <- d3plus(data = bra_exp_2015,
       type = "geo_map",
       id = "Partner.ISO",
       width = "100%",
       height = 500) %>% 
  d3plusCoords(mapa, projection = "equirectangular") %>% 
  d3plusColor(value = "Trade.Value..US..") %>% 
  d3plusTooltip(value = c("Trade.Value..US..", "Partner.ISO")) %>% 
  d3plusLabels(FALSE) %>% 
  d3plusText("Partner") %>% 
  d3plusTitle("Brazilian Exports Destinations") %>% 
  d3plusZoom(value = TRUE, scroll = FALSE) 

d3

A Simple Network

Example from D3plus.

First, we need to create three dataframes:

library(jsonlite)
sample_data <- fromJSON('[
    {"name": "alpha", "size": 10},
    {"name": "beta", "size": 12},
    {"name": "gamma", "size": 30},
    {"name": "delta", "size": 26},
    {"name": "epsilon", "size": 12},
    {"name": "zeta", "size": 26},
    {"name": "theta", "size": 11},
    {"name": "eta", "size": 24}
  ]')

positions <- fromJSON('[
    {"name": "alpha", "x": 10, "y": 15},
    {"name": "beta", "x": 12, "y": 24},
    {"name": "gamma", "x": 16, "y": 18},
    {"name": "delta", "x": 26, "y": 21},
    {"name": "epsilon", "x": 13, "y": 4},
    {"name": "zeta", "x": 31, "y": 13},
    {"name": "theta", "x": 19, "y": 8},
    {"name": "eta", "x": 24, "y": 11}
  ]')

connections <- fromJSON('[
    {"source": "alpha", "target": "beta"},
    {"source": "alpha", "target": "gamma"},
    {"source": "beta", "target": "delta"},
    {"source": "beta", "target": "epsilon"},
    {"source": "zeta", "target": "gamma"},
    {"source": "theta", "target": "gamma"},
    {"source": "eta", "target": "gamma"}
  ]')

Then, we can create the visualization:

d3plus(data = sample_data, type = "network", id = "name",
       width = "100%",
       height = "400px") %>% 
  d3plusNodes(positions) %>% 
  d3plusEdges(value = connections, arrows = TRUE) %>% 
  d3plusSize("size")

Sankey

data("arg_exp_imp_2015")

d3plus(type = "sankey", id = "id", height = 500, width = "100%") %>% 
  d3plusNodes(value = nodes) %>% 
  d3plusEdges(value = edges %>% filter(Trade_Value > 1e9), strength = "Trade_Value") %>% 
  d3plusFocus(tooltip = FALSE, value = "Argentina") %>% 
  d3plusAttrs(nodes) %>% 
  d3plusLegend(FALSE) %>% 
  d3plusSize(100) %>% 
  d3plusTitle("Argentina - Imports and Exports Origins/Destinations") %>% 
  d3plusTooltip("Trade_Value") %>% 
  d3plusColor("color")

Communicating widgets

library(D3plusR)
library(WDI)
library(dplyr)
library(htmlwidgets)

gdp_per_capita <- WDI(country = 'all', indicator = "NY.GDP.PCAP.KD",
                      start = 1980, end = 2015, extra = TRUE)

d3plus(data = gdp_per_capita %>% filter(year == 2015),
       type = "geo_map", id = "iso3c",
       currency = "US$",
       currency_var = "NY.GDP.PCAP.KD",
       elementId = "chart1",
       width = "100%",
       height = 500) %>% 
  d3plusCoords('countries.topojson', projection = "equirectangular") %>% 
  d3plusColor("NY.GDP.PCAP.KD") %>% 
  d3plusTitle("GDP per capita (constant 2000 US$) - 2015") %>% 
  d3plusLabels(FALSE) %>% 
  d3plusText("country")

d3plus(data = gdp_per_capita,
       type = "bar", id = "iso3c",
       currency = "US$",
       currency_var = "NY.GDP.PCAP.KD",
       elementId = "chart2",
       width = "100%",
       height = 300) %>% 
  d3plusX("year") %>% 
  d3plusY("NY.GDP.PCAP.KD") %>% 
  d3plusId(solo = "USA") %>% 
  d3plusTitle("GDP per capita (constant 2000 US$): United States") %>% 
  d3plusColor("region", scale = "category10")


onStaticRenderComplete('
                       var chart1 = HTMLWidgets.find("#chart1").viz;
                       var chart2 = HTMLWidgets.find("#chart2").viz;

                       chart1
                       .mouse({"click": function(d){
                        chart2
                        .id({"solo": [d.iso3c]})
                        .title("GDP per capita (constant 2000 US$): " + d.properties.name)
                        .draw();
                       }})')

library(D3plusR)
library(WDI)
library(dplyr)
library(htmlwidgets)

gdp_per_capita <- WDI(country = 'all', indicator = "NY.GDP.PCAP.KD",
                      start = 1980, end = 2015, extra = TRUE)

d3plus(data = gdp_per_capita %>% filter(year == 2015),
       type = "geo_map", id = "iso3c",
       currency = "US$",
       currency_var = "NY.GDP.PCAP.KD",
       elementId = "chart1",
       width = "100%",
       height = 500) %>% 
  d3plusCoords('countries.topojson', projection = "equirectangular") %>% 
  d3plusColor("NY.GDP.PCAP.KD") %>% 
  d3plusTitle("GDP per capita (constant 2000 US$) - 2015") %>% 
  d3plusLabels(FALSE) %>% 
  d3plusText("country")

d3plus(data = gdp_per_capita,
       type = "bar",
       currency = "US$",
       currency_var = "NY.GDP.PCAP.KD",
       elementId = "chart2",
       width = "100%",
       height = 300) %>% 
  d3plusX("year") %>% 
  d3plusY("NY.GDP.PCAP.KD") %>% 
  d3plusId(value = "iso3c", solo = "USA") %>% 
  d3plusTitle("GDP per capita (constant 2000 US$): United States") %>% 
  d3plusColor("region", scale = "category10")


onStaticRenderComplete('
                       var chart1 = HTMLWidgets.find("#chart1").viz;
                       var chart2 = HTMLWidgets.find("#chart2").viz;

                       chart1
                       .mouse({"click": function(d){
                        chart2
                        .id({"solo": [d.iso3c]})
                        .title("GDP per capita (constant 2000 US$): " + d.properties.name)
                        .draw();
                       }})')