in maths, programming, python, tutorial

Interactive Graphs in the Browser

Share Button

Having worked both as a teacher and an artist, I know how important data visualisation is. This tutorial will teach you to create interactive network graphs with Python and JavaScript. You can have a go by dragging the nodes of the graph below…

You can find a high resolution version of the melancoil tree (2000x2000px, first 1000 numbers) here: PNG, SVG, HTML.

Step 1. The graph

There are many libraries in Python that can handle network graphs; for this tutorial I’ve chosen NetworkX, which is quite easy to use. The first step is to create the graph, which can be done by simply adding the edges; this will also automatically add all the nodes.

The code below is used to calculate the Melancoil tree, as discussed by Matt Parker in an episode of Numberphile. The algorithm to generate them has been discussed in the tutorial Recreational Maths in Python.

The result is a directed graph which represents how the non-happy numbers are connected.

Step 2. Interactive Graph

The way the network graph is going to be transferred to JavaScript is via JSON. The module json_graph allows to dump a NetworkX graph into a JSON file. Before doing that, you can add any additional parameter you want to the nodes or the edges. This can be very helpful to decide which colour to use, or which label to show on the graph.

If you have a software which can read JSON network graphs, this is all you need. However, there are few interesting things you can still do. Following one of the examples on the NetworkX documentation (partially based on Mike Bostock‘s work), you can launch a browser page with an interactive version of the graph:

The Python script will keep running and serve as a local HTTP server on the port 8000. By visiting the address localhost:8000/force/force.html, you’ll see something like this:

 d1

The graph reacts to drag events and looks quite nice. Once the Python Script is closed, the HTTP server becomes unreachable; however you can simply copy the “force” folder onto your website and it will work just fine.

Step 3. Customisations

The network graph made However, there are no customisation options available from Python. If we want a fancier graph, we need to chance the JavaScript code that generates it. This is stored in the file force.js.

Nodes with style

The styles of the nodes can be changed by chaining a call to style while appending the nodes; this can be seen in line 37, which changes the node colours according to a property called group:

This function is evaluated for each node, which is called d. Any property we previously added in Python is saved in the JSON, and can be recalled easily. For the network graph shown at the beginning of this page, these attributes and styles have been used:

Both colour and group are properties that have been initialised by the Python script. The former indicates the base colour of the node, while the latter counts how far the node is from the melancoil loop.

Nodes with labels

The first change we need to do is to add labels to the nodes. In order to do this we have to create a container node which will host the circle and the text.

We also have to make sure that the new containers move when the graph is rearranged. To do so, we need to add these two lines in the force.on function:

Conclusion

If you are interested in this topic, you might also find the following tutorials interesting:

📧 Stay updated

A new tutorial is released every week.

💖 Support this blog

This websites exists thanks to the contribution of patrons on Patreon. If you think these posts have either helped or inspired you, please consider supporting this blog.

Paypal
Ko-fi
Twitter_logo

Write a Comment

Comment

  1. I get an error when I try to import http_server:

    ModuleNotFoundError: No module named ‘http_server’

    My Networkx is version 1.11, all other modules import just fine.

    • Hi Tim!

      The article shows how you can improve the function in different ways, based on your needs. This is why there are multiple versions of the same function.

      It is hard to tell what is not working, because I don’t know how you have pasted the code. Is the function by itself working? Also, check the indentation, which can get messy when copying Python code from web pages.

Webmentions

  • Recreational Maths in Python - Alan Zucconi September 17, 2018

    Hi Tim!

    The article shows how you can improve the function in different ways, based on your needs. This is why there are multiple versions of the same function.

    It is hard to tell what is not working, because I don’t know how you have pasted the code. Is the function by itself working? Also, check the indentation, which can get messy when copying Python code from web pages.