vis.js | Monstercat visualizer in Javascript and threejs | Data Visualization library

Given a directed graph, where a value is associated with each node, how can we use vis.js to display the nodes ordered according to this value? E.g., all nodes at same depth are displayed left to right from "most valuable" to "least valuable"

I'm having some trouble understanding the behavior of nodes in a vis.js network when the nodes have coordinates specified. In the code below I have made 3 examples where example 1 and example 3 is behaving as expected, but example 2 is behaving unexpectedly.

In example 2, I have specified coordinates to the nodes and that layout is not fixed. The network have physics turned on initially and then when stabilized physics should be turned off.

I expected that the nodes would be placed just like in example 1, but the nodes should be draggable and when dragging then the nodes should behave like in example 3. But it looks like physics is still turned on and the nodes are not placed as in example 1.

I cannot see what I'm doing wrong. Can anyone help?

I'm running nodejs and from an ejs page, I'm trying to send an input value into a Cypher query that will result in a vis.js display of a graph. Note: All javascript actions are taking place on the ejs page, there is no server contact in this case.

I can render the Neo4j graph no problem when running the query without any attempts of adding the input value.

This Works Clicking this button...

I am a rookie both in Neo4j and javascript.

I found out that the javascript Neovis.js can be used with a Neo4j database to render a visualization for queries. This is an excellent tool to develop and embed web applications using Neo4j. However, I soon realized that this has the potential to screw up the entire database since those queries can both read and write the database.

How do we avoid writing into the database when using Neovis.js?

I installed vis.js through npm npm install vis-network

and already require it in my app.js

I am using Jupter notebook on AWS Neptune to query data from the graph. Is it possible to set the colour of nodes with specific label to different colour?

For eg, can I set the node colour to red if the node label is person and set the node colour to blue if the node label is cafe ? The AWS Neptune notebooks are using vis.js but I was not able to find anything related with my need

Any idea on this is greatly appreciated.

Thanks Arun

I've positioned Vis-network within flex sections.

You can see the full code here: https://codepen.io/MadBoyEvo/pen/XWdgzoB (try moving elements down)

The problem is whenever I try to resize the height of the section manually to '1000px' or whatever value the height of the diagram stays the same. When I push height directly to diagram sections resize properly. But this is problematic when I put something on the right side that expands the main section, and the diagram stays put with the default size. I tried to use autosize for vis.js but it doesn't seem to affect anything.

Trying to use vis.js Network library in Salesforce I have tried both in LWC and in an Aura component with api version 40.0 but am receiving regeneratorRuntime is not defined [regeneratorRuntime is not defined] trying to use https://unpkg.com/browse/vis-network@8.1.0/standalone/umd/vis-network.min.js

I am using vis.js to show a network diagram. I need to maintain the "edge length" after dragging a node so I use the physics option. My problem is that the node I drag always bounce back to its original position, which I think is because of these options.