Procedural data visualization within sphere


would anyone have an idea of how to create something similar to the attached image?


there’s a gif here

it’s generated using a really outdated software called Walrus - Graph Visualization Tool. i was wondering if there are ways to do something similar using THREE, i did start something with arrays and lines but was all on x and y axis no spherical spacial spreading like in the image

would be great to get peoples thoughts on an approach or just to discuss how it would be done, i find data visualization like this really inspiring

Do you have the code used to generate that specific gif? I would start by looking at that and seeing if you can translate it to three.js.

1 Like

@looeee no sadly not, that’s just an example from their site, the specifications for compiling data sets for the software look very specific…

  • Only directed graphs are supported .

  • Only connected graphs with reachable nodes are supported.

  • A meaningful spanning tree is required.

  • Only LibSea graph files (a documented CAIDA-developed input format) are supported.

Walrus requires Java3D v1.2.1 (or later) and JDK 1.3.0 (or later). A hardware-accelerated graphics card with OpenGL support is required ( on Windows systems, you must use the OpenGL version of Java3D and not the DirectX version ).

As you can see it’s very old and cryptic, using opengl and java3d.

I have however, found this…

There was also a post on here a few months ago that showed a three js tree shaking visualisation and a three js folder / resources size graph, it was 2D but still very interesting to see a visual layout of folder hierarchy

1 Like

This is not too cryptic, it’s graph theory language. If you Google “directed graph”, “connected graph”, spanning tree" you’ll find definitions for these. They’re all quite simple concepts.

It seems like you’re interested in doing graph visualization, so maybe a good place to start would be to do a short introductory course on graph theory. There are many free courses online.


ok, agreed, i’ll do some reading on this, i wasn’t familiar with the terms thank you @looeee

here’s where i started based on what i imagined to be an array based 2D graph using THREE lines, drawing each lines geometry end positions for each nested arrays length which are randomly generated numbers on loading the page…

Array Tree Graph Example

the line geometry positions are derived from one point of data, the parent array length, drawn on only the x and y axis.

i guess figuring a way of feeding a “directed graph”, “connected graph”, “spanning tree” data set in, to generate line positions from attributes of that data within a localised world space is the direction to go?

1 Like

Nice, it’s looking good. Very clean :+1:

You graph is already a connected graph (no unconnected/orphan points) and a spanning tree (every connected tree graph is a automatically a spanning tree). If you were to put arrows on the lines it would be a directed graph too.

You could try creating a simple JSON file with a tiny graph in it and loading that up. For bigger data sets I would search around and see if there are any standard approaches/formats for storing graph data.


Thank you, it’s very primative at the moment, just my mind trying to make sense of a starting point.

OK, that makes sense now, they are all connected because they are all children of the root node…

I found a pretty good library which does something very interesting…

3D force graph

If you switch the DAG orientation to “radialin” you’ll see something not exact to, but similar to the original gif in question, going to have a look at the framework and see what can be achieved

1 Like


i managed to compile and install a version of Caida Walrus…

it imports .graph file type which i’ve tried to read up on and find examples of but with no luck as of yet…

here’s the .graph file from in the image above…

champagne.graph (448.1 KB)

1 Like

Hi @forerunrun
I see that the question is old, but if you still need, maybe this repo can be for you

@forerunrun – I am attempting to use Walrus, but am stymied by the build process. Could you (are you willing to take the time to) provide details of how you managed to compile and install a version of Caida Walrus? Per the Caida web site, Walrus isn’t supported there any more, but there is a pointer to a GitHub fork by Moderne and that’s what I’ve tried. I tried to use Make to build Walrus, but got a LOT of errors. All that motivated my plea!! Thanks in advance!

Hi @CC1947, as far as I can remember I think I used the quick start quide on this page GitHub - moderneinc/walrus: tool for interactively visualizing large directed graphs in three-dimensional hyperbolic space

The page also outlines the requirements to make it run…

Thanks for the reply!
I followed the same path, but had problems that I suspect are related to java version. (Being the unwarranted optimist that I am, I attempted to go with the most current release!) What version(s) of Java / JDK / JRE do you think you used? I downloaded JDK et al from Oracle’s site; is that the same as “Sun’s JDK”? Did you set any environment variables other than those mentioned in the page / document you mentioned? (E.g., anything java path related.) I don’t work in Java, so please forgive the uninformed questions! Thanks in advance!!

Clayton Curtis

i can’t remember off the top of my head how i got it working, i think i ran in the src folder through cMake, next time i have access to the machine i used i’ll try to run a build to share ( maybe this week sometime )
PS. likewise, i also have no idea about java, it was partly guessing and partly reading ( lots )

EDIT: @CC1947 you can also try this up to date tree graph library implemented with three js depending on your use case…