Which tool is appropriate for interactive, editable, linked directed graphs?

[julianstanley]

Hello!

This summer, I'm working on building a shiny app for the gfpop package.

A big part of the application should consist of two linked plots.

I'm having trouble choosing a good approach to creating one of those plots, so I'm posting here hoping for some wisdom/help/advice!

Problem statement

I'm trying to make an interactive plot of a directed graph. Nodes just have labels, but edges contain quite a bit of information (1 string and 6 numeric values).

Here's an example of a static version of that graph:

(And each edge has additional, not-shown parameters. Source: [2002.03646] gfpop: an R Package for Univariate Graph-Constrained Change-Point Detection)

The kicker is that the plot needs to have two big features:

1. It should be entirely editable. So, users can add new nodes and new edges and edit existing nodes/edges. After the user edits the graph, they can click a button and re-run the main analysis.
2. It should have crosstalk/linked brushing with the other plot.
   a. The other plot is just a scatterplot with overlain bars. Each bar corresponds to one of the nodes in the directed graph. I'll almost certainly make this with plotly. Looks like this:
   .
   Each red bar corresponds to a node/edge. So, hovering over one of those red bars should highlight the corresponding node/edge.

I haven't found any framework that supports both of these features, but here's what I've considered:

Considered solutions

(More info in this issue in my repo)

1. visNetwork

This is probably the most reasonable solution right now. But there are a couple of barriers. One is that the package doesn't, by default, allow for edges to have big lists of parameters--that may be reasonably fixed, so I submitted an issue. The other is that I don't think there's any way to link a visNetwork plot with the plotly plot since it doesn't support crosstalk.

2. plotly

Using plotly would be fantastic since it can crosstalk with my other plotly visualization really easily. And shinyDAG seems to have successfully produced an editable directed graph with plotly, but it doesn't seem nearly as seamless and straightforward as visNetwork. But, it would be really great if I’m wrong about that and it is doable!

3. Base d3

I’ve also considered trying to write exactly what I need in D3, building on this example, but it would be great if there’s an easier solution/existing tool. But if there’s not, please let me know!

[pieterjanvc]

Hi,

Thanks for the nice detailed explanation of the issue you're facing. It helps a lot.
I think that visNetwork indeed might be the way to go for now. Here are a few of my thoughts/suggestions:

• I agree that it would be nice to have many extra edge parameters, but I've worked around this using Shiny: If you select an edge, Shiny can capture its ID, and you can use that to filter a dataframe containing all additional information. The filtered dataframe can then be displayed as a table underneath the plot (or wherever) or the information can be put into a HTML text-based format and shown like that. You could even make a modal window pop-up if you like, through I think, if you expect the user to click a lot, it's better to have the info appear on the page.
• Another option is to set the label of the plot to be a sting, where you concatenated all info that an edge has. This way, the sting will pop-up when you hover or click an edge. This would not be very elegant if there is a lot of text, or symbols.
• You can link to the plotly by capturing the selected edge's Id, and then again use that info to filter the info for plotly. This would indeed mean you have to do it through the server, but using the plotly proxy, I should not be too much of a delay I think.

Hope this helps,
PJ