The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
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[@]dogado.de.

Introduction to visNetwork

B. Thieurmel - DataStorm

2022-09-29

visNetwork is a R package for network visualization, using vis.js javascript library (https://visjs.org). All the remarks and bugs returns are welcome on github : https://github.com/datastorm-open/visNetwork.

Minimal example

visNetwork needs at least two informations :

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

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

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.

Physics, tooltip, events,

You can also control :

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.
Health stats visible at Monitor.