Tips on working with large number of nodes

[PrzemyslawKlys]

I know this isn't support forum but I guess this should be useful for some people. Can you guys share some tips on working with large number of nodes connected to 1 or more nodes?

I wanted to generate diagram of a network where there are 3 nodes connected to each other then there are 100-300 nodes connected to each one of them and it looks like a total mess and the algorithm that is responsible for doing layout basically says go away ;-)

This network could not be positioned by this version of the improved layout algorithm. Please disable improvedLayout for better performance.

[Thomaash]

Hi @PrzemyslawKlys,

I'm sorry but I don't actually understand the layouting stuff and the people who created it are no longer active here.

Could you maybe provide an MWE I could fiddle with to see if there's something I can improve or recommend?

[PrzemyslawKlys]

Here is a basic sample:

• https://codepen.io/MadBoyEvo/pen/yLLrLVQ

I generate this with PowerShell, but basically it's just a few connections to each connections.

Import-Module PSWriteHTML -Force

New-HTML -TitleText 'My Ubiquiti Network' -UseCssLinks:$true -UseJavaScriptLinks:$true -FilePath $PSScriptRoot\Example-LargeDiagram.html {
    New-HTMLSection -HeaderText 'Diagram - My Network' -CanCollapse {
        New-HTMLDiagram -Height '1000px' {
            #New-DiagramOptionsInteraction -Hover $true
            #New-DiagramOptionsManipulation
            #New-DiagramOptionsPhysics
            #New-DiagramOptionsLayout -RandomSeed 500

            New-DiagramNode -Label 'Forest'
            New-DiagramNode -Label 'Domain1'
            New-DiagramNode -Label 'Domain2'
            New-DiagramNode -Label 'Domain3'

            New-DiagramLink -From 'Forest' -To 'Domain1'
            New-DiagramLink -From 'Domain1' -To 'Domain2'
            New-DiagramLink -From 'Domain2' -To 'Domain3'
            New-DiagramLink -From 'Forest' -To 'Domain3'
            New-DiagramLink -From 'Forest' -To 'Domain2'

            for ($i = 0; $i -lt 300; $i++) {
                New-DiagramNode -Label "Connection1$i" -To 'Domain1'
            }
            for ($i = 0; $i -lt 300; $i++) {
                New-DiagramNode -Label "Connection2$i" -To 'Domain2'
            }
            for ($i = 0; $i -lt 300; $i++) {
                New-DiagramNode -Label "Connection3$i" -To 'Domain3'
            }
        }
    }
} -ShowHTML

[PrzemyslawKlys]

The goal would be to have this easily visible so I can explore nodes, see how they are connected. If i would be to start connecting some nodes between each other it would be even bigger mess that is invisible

[Thomaash]

Barnes Hut

The physics have some sane defaults for networks with small neighborhoods (most common use case). The bigger the neighborhood the more force (negative gravity) you need to space them out:

const options = {
  physics: {
    enabled: true,
    barnesHut: {
      gravitationalConstant: -50000 // This is the default * 25.
    },
    stabilization: {
      enabled: false // This is here just to see what's going on from the very beginning.
    }
  }
};

However, even though it's better, it still doesn't seem to work properly as they are moving indefinitely or maybe it takes really long time to come to a halt and I'm just too impatient. Tweaking the physics further may help but I didn't find any way how to solve it.

Force Atlas 2

Much faster and generally a better result except that the three central nodes end up oscillating at max velocity:

const options = {
  physics: {
    enabled: true,
    solver: "forceAtlas2Based",
    stabilization: {
      enabled: false // This is here just to see what's going on from the very beginning.
    }
  }
};

Conclusion

I have no solution for this. Tweaking the physics brings considerable improvements but no solution. You can fiddle with it some more and maybe you'll manage to get something working.

[Triet]

cytoscape has pretty good algorithms for layouts and much faster from what I've been testing. I've been using them to calculate my node positions and visjs to render. Its a little more work since you need to create 2 graphs but you can just wrap both framework within an API.

[PrzemyslawKlys]

@Triet I don't think I can work with two API's. I generate my code in PowerShell. This means I have no ability to "join" both API's on JS level as I have no clue what will happen in JS. I simply try to build "JS/HTML/CSS" from PowerShell on a text level. My JS knowledge is close to 0. All I do is see paterns in JS/HTML/CSS and simply build "text" with PowerShell and it seems to work :-)