Procedural data visualization within sphere

hello,

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

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…

http://davidpiegza.github.io/Graph-Visualization/index.html

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.

2 Likes

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.

2 Likes

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

Update…

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