rvisnetwork

Display visnetwork magnified and in whole space of a shiny app


I create a large network inside a shiny app but I dont like that is not displayed by default in the whole space and it looks very small. How can i make it be displayed in bigger width and height to make the nodes be easily seen? Now everything is too small.

library(shiny)
library(dplyr)
library(visNetwork)
# Define UI
ui <- fluidPage(
  visNetworkOutput("net")
)

# Define server logic
server <- function(input, output, session) {
output$net<-renderVisNetwork({
  # Original nodes data frame
  nodes <- data.frame(
    id = 1:7,
    label = c("BLADDER", "TRODELVY", "EV", "NO ADC RECEIVED", "EV", "NO ADC RECEIVED", "TRODELVY "),
    color = c("gray", "red", "blue", "gray", "blue", "gray", "red"),
    shape = "box",
    level = c(1, 2, 2, 3, 3, 3, 3)
  )
  
  # Generate new nodes
  new_node_ids <- 8:27
  new_node_labels <- paste("NODE", new_node_ids)
  new_nodes <- data.frame(
    id = new_node_ids,
    label = new_node_labels,
    color = "yellow",
    shape = "box",
    level = 4
  )
  
  # Combine the nodes data frames
  nodes <- rbind(nodes, new_nodes)
  
  # Original edges data frame
  edges <- data.frame(
    from = c(1, 1, 2, 2, 3, 3),
    to = c(2, 3, 4, 5, 6, 7)
  )
  
  # Add new edges
  new_edges <- data.frame(
    from = rep(4:7, each = 5),
    to = new_node_ids
  )
  
  # Combine the edges data frames
  edges <- rbind(edges, new_edges)
  
  # Create the network visualization
  visNetwork(nodes, edges, width = "100%", height = "800px") %>%
    visNodes(shape = "square", size = 500, font = list(color = "white")) %>%
    visOptions(highlightNearest = TRUE, nodesIdSelection = F) %>%
    visHierarchicalLayout(levelSeparation = 300, nodeSpacing = 200, direction = "LR")
})
  
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Solution

  • In order to increase the size of your network graph, define the width and height arguments inside visNetworkOutput() like so:

    visNetworkOutput("net",width = 1100,height = 650)
    

    enter image description here

    Adjust those parameters as you please to get exactly what you want. I hope this helps!