vasturiano / 3d-force-graph-vr

3D force-directed graph component in VR
https://vasturiano.github.io/3d-force-graph-vr/example/large-graph/
MIT License
214 stars 51 forks source link

Upper limit on node & link counts? #13

Closed pfernandez closed 5 years ago

pfernandez commented 5 years ago

Hey there, I'm considering on using this to visualize large networks of 100k+ links. How does this vis handle large datasets?

I've been able to sort-of pull this off with the d3v3 force graph by precomputing positions and using css transitions rather than re-rendering every frame, but it's glitchy with more than about 5000 links. I was thinking of rewriting the UI to use Canvas/WebGL, and it looks like you've been down the same path already and produced the 2d canvas version. Curious about your experience with that, and your thoughts on using canvas for 3D and VR.

Thanks. I know this isn't really an "issue" but I don't see how else to send a message. Maybe hit me on twitter @paul4nandez if desired. :)

vasturiano commented 5 years ago

@pfernandez canvas/webgl will always do better compared to SVG with more nodes/links, because the DOM doesn't get overloaded. But with that high volume of 100k+ elements it's still going to be problematic to maintain a decent frame rate. I've tested those boundaries in this example: https://bl.ocks.org/vasturiano/34e0ac2ad391e33ad5dde43ec7ce3d40

That particular example has 5962 nodes and 68114 links.

One thing you can do to help it, is to dry-run the force layout engine, and only plot the final position of the nodes/links. You can control that with the warmupTicks and cooldownTicks props.

pfernandez commented 5 years ago

Fantastic, that's exactly what I needed to see.

I already do the dry-run approach on both initial load and drag. I'm also providing filters that users can apply to reduce the dataset, so I might just require that they reduce it below a certain number before interaction is allowed.

One possibility is that I grey out the VR switch until after they've reduced the number of elements below, say, 5 or 10,000. Or I could simply provide a hidden config option to turn it on it for certain situations, like when using curated datasets at trade shows.

Thanks @vasturiano. Beautiful set of libraries you've put together.