htmlrvisnetwork

Making edge labels appear when edge is hovered over or selected in R visNetwork

I have a set of data that I am successfully building networks for with visNetwork in R, but I've hit a stumbling block around edge label behaviour. I'd like to have the html widget that I export using visSave to show edge labels only for edges that are either hovered over, or clicked on. These should then go away when deselected (either by ceasing the hover, or unclicking).

The nodes object is like this:

id <- c('Person A', 'Person B', 'Person C', 'Person D')
label <- c('Person A', 'Person B', 'Person C', 'Person D')
nodes <- data.frame(id, label)

Note that the real network has something like 700 nodes in it with many, many connections, so labelling every edge all the time just becomes a big mess.

The edges object is like this:

from <- c('Person A', 'Person B', 'Person B', 'Person C', 'Person D')
to <- c('Person B', 'Person C', 'Person D', 'Person D', 'Person A')
label <- c('13 May 2023\n15 June 2023', '1 January 2021\n2 February 2022', '2 January 2020\n4 March 2022\n6 March 2023', '4 April 2019\n8 April 2020\n18 August 2021', '6 October 2021')
edges <- data.frame(from, to, label)

Note that the real edge labels can be quite a bit longer and more complex than this, these are just indicative. The line breaks are needed to make the labels readable because the details of the connecting information can consist of multiple factors that would be good to view on the network diagram itself without needing to open a separate spreadsheet.

final_network <- visNetwork(nodes, edges, width = "100%", height = 1600) %>%
    visIgraphLayout() %>%
    visNodes(
      shape = "dot",
      color = list(
        background = "#0085AF",
        border = "#013848",
        highlight = "#FF8000"
      ),
      shadow = list(enabled = TRUE, size = 10)
    ) %>%
    visEdges(
      shadow = FALSE,
      color = list(color = "#0085AF", highlight = "#C62F4B")
    ) %>%
    visLayout(randomSeed = 11)
  visSave(final_network, paste0("Network_Analysis.html"), selfcontained = TRUE, background = "white")

As you can see, once the edge labels are included it becomes a hot mess quite quickly. I'd appreciate any help anyone can offer!

Solution

  • I was able to solve this by adding a 'title' column to the edges object and getting rid of the 'label' column.