The hardware and bandwidth for this mirror is donated by METANET, the Webhosting and Full Service-Cloud Provider.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]metanet.ch.

Introduction to visNetwork

B. Thieurmel - DataStorm

2022-09-29

Minimal example

visNetwork needs at least two informations :

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

require(visNetwork, quietly = TRUE)
# minimal example
nodes <- data.frame(id = 1:3)
edges <- data.frame(from = c(1,2), to = c(1,3))
visNetwork(nodes, edges, width = "100%")

Find help

Besides the help R functions, a vignette is available, and you can access and read the full javascript API :

# javascript api
visDocumentation()
vignette("Introduction-to-visNetwork") # with CRAN version
# shiny examples
shiny::runApp(system.file("shiny", package = "visNetwork"))

Or visit our online documentation : http://datastorm-open.github.io/visNetwork/.

Simple individual nodes and edges 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

head(nodes)

##   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

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
head(edges)

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

visNetwork(nodes, edges, width = "100%")

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, width = "100%") %>% 
  visNodes(shape = "square") %>%                        # square for all nodes
  visEdges(arrows ="to") %>%                            # arrow "to" for all edges
  visGroups(groupname = "A", color = "darkblue") %>%    # darkblue for group "A"
  visGroups(groupname = "B", color = "red")             # red for group "B"

Network configuration

Configuration options are available in visOptions, visInteraction, visLayout, visHierarchicalLayout, visPhysics :

Example Data

nb <- 10
nodes <- data.frame(id = 1:nb, label = paste("Label", 1:nb),
 group = sample(LETTERS[1:3], nb, replace = TRUE), value = 1:nb,
 title = paste0("<p>", 1:nb,"<br>Tooltip !</p>"), stringsAsFactors = FALSE)

edges <- data.frame(from = trunc(runif(nb)*(nb-1))+1,
 to = trunc(runif(nb)*(nb-1))+1,
 value = rnorm(nb, 10), label = paste("Edge", 1:nb),
 title = paste0("<p>", 1:nb,"<br>Edge Tooltip !</p>"))

Add legend

It’s possible to add more custom legend on nodes / edges ! Default on groups (like in previous versions) :

visNetwork(nodes, edges, width = "100%") %>% visLegend()

Or passing data :

visNetwork(nodes, edges, width = "100%") %>% 
  visLegend(useGroups = FALSE, addNodes = data.frame(label = "Nodes", shape = "circle"), 
            addEdges = data.frame(label = "link", color = "black"))

Highlight nearest

You can highlight nearest nodes and edges clicking on a node with highlightNearest option :

visNetwork(nodes, edges, width = "100%") %>% 
  visOptions(highlightNearest = TRUE)

It’s now possible to control the degree of depth (visNetwork >= 0.1.2) :

visNetwork(nodes, edges, width = "100%") %>% 
  visOptions(highlightNearest = list(enabled =TRUE, degree = 2))

Select by node id

You can also select nodes by id/label with a list with nodesIdSelection :

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

Select by a column

And select some nodes by the values of a column using selectedBy option :

# can be the column you want
nodes$sel <- sample(c("sel1", "sel2"), nrow(nodes), replace = TRUE)
visNetwork(nodes, edges, width = "100%") %>%
 visOptions(selectedBy = "sel")

Directed Network

visNetwork(nodes, edges, width = "100%") %>% 
  visEdges(arrows = 'from')

Custom navigation

vis.js propose some navigation tools :

visNetwork(nodes, edges, width = "100%") %>% 
  visInteraction(navigationButtons = TRUE)

Data Manipulation

And some data manipulation tools :

visNetwork(nodes, edges, width = "100%") %>% 
  visOptions(manipulation = TRUE)

Hierarchical Layout

You can use and control hierarchical layout with visHierarchicalLayout and visLayout :

nodes <- data.frame(id = 1:7)

edges <- data.frame(
  from = c(1,2,2,2,3,3),
  to = c(2,3,4,5,6,7)
)

visNetwork(nodes, edges, width = "100%") %>% 
  visEdges(arrows = "from") %>% 
  visHierarchicalLayout()

# same as   visLayout(hierarchical = TRUE) 

visNetwork(nodes, edges, width = "100%") %>% 
  visEdges(arrows = "from") %>% 
  visHierarchicalLayout(direction = "LR")

Freeze network

visNetwork(nodes, edges, width = "100%") %>% 
  visInteraction(dragNodes = FALSE, dragView = FALSE, zoomView = FALSE)

Additional features

Use font awesome icons in your network

You can use Font Awesome icons using groups or nodes options. Font Awesome library (https://fontawesome.com/) is not part of default dependencies. use addFontAwesome() if needed.

# don't run here
nodes <- data.frame(id = 1:3, group = c("B", "A", "B"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges, width = "100%") %>%
  visGroups(groupname = "A", shape = "icon", icon = list(code = "f0c0", size = 75)) %>%
  visGroups(groupname = "B", shape = "icon", icon = list(code = "f007", color = "red")) %>%
  visLegend() %>%
  addFontAwesome()

Visualize rpart object

New visTree function allows to visualize and customize a rpart classification and regression tree. Have a look to visTreeEditor to edity and get back network, or to visTreeModuleServer to use custom tree module in R.

library(rpart)
# Complex tree
data("solder")
res <- rpart(Opening~., data = solder, control = rpart.control(cp = 0.00005))
visTree(res, height = "800px", nodesPopSize = TRUE, minNodeSize = 10, maxNodeSize = 30)

Use in Shiny

With visNetworkOutput and renderVisNetwork. Using with shiny, and enabled options nodesIdSelection, you can access to new input with current selection value. Morevoer, you can do a lot of things with visNetworkProxy

output$mynetwork <- renderVisNetwork({... visOptions(nodesIdSelection = TRUE)}) # created input$mynetwork_selected

And with selectedBy, new input input$mynetwork_selectedBy.

Export

network <- visNetwork(nodes, edges, width = "100%")
visSave(network, file = "network.html")

Use DOT language data

visNetwork(dot = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }', width = "100%")

Use gephi json export file

# don't run here
visNetwork(gephi = 'WorldCup2014.json')

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.