hpcc-systems/Visualization

Grouping HPCC Graph nodes on left and right sides

Opened this issue · 7 comments

kouedelo commented

We need a graph visualization where similar nodes can be grouped on either sides of a root node.

For example: consider a scenario where we want to show a visualization for different transactions performed by a customer over a certain period of time. Let's say we have two types of transactions: debits and credits. Transactions will be grouped based on these transaction types resulting in two groups of transactions. Each resulting transaction group will then be grouped based on their merchant categories. This means that, in the group of debit transactions for example, we can have a group of transactions made on merchants who belong to the "Groceries" category, we can have another group of transactions made on merchants who fall into the "Bars and Nightclubs" category, e.t.c. At the end of the day we can have data in the following format:

{
  "credits": [
    {
      "merchant_category_code": "Unknown",
      "merchant_category": "Unknown",
      "total_transactions": 6,
      "total_amount": 127.27,
      "icon": ""
    }
  ],
  "debits": [
    {
      "merchant_category_code": "5411",
      "merchant_category": "Grocery Stores, Supermarkets",
      "total_transactions": 1,
      "total_amount": 65.45,
      "icon": "storefront"
    },
    {
      "merchant_category_code": "5813",
      "merchant_category": "Bars, Cocktail Lounges, Discotheques, Nightclubs And Taverns Drinking Places (Alcoholic Beverages)",
      "total_transactions": 1,
      "total_amount": 32.72,
      "icon": "store"
    }
  ]
}

If we take a look at the "debits" property of this object, we can see that it is an array containing a list of objects. Each object in the array is a result of grouping debit transactions by merchant categories. Each object in the array will be rendered as a node in the HPCC graph.

By using the HPCC Graph2 react component, we want to achieve the desired ouput as shown in the image below:

strataseer_transactions-for-ticket

The goal is to have all nodes considered as debit transactions to be on one side of the root node and all other nodes considered as credit transactions to be on the other side of the root node. In this case, the root node represents the account from which these transactions were performed. From the picture above, the nodes representing debit transactions are on the right and all have a red color meanwhile the nodes representing credit transactions are on the left and have a green color.

GordonSmith commented

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?
kouedelo commented
  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.
  • 👍1
waterkey15 commented

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 commented

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 commented

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 commented

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