3D interactive graph

[fabiospampinato]

I've been playing with this tool a bit, and IMHO 2D graphs are good for tiny things, but I have thousands of nodes and edges in mine, I can't possibly explore a 2D graph like that, in order to be able to still read text I have to zoom in so much that only a tiny portion of the 2D graph is visible at any given time, meaning that seeing where all the arrows go it's basically impossible, you can't chase an arrow to the other side of the graph and than go back, and if you can't chase arrows you might as well just explore an ASCII tree of a codebase rather than its graph.

In my opinion the solution is kind of drastic and probably time consuming to implement, and that would be generating 3D graphs, that would give an extra dimension for arrows to find their path more quickly, and also it would unlock the possibility of exploring the graph using a VR headset, something like that could be amazing. With a VR headset I can use my entire field of view for seeing the graph, with the 2D one unless I move like just 1cm away from the screen I can't use nearly as much of my field of view for the graph.

Without a 3D graph or having a screen as big as a wall I don't have a use for a 2D graph that's impossible to explore effectively.

Also the graph should be interactive, if you can't drag stuff around, highlight some nodes, hide some others etc. then the whole thing is of limited usefulness.

Having a custom renderer like that would also fix another problem I have, I can't even generate the graph for my entire repo with graphviz because it crashes for some reason, having a built-in renderer that works would be great for that too and it would make the tool much easier to use.

It might be possible to build something like this on top of Three.js, here's a nice library using it.

Does this sound reasonable? I understand something like this is probably not going to get implemented, but in my opinion that would unlock a lot of value no other existing tool can unlock yet, to the best of my knowledge.

[sverweij]

Hi @fabiospampinato thanks for this suggestion. Large scale visualisation will remain a challenge and I'm always on the lookout to improve it.

I've found that on large repos the ability to abstract to a higher level to be valuable - see e.g. the high level graphs of react and yarn. It'd be nice if they'd be interactive, though, so clicking a node would open up a next level. This holds both for 2D and 3D graphs. That said, 3D graphs might prove useful, although making them truly usable will require some work.

Demo: 3D graphs with dependency-cruiser ...

Generating a 3D graph isn't that hard. Here's a rough reporter plugin that uses the library you linked to. I've put up the 3d-reporter-plugin.js and examples on gh-pages: Demo: 3D graph reporter plugin for dependency-cruiser.

As you can see the real challenge with 3D graphs is to make them usable. What I notice (not only with this framework b.t.w):

• how to identify a module (or a dependency)?
  labeling all nodes with e.g. their file name works, but looks very cluttered. Nodes with show on hover look better, but it's harder to identify what is where.

• how to get a feel of where you are?
  in the 2D version this is sort-of solved by drawing rectangles around folders - and by using colors. The linked 3D sample graphs uses colors as well, but it's not that effective. Interactivity (fold/ unfold) might be helpful.

• how to navigate to a known spot?

It'll be interesting to play around with the options the frameworks out there have to address these issues - and 3d-force-graph looks like a nice candidate.

[fabiospampinato]

Making it useful enough would be difficult, but perhaps it's still worth exploring how to do that, I'd personally love to have something decent like that.

how to identify a module (or a dependency)?

Hovering over every node is a non starter, IMHO every node should be labeled but the label should be rendered in a sensible way, like far away labels should be smaller and less visible, and close-up nodes should probably be readable and nodes should be far apart enough that there isn't too much overlap between all the rendered elements.

Links can carry information via color or they could also have labels written next to them potentially.

how to get a feel of where you are?

I think subtrees could have their nodes or links colored in a similar way, that way all files under "ui" would be blue for instance while all files under "hook" could be light blue or something. It shouldn't be hard for one to orientate himself, especially when using a VR headset.

Similarly to how folders are represented as ~squares in 2D I think they should just be represented as translucent cubes in 3D. And in 3D it should be much easier to see many of these clusters at a glance because they have another dimension to expand into, in 2D a single rectangle containing many files can take up the entire screen, in 3D that would take up much less space by moving items in another dimension and the whole thing can be made smaller by rendering it further away from the camera initially.

how to navigate to a known spot?

There could just be a search bar that pops up, you search for something, it gives you a list of nodes, you click on a node and the camera moves to that node. Or something like that.

[fabiospampinato]

BTW I had forgotten about that but that guy who made 3d-force-graph also has a version of it that should work in VR: https://github.com/vasturiano/3d-force-graph-vr

[sverweij]

For those who like to play with the quick first stab at a 3d reporter mentioned above - it's now packaged with dependency-cruiser as dependency-cruiser/sample-3d-reporter-plugin. Usage:

npx dependency-cruiser src \
  --include-only ^src \
  --output-type plugin:dependency-cruiser/sample-3d-reporter-plugin \
  --output-to 3d-dependency-graph.html

Source code on here

[bcomnes]

Sorry for the extra noise, but Incredible! Runs great!