How to implement the same layout for many graphs?

[l1x]

Hi,

I was wondering what is the right way of implementing the same layout for many graphs. I would like to physics engine disabled (physics=False) and then set the x,y based on a scheme.

Do you have something like that? Maybe an example? How is x,y work? Does it start from the upper left corner? Thanks in advance.

[boludo00]

from pyvis.network import Network
import networkx as nx

g = Network(1000, 1000, notebook=True)
random_tree = nx.random_tree(50)
layout = nx.kamada_kawai_layout(random_tree)
g.from_nx(random_tree)
g.show("buttons.html")

for node in g.nodes:
    node["x"] = layout[node["id"]][0] * 1000
    node["y"] = layout[node["id"]][1] * 1000
g.toggle_physics(False)
g.show("buttons.html")

What I have done here is use networkx to generate a layout (dict of node id mappings to array of x and y). Then iterate through nodes and update each node object with relevant 'x' and 'y' attributes from the returned layout. You'll notice I also scaled the coordinates up by a factor of 1000 since resulting visual included nodes sitting on top of each other since the original coordinates were too small for the canvas. Also disable physics like in the example to make sure your layout is static.

You could also include the x and y coordinates when you add a node with add_node or add_nodes like in the example on the docs: https://pyvis.readthedocs.io/en/latest/tutorial.html#adding-list-of-nodes-with-properties

[l1x]

Sorry the screenshots are not readable.

x=[21.4, 54.2, 11.2], y=[100.2, 23.54, 32.1]

What are the x and y units and where is the origo on screen?

[boludo00]

Sorry, I have edited my original comment with a more clear example. Origin would be top left and follows HTML canvas coordinate system. https://www.w3schools.com/graphics/canvas_coordinates.asp

But to answer your question about the x and y's, if you use the add_nodes method like:

g.add_nodes([1, 2], x=[10, 20], y=[5, 10])

then node 1 will have the coordinates (10, 5) and node 2 will have the coordinates (20, 10).

[l1x]

Thank you!