CODEWITHSUNDEEP
javascriptrgraphigraph
stats_noob
stats_noob

Reputation: 5907

R/Javascript: Collapsing and Expanding Networks

I am working with the R programming language.

I have the following graph network data:

library(igraph)
library(visNetwork)

from <- c("Boss", "TeamA", "TeamA", "TeamA", "SubteamA1", "SubteamA1", "SubteamA1", "SubteamA2", "SubteamA2", "SubteamA2", "SubteamA3", "SubteamA3", "SubteamA3")
to <- c("TeamA", "SubteamA1", "SubteamA2", "SubteamA3", "employee1", "employee2", "employee3", "employee4", "employee5", "employee6", "employee7", "employee8", "employee9")
a1 = data_frame <- data.frame(from, to)


from <- c("Boss", "TeamB", "TeamB", "TeamB", "SubteamB1", "SubteamB1", "SubteamB1", "SubteamB2", "SubteamB2", "SubteamB2", "SubteamB3", "SubteamB3", "SubteamB3")
to <- c("TeamB", "SubteamB1", "SubteamB2", "SubteamB3", "employee10", "employee11", "employee12", "employee13", "employee14", "employee15", "employee16", "employee17", "employee18")
a2 = data_frame <- data.frame(from, to)


final = rbind(a1, a2)

I then made it into a graph network and visualized it:

# Convert the data frame to an igraph object
g <- graph_from_data_frame(final, directed=FALSE)

# Plot the graph
plot(g)

# Optional visualization
visIgraph(g)

visIgraph(g) %>%
  visHierarchicalLayout(direction = "LR") %>%
  visInteraction(navigation = "zoom") %>%
  visInteraction(navigation = "drag") %>%
  visOptions(selectedBy = "to", 
             highlightNearest = TRUE, 
             nodesIdSelection = TRUE)

enter image description here

My Question: I have been trying to find if there some way such that when you run the graph, it only shows one node on the screen (boss node) - and when you click on the boss node, it expands into 3 nodes (boss, team a, team b), and if you click on "team a", it expands into sub teams ... but if you double click, it collapse back to the previous layer.

The closest thing I could find to this is here: https://github.com/datastorm-open/visNetwork/issues/307

But is there some easier way to do this in R/javascript? In the end, the final output should be a (standalone) HTML file that can be viewed offline.

Thanks!

Note:

Upvotes: 5

Views: 552

Answers (2)

Quinten
Quinten

Reputation: 41337

An option could be using visOptions with the collapse argument:

: Custom option. Just a Boolean, or a named list. Collapse / Uncollapse nodes using double-click. In dev.

So this makes it possible to collapse when double-clicking on a node. You could change the shape to give it a different shape when it is collapsed. Here is some reproducible code:

library(igraph)
library(visNetwork)

visIgraph(g) %>%
  visInteraction(navigation = "zoom") %>%
  visInteraction(navigation = "drag") %>%
  visOptions(collapse = list(enabled = TRUE, keepCoord = TRUE, clusterOptions = list(shape = "circle")))

Created on 2023-01-30 with reprex v2.0.2

When clicking on your boss node:

enter image description here

Or for example on TeamA:

enter image description here

  1. Is it possible to remove the "cluster" label on each node?

You could add label = FALSE like this:

visIgraph(g) %>%
  visInteraction(navigation = "zoom") %>%
  visInteraction(navigation = "drag") %>%
  visOptions(collapse = list(enabled = TRUE, keepCoord = TRUE, clusterOptions = list(shape = "circle", label = FALSE)))

Example on TeamB:

enter image description here

Upvotes: 2

I_O
I_O

Reputation: 6911

You might try

  • install the chart layout feature from github:
devtools::install_github("timelyportfolio/networkD3@feature/d3.chart.layout")

which makes some layouts of {networkD3} collapsible (see this SO post). Example:

## devtools::install_github("timelyportfolio/networkD3@feature/d3.chart.layout")
library(networkD3)

hc <- hclust(dist(USArrests), "ave")

hierNetwork(as.treeNetwork(hc), 
            type = 'cluster.cartesian', 
            zoomable = TRUE,
            collapsible = TRUE
            )

Upvotes: 1

Related Questions