How to implement the same layout for many graphs? about pyvis HOT 4 CLOSED

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

from pyvis.

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?

from pyvis.

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).

from pyvis.

Thank you!

from pyvis.