R Htmlwidgets
13 September 2015

Developing with htmlwidgets for R

Naming

Choose network name according to main d3.layout function, e.g. “cluster”, “chord” etc.

R

Create R script at \R containing the following functions:

  • ...Network: this function calls htmlwidgets to create the HTML
  • ...NetworkOutput: calls shinyWidgetOutput for shiny integration
  • render...Network: calls shinyRenderWidget for shiny integration
  • as.xxxNetwork: convert hclust or dendrogram object into networkD3 list

YAML

Create file with YAML frontmatter at \inst\htmlwidgets. If CSS is required, add a line e.g. style: chordNetwork.css

JS

Create file with JavaScript content for HTMLWidgets.widget() function at \inst\htmlwidgets

initialize
  • create svg using d3.layout.xxx() function
  • replace height and width with diameter
- add scale transformation attribute
resize
currently not working properly - should take height and width parameters to change size of existing svg
renderValue
remove existing children and add values
Datatypes
- list (JSON.parse) - matrix (JSON.parse) - table (d3.csv.parse)

CSS

Create file with css information at \inst\htmlwidgets\lib\css-0

Examples

Cluster Network

## load data
data_list_path <- file.path(system.file(file.path("data", "readme-flare-imports.json"),
                                        package = "networkD3"))
data_list <- rjson::fromJSON(file = data_list_path, simplify = FALSE)

networkD3::clusterNetwork(List = data_list,
                                    height = 700, width = 700,
                                    fontSize = 10,
                                    linkColour = "#ccc",
                                    nodeColour = "#fff",
                                    nodeStroke = "steelblue",
                                    textColour = "#111",
                                    opacity = 0.9,
                                    margin = 0)

Treemap Network

## load data
data_list_path <- file.path(system.file(file.path("data", "readme-flare-imports.json"),
                                        package = "networkD3"))
data_list <- rjson::fromJSON(file = data_list_path, simplify = FALSE)

networkD3::treemapNetwork(List = data_list,
                          height = 400,
                          width = 700,
                          fontSize = 10,
                          linkColour = "#ccc",
                          nodeColour = "#fff",
                          nodeStroke = "steelblue",
                          textColour = "#111",
                          opacity = 0.9,
                          margin = 0)

Chord Network

## load data
data.table <- read.csv(system.file(file.path("data", "cities.csv"),
                                   package = "networkD3"))
data.matrix <- JSONtoMatrix(file = system.file(file.path("data", "matrix.json"),
                                               package = "networkD3"))
rownames(data.matrix) <- NULL
colnames(data.matrix) <- NULL

networkD3::chordNetwork(matrix = data.matrix,
                        digits = 5,
                        df = data.table,
                        height = NULL,
                        width = NULL,
                        fontSize = 10,
                        linkColour = "#ccc",
                        nodeColour = "#fff",
                        nodeStroke = "steelblue",
                        textColour = "#111",
                        opacity = 0.9,
                        margin = 0)

D3.js

React.js

Highcharts

Plotly

JavaScript graphing libraries usually have strong requirements about the JSON structure used to create a plot. In some cases, the R interface needs to know about these requirements in order to faithfully translate R objects to JSON. For example, in plotly.js some attributes must always be an array (e.g. x/y), even if they are length 1, while other attributes cannot be an array must be a literal constant (e.g. name). This leads to a situation where the translation rules from R to JSON cannot be simply “box all vectors of length 1 into an array (or not)”: