Face Coloring for Cluster Visualization

[pitwegner]

Is your feature request related to a problem? Please describe.
I want to visualize clusters by coloring the space between the nodes that belong to that cluster.

Describe the solution you'd like
I want to provide an array of node arrays that represent the different clusters, potentially but not necessarily overlapping. Then the space inbetween these nodes should be colored using distinct colors (basically color the faces between edges/links between the nodes, the convex hull).

My call would look like that:

const Graph = ForceGraph3D()(document.getElementById("3d-graph"));
Graph.resetProps();
Graph.cooldownTicks(200)
        .nodeLabel('name')
        .enableClusterVisualization(true)
        .jsonUrl('some-data.json')

with the json in the form of:

{
    "nodes": [
        {
            "id": "id1",
            "name": "name1",
            "val": 1
        },
        {
            "id": "id2",
            "name": "name2",
            "val": 10
        },
        (...)
    ],
    "links": [
        {
            "source": "id1",
            "target": "id2"
        },
        (...)
    ],
    "clusters": [
        ["id1", "id2"],
        ["id3", "id4"],
        (...)
    ]
}

Describe alternatives you've considered
Just coloring the nodes is not enough (e.g. for overlapping clusters).

[pitwegner]

I'd implement it myself, if you could give me a hint where to start :)
Or is there maybe an accessor for the graphScene and node positions that I could extend the functionality in my own application?
Doesn't look too hard in Three: https://threejs.org/docs/#examples/en/geometries/ConvexGeometry

[vasturiano]

@pitwegner thanks for reaching out. This is a good idea, but I'd recommend doing this outside of this library to not bloat the functionality.

If you're using three-forcegraph you are in control of the scene where the graph is placed, so you can add any additional elements that you wish. If using 3d-force-graph, you can access the scene object with myGraph.scene(). Here's an example where the scene gets extended.

As for the node objects, you can always access the data itself, and look for the x, y and z attributes in each of the nodes, representing their current coordinates.

This should give you enough leverage to compute the convex hull of your node clusters and render additional Three objects that represent their geometries.

Let me know if you get it to work. 👍

[pitwegner]

That's what I figured also :) Got it to work with your hint to retrieve the objects from the scene. Yet I do have an occlusion problem of the nodes now. Even though my convex hull has an opacity of only 0.1, the nodes vanish behind some faces for some angles (see attached example).

[vasturiano]

@pitwegner very nice!
And I've seen some of those rendering issues before. Could it be that you're not rendering both sides of the material? https://threejs.org/docs/#api/en/materials/Material.side

I would like to understand why this occurs, so do let me know if you get to the bottom of it.

Also, would you consider contributing a node cluster example to 3d-force-graph?

[pitwegner]

That was my first impression as well, but rendering both sides didn‘t change anything related to disappearing nodes.

Oh, surely I can open a pull request to include my example :) Then you can also have a look at the occlusion culling :D