Besides the various shapes, it’s also possible to use images and icons for nodes.

Images

  • To use images in nodes, you first have to set shape to image or circularImage.
  • Then, set the relative or absolute path on image value
  • An option is available in case of wrong path : brokenImage
  • And you can use borders with shapeProperties and useBorderWithImage
path_to_images <- "https://raw.githubusercontent.com/datastorm-open/datastorm-open.github.io/master/visNetwork/data/img/indonesia/"
 
nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    image = paste0(path_to_images, 1:4, ".png"),
                    label = "I'm an image")
  
edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)

fontAwesome icons

visNetwork supports fontAwesome icons. Font-awesome is not part of default dependencies, but you can use addFontAwesome() if needed.

  • To use icons in nodes, you first have to set shape to icon.
  • icon options must be a list, so you have to use visNodes or visGroups, or pass directly in nodes data.frame(see Ionicons example below)
  • Choose the icon by the code, set size and color
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")) %>%
  addFontAwesome()

Ionicons

Ionicons icons support. For dependencies, you can use addIonicons() if needed. Definition process is the same as fontAwesome icons, except you have to set face = 'Ionicons'.

nodes <- data.frame(id = 1:3, shape = "icon", icon.face = 'Ionicons',
                    icon.code = c("f101", "f100", "f101"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges) %>%
  addIonicons()

© 2020-2021 DataStorm

Fork me on GitHub