Introduction

More and more visualization tools are available with R :

• growing use of Javascript libraries in packages since a few years (rCharts, googleVis, …)
• amazing shiny and shiny server tools
• htmlwidgets, a new ‘best-seller’ R package for Javascript data visualization in the next years ?
  • facilitate Javascript visualization libraries integration
  • use in R console, or with RStudio viewer, embed widgets in R Markdown documents and Shiny web applications, and save in .html file
  • already a lot of children !
    • leaflet : creating dynamic maps
    • dygraphs : time-series
    • DT : interactive HTML tables
    • threejs : 3D scatterplot and 3D globe
    • rpivotTable : data exploration, drag’n’drop functionality
    • networkD3 : network and sankey diagrams using D3.js
    • …

visNetwork

visNetwork is a R package for network visualization, using vis.js javascript library

• easy to use
• custom shapes, styles, colors, sizes, …
• works smooth on any modern browser for up to a few thousand nodes and edges
• interactivity controls (zoom, physics, movement of nodes, tooltip)

Based on htmlwidgets, so :

• compatible with shiny, R Markdown documents, RStudio viewer, R

Actually only available on DataKnowledge github

# for install visNetwork
devtools::install_github("dataknowledge/visNetwork")

Minimal example

visNetwork needs at least two informations :

• a nodes data.frame, with id column
• a edges data.frame, with from and to columns

nodes <- data.frame(id = 1:3)
edges <- data.frame(from = c(1,2), to = c(1,3))
visNetwork(nodes = nodes, edges = edges)

Simple individual nodes customization

• Adding more variables on nodes data.frame. See visNodes for available options.
  

nodes <- data.frame(id = 1:10, 
                    label = paste("Node", 1:10),                                 # add labels on nodes
                    group = c("GrA", "GrB"),                                     # add groups on nodes 
                    value = 1:10,                                                # size adding value
                    shape = c("square", "triangle", "box", "circle", "dot", "star",
                    "ellipse", "database", "text", "diamond"),                   # control shape of nodes
                    title = paste0("<p><b>", 1:10,"</b><br>Node !</p>"),         # tooltip (html or character)
                    color = c("darkred", "grey", "orange", "darkblue", "purple"),# color
                    shadow = c(FALSE, TRUE, FALSE, TRUE, TRUE))                  # shadow

##   id  label group value    shape                     title    color shadow
## 1  1 Node 1   GrA     1   square <p><b>1</b><br>Node !</p>  darkred  FALSE
## 2  2 Node 2   GrB     2 triangle <p><b>2</b><br>Node !</p>     grey   TRUE
## 3  3 Node 3   GrA     3      box <p><b>3</b><br>Node !</p>   orange  FALSE
## 4  4 Node 4   GrB     4   circle <p><b>4</b><br>Node !</p> darkblue   TRUE
## 5  5 Node 5   GrA     5      dot <p><b>5</b><br>Node !</p>   purple   TRUE
## 6  6 Node 6   GrB     6     star <p><b>6</b><br>Node !</p>  darkred  FALSE

• Numerous additional options are available(background/border/highlight color, position, font, scaling, level, …)

Simple individual edges customization

• Adding more variables on edges data.frame. See visEdges for available options.
  

edges <- data.frame(from = sample(1:10,8), to = sample(1:10, 8),
                    label = paste("Edge", 1:8),                                 # add labels on edges
                    length = c(100,500),                                        # length
                    arrows = c("to", "from", "middle", "middle;to"),            # arrows
                    dashes = c(TRUE, FALSE),                                    # dashes
                    title = paste("Edge", 1:8),                                 # tooltip (html or character)
                    smooth = c(FALSE, TRUE),                                    # smooth
                    shadow = c(FALSE, TRUE, FALSE, TRUE))                       # shadow

##   from to  label length    arrows dashes  title smooth shadow
## 1    7  6 Edge 1    100        to   TRUE Edge 1  FALSE  FALSE
## 2    8  7 Edge 2    500      from  FALSE Edge 2   TRUE   TRUE
## 3    6  1 Edge 3    100    middle   TRUE Edge 3  FALSE  FALSE
## 4    3  8 Edge 4    500 middle;to  FALSE Edge 4   TRUE   TRUE
## 5    5  9 Edge 5    100        to   TRUE Edge 5  FALSE  FALSE
## 6    2  3 Edge 6    500      from  FALSE Edge 6   TRUE   TRUE

• Numerous additional options are available(background/border/highlight color, font, scaling, …)

Global nodes/edges configuration

• Set global options for nodes and edges using visNodes and visEdges, and use options per group using visGroups.
  

nodes <- data.frame(id = 1:5, group = c(rep("A", 2), rep("B", 3)))
edges <- data.frame(from = c(2,5,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges) %>% 
  visNodes(shape = "square") %>%                        # square for all nodes
  visEdges(arrow ="to") %>%                             # arrow "to" for all edges
  visGroups(groupname = "A", color = "darkblue") %>%    # darkblue for group "A"
  visGroups(groupname = "B", color = "red")             # red for group "B"

Global Options

Some global options are available in visOptions :

• Highlight nearest (highlightNearest) nodes and edges clicking on a node, or selecting with a list (nodesIdSelection)

visNetwork(nodes, edges) %>% visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE)

• Data Manipulation (manipulation), and add a legend (legend)

visNetwork(nodes, edges, legend = TRUE) %>% visOptions(manipulation = TRUE)

Layout configuration

• Layout (hierarchical or not) can be set with visLayout or visHierarchicalLayout (more parameters) :

visNetwork(nodes, edges) %>% visEdges(arrow = "to") %>% 
  visHierarchicalLayout() # same as   visLayout(hierarchical = TRUE)

Control interaction

You can control interaction with visInteraction :

• enable/disable dragging nodes/network (dragNodes, dragView)
• hide nodes/edges when dragging (hideEdgesOnDrag, hideNodesOnDrag)
• enable/disable zoom (zoomView)
• control hover colors (hover, hoverSelectedEdges)
• use keyboard shortcut manipulation (keyboard)
• enable multiselection (multiselect)
• use navigation buttons (navigationButtons)
• enable/disable selection (selectable)
• control edges highlighting (selectConnectedEdges)
• control tooltip delay (tooltipDelay)

• Example : Relations between the characters of “Les miserables”

visNetwork(nodes, edges) %>% visInteraction(dragNodes = FALSE, hideEdgesOnDrag = TRUE, hover = TRUE) %>%
  visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE)

And also

• Physics options are available on visPhysics (solver and stabilization controls)
• Use of javascript event with visEvents
• help for network configuration with visConfigure
• some first clustering functions… (visClusteringByColor, visClusteringByGroup)
• Using on shiny (renderVisNetwork, visNetworkOutput), with additional features

#  using nodesIdSelection, you can access to current id of selected node with a new input
output$mynetwork <- renderVisNetwork({
  visNetwork(nodes, edges)%>%
  ... %>%visOptions(nodesIdSelection = TRUE)
}) 
# created input$mynetwork_selected, with id of current selected node

• related project : DependenciesGraphs, an R package for dependencies visualization between packages and functions, available on DataKnowledge github (https://github.com/DataKnowledge)

• DependenciesGraphs example : plyr functions dependencies

dep <- envirDependencies("package:plyr")
plot(dep)

• Clustering and event example

visNetwork(nodes, edges) %>% visClusteringByGroup(groups = c("A","B")) %>%
  visEvents(zoom = "function(properties) {alert('zoom scale : ' + properties.scale);}")

Next Steps

• Improve clustering for R users
• Add tools/support for igraph/arules/… objects
• Develop shiny features
• Write more documentation
• CRAN submission…