how to optmize/speed up rendering on network

[michelson]

Hi, we are using vis js to render our graphs, fantastic library!

we are rendering graphs with a limit of 170 nodes, as you zoom the graph you get slow rendering when labels start to appear.

we are using edges with labels and physics configured with this settings:

    options =
      nodes:
        shape: 'circle'
        #shape: 'dot'
        size: 16
        font:
          color: "#000"
        scaling:
          max: 10
        color:
          border: 'black'
          background: 'white'
          highlight:
            border: 'black'
            background: '#ccc'
      physics:
        forceAtlas2Based:
          gravitationalConstant: -26
          centralGravity: 0.005
          springLength: 230
          springConstant: 0.18
        maxVelocity: 146
        solver: 'forceAtlas2Based'
        timestep: 0.35
        stabilization: iterations: 150

is there some fine tuning you would recommend me in order to speed up the rendering ?

you can see a live example at: http://vadb.org/people/miguel-michelson-martinez/graph

let me know if you need more information

best

[LLTommy]

Hi there!
How do you define 'slow rendering'? I ask this, because if I click on your example, I feel like it is doing ok.

However, if you want to speed up things (and I think that is where the problem lies) ... if you zoom in and out while the graph is still rearranging itself (e.g. after dragging some nodes around), there is just a lot to do for your browser. An easy solution is to show the network once it's done with rearranging (So first show a loading bar and only display the network once everything is in place). It helped me a lot to speed up things.

This can be done and I can point you into the right direction, however I don't know if you are happy with that solution of if you like the dynamic movement at the start up :)

[michelson]

Hi @LLTommy, sure! please give me some pointers to implement that and see how it works
if I wait for nodes to rearrange it could take a long time too right ? I guess the rearranging will depend on how is physics configured right ?
I'm looking for the most efficient physics configuration to speed up things

[LLTommy]

No, the loading does not really take a lot of time. It saves computational power I think because you separate the two steps (1 physic calculation, 2 display and render the network).... if you don't separate it, your script in parallel calculates the physics (It's a force model, so every edge and node influences the others!) and display/animate the network.

Anyway, check out this official vis example for a loading bar: http://visjs.org/examples/network/exampleApplications/loadingBar.html - if you have problems come back here, I might be able to help because I implemented my own loading spinner in my project.

Cheers.

[michelson]

thanks @LLTommy ! , I will check that, I hope it improve performance

[wimrijnders]

Closed due to inactivity. Feel free to reopen if this is still relevant.