How to gather nodes based on group in VisJS?

Question

I'm pretty new to VisJS and attempting to visualize computer usage data. Over the past 2 months, I've collected data on how long I spend in each application on my computer in a chronological pattern. I want to create a VisJS network where each node is time spent in an application, the nodes are grouped by application, and the edges connect each node to the application I was using prior and the application I used next.

I've formatted all of my data, created a network from it, but the network always shows up in a ring. I want the different nodes to be arranged by their group - all of the "Chrome" nodes are by other "Chrome" nodes, etc.

Here's the code I'm using:

var container = document.getElementById('mynetwork');

var data = {
    nodes: nodes, //about 9,000 nodes
    edges: edges //about 9,000 edges
};
var options = {nodes: {
    shape: 'dot',
    scaling: {
      min: 0,
      max: 1
    }
  },layout: {improvedLayout: false}, physics:{enabled: true},edges: {
    color:{inherit:true},
    width: 0.15,
    smooth: {
      type: 'continuous'
    }
  },};


var network = new vis.Network(container, data, options);

Pretty basic, but the actual result is a mess because I have over 9,000 individual nodes. The actual result looks like this:

https://i.ibb.co/gm6d1R7/Screen-Shot-2019-04-08-at-11-23-03-AM.png

I want it to look more like the VisJS example here:

https://visjs.github.io/vis-network/examples/network/edgeStyles/smoothWorldCup.html

The thing is, as far as I can tell, I'm using the same options as this visualization - they've just gone in and manually placed each node with coordinates, which I really can't do with 9,000 nodes. Is there a way to do this automatically without placing each node individually?

Prothalamion

The 2nd link goes to a 404 error? (which is exactly why links are frowned upon here, as they tend to get stale) – Aquitaine

Not sure if I'll ever get an answer to this, since it's been almost 5 years, but - how are your coordinates placed / calculated now? Are they randomly assigned? You could: 1) divide your canvas into as many areas as you have groups, 2) and then establish bounding coordinates for each of the groups, 3) subdivide that particular area based on how many nodes there are in that specific group, 4) assign individual node coordinates for each group member. Or you can decide on the size of an area of a specific node group based on how many nodes it has - making it a weighted area. You would also need-> – Hug

-> to have a consistent way of assigning coordinates, to avoid random scattering in their designated area on subsequent page loads. Also, using some sort of a boundary buffer (a padding if you will), to avoid nodes of one group / area being too close to those of another group / area. – Hug