Grouping HPCC Graph nodes on left and right sides about visualization

[kouedelo]

1. The data we generated is a "graph" which has two sides; left and right side. Each side may have none to multiple nodes.
2. Unfortunatley, the proposed solution wouldn't be usable for us since the data is not a tree.

[GordonSmith]

I have looked into this and there is a relatively easy way to add additional forces to influence which side they end up on.
Questions:

1. Is your data genuinely a "graph" or is it a "tree"?
2. If it is a tree, would adapting https://raw.githack.com/hpcc-systems/Visualization/trunk/demos/gallery/gallery.html?./samples/tree/Dendrogram to allow left AND right branches be a better viz?

[GordonSmith]

Note to self: https://github.com/d3/d3-force/blob/main/README.md#positioning

[waterkey15]

yes this positioning function is something that may be useful for us! @GordonSmith would you mind sending us a very simple example code where you position a node to a desired location? Maybe push node B to all the way right and push node A to all the way left? If you could update the code snippet below that would be super helpful for us.

import { Graph2 } from "@hpcc-js/graph";

const data = {
    vertices: [
        {id: 0,text: "A",categoryID: 0},
        {id: 1,text: "B",categoryID: 0},
        {id: 2,text: "C",categoryID: 1},
    ]
};
data.edges = [
    {id: 0,source: data.vertices[2],target: data.vertices[0]},
    {id: 1,source: data.vertices[2],target: data.vertices[1]}
];
new Graph2()
    .categories([
        {id:0,imageChar:"fa-user"},
        {id:1,imageChar:"fa-asterisk"}
    ])
    .data(data)
    .target("target")
    .layout("ForceDirected")
    .applyScaleOnLayout(true)
    .highlightSelectedPathToCentroid(true)
    .enableTooltipPointerEvents(false)
    .render()
    ;

[waterkey15]

hi @GordonSmith would it be possible for you to provide us a simple example using positioning logic you mentioned in your previous comment? Thank you very much!

[GordonSmith]

My previous comments was referencing information needed to implement the feature - rather than it existing...

The following code is where the current force is initialised: https://github.com/hpcc-systems/Visualization/blob/trunk/packages/graph/src/graph2/layouts/forceDirected.ts#L43-L68

I think we would need 3 simulations - center, left and right and then filter the vertices appropriately into each of the 3 sims?

[waterkey15]

yes that sounds correct! please let me know if there are any updates or any code snippets that I can use! Thank you very much!
@GordonSmith