R/Javascript: Collapsing and Expanding Networks

Question

. 。 Answers to this question are eligible for a +100 reputation bounty. stats_noob is looking for an : ：

Hello, I am interested in learning about different ways I can attempt to solve this problem in R. In the end: the final output should be a (standalone) HTML file that can be viewed offline. Note: I am NOT looking for an Rshiny option. Thank you so much!

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) 

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:

• I am NOT interested in a shiny web app.
• I would be looking for something like this: D3.js Titles on Collapsible Force-Directed graph , How can I collapse (show and hide) the child nodes of a parent node in d3.js? , Programmatic access of data in d3.js v6 collapsible tree via selectors , R collapsibleTree: add images dynamically in tooltip
• This would be really interesting if it had a search bar and a "zoom out" option: https://search.r-project.org/CRAN/refmans/collapsibleTree/html/collapsibleTreeNetwork.html , https://cran.r-project.org/web/packages/collapsibleTree/readme/README.html , https://adeelk93.github.io/collapsibleTree/

Answer 1

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
            )

• using {r2d3} to provide a custom d3 script which could be the one for collapsible force.networks your datastorm example is probably based on.

Answer 2

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:

Or for example on TeamA: