How To Draw A Wobbly Interactive Graph In Python

# Click & Drag To Make It Wobble

We probably know how to draw graphs, but do we know how to draw a wobbly graph like above? Let’s get started.

Installation of pyviz

We need to use an external library called pyvis. It allows us to draw wobbly graphs.

pip install pyvis

Note — pyvis with an s

Now, let’s open an empty Jupyter notebook.

1) Drawing our first node (ball)

Let’s draw our first ball labelled A. We can do this using the .add_node method.

Here we have our first ball.

2) Drawing our second node

Let’s draw another ball (node) labelled B. We simply need to call the add_node method once again.

Now, we have 2 balls on the screen.

3) Let’s connect A and B — drawing our first edge

Here, and edge just means a line between the balls. We can add edges using the add_edge method.

Note that in network.add_edge('A', 'B'), A comes before B which means that the arrow points from A to B. If we reverse this, we get the opposite effect.

4) Wobble it

Click on one of the balls (or the line) using your mouse, and drag it around. Notice that it wobbles and follows your mouse pointer.

5) Let’s draw more balls and lines

Yay, more balls and lines. But to be honest, that was quite annoying to type. Is there a way to not have to use the same function repeatedly? Yep.

6) Using .add_nodes() and .add_edges()

If you’ve got many many nodes and lines you wish to add, consider using .add_nodes() and .add_edges() like the below example. This way, you don’t have to type out .add_node() and .add_edge() so many times.

More Tips And Tricks

• in .add_node('A', label='A'), the label must be a string (for some reason), so if you want to use a number, remember to str(n)
• directed=True in the first line makes this a directed graph. To make it undirected, just set directed as False.
• you can change the height and width of the graph
• the graph is actually saved in a HTML file test.html

Conclusion

Hope you had fun drawing wobbly graphs.

Some Final words

If this story provided value and you wish to show a little support, you could:

1. Clap 50 times for this story (this really, really helps me out)
2. Sign up for a Medium membership using my link ($5/month to read unlimited Medium stories)

My Ebooks: https://zlliu.co/ebooks

My LinkedIn: https://www.linkedin.com/in/zlliu/

My Workspace Setup: https://zlliu.co/workspace