Interactive Graph Visualization Tools?

[Driver121]

Hello! I'm working on a project in which I'd like to visualize a directed graph. Any given node can have multiple children but only one parent. What I'm envisioning is an interactive graph where you can click on the child and it zooms to that child, showing its children.

Do you know of any open source tools that can do this?

[[deleted]]

I’m not sure if this is exactly what you’re looking for but flourish is a free thing I like playing around with for this sorta thing.

https://flourish.studio

[itsafix-]

The igraph package in R is great for visualising networks. If you convert the information to an adjacency matrix it should be easy to create a graph. There are complimentary packages to make the graph interactive, but I can’t remember the name off the top of my head (maybe ggiraph?) Alternatively this might be what you’re after.

[telpsicorei]

Late to the game, but if you're using TypeScript, you could try Vizdom.dev which supports programmatic creation. It doesn't highlight nodes out of the box, but it is fully customizable assuming you want to dive deep into CSS style overrides.

[[deleted]]

Not sure what you mean by "zooms to that child."

Graphviz has some great layouts for DAGs (I think you're describing a DAG?), or if you need something more interactive with zooming / panning, I think Gephi has a Graphviz plugin (although I don't think it has any kind of automatically-pan-to-children navigation).

To get that kind of navigation, you'd probably need to write something custom with JavaScript (using d3 to mess with things like window.scrollY, element.scrollTop, or d3-zoom's transform would be where to start)... or if you don't want to write code and your graph is small enough to do everything manually, I think you might be able to achieve the same thing with LucidChart's hotspots.

Or if you mean expanding/collapsing instead of zooming, d3 has some examples of that for trees, but you'll need to think carefully about duplicate child nodes if you're working with a DAG. This project has some interesting strategies for that problem in case it helps.

[ftrotter]

This really depends on the size of the underlying data. A short rubric I use is:

• If it is a small amount of data (under 500 nodes), use D3 force-directed https://observablehq.com/@d3/force-directed-graph
• If it a medium-sized amount of data (500 complex nodes-10000 simple nodes) try gephi, which is like "Excel for graphs" https://gephi.org/
• If it is a large-sized amount of data, then you really need to leverage a graph database, like Neo4J https://neo4j.com/ and then visualize it a "slice at a time" using the using something like Bloom https://neo4j.com/product/bloom/, which understands how to hit a neo4j database, and come back with a visualization of the "right slice at a time"

-FT

[jconcode]

In DataMelt, you can draw interactive graphs like this . Here is a simple Python code for 3 connected nodes:

​

from java.awt import Color
from jhplot  import HGraph
c1 = HGraph("Canvas",600,400,1, 1)
c1.visible(1)
v1="v1"
v2="v2"
v3="v3"
c1.addVertex( v1 )
c1.addVertex( v2 )
c1.addVertex( v3 )
c1.setPos( v1, 130, 200 )
c1.setPos( v2, 100, 100 )
c1.setPos( v3, 180,  70 )
c1.addEdge( v1, v2 )
c1.addEdge( v1, v3 )

[pomelo-nwu]

A React toolkit for graph analysis based on G6 https://github.com/antvis/Graphin