Hierarchical edge bundling is a method for visualizing hierarchical relations between items, represented as directed graphs. It has been used to show call graphs from a software system and dependencies between classes (in the object-oriented sense). The latter was implemented using D3.js by Mike Bostock.

I have taken Mike’s work and used it to visualize course pre-requisites from the University of Edinburgh. Mike’s code takes a JSON file written in a specific way. In the file parse-df.py I download the information from the University websites, and parse them to create the required JSON.

The image above was created from looking only at the courses which require or are required by others. Have a play with here:

Click on the nodes to display its links. Red link means the source node course requires the target node course Green link means it is required by the target node. Hover for more information, double-click to be taken to the course webpage.

I have also created one with all courses in the Earth Sciences subject.

It looks like this:

You can also play with it locally. Download all the codes, and run a simple server on the downloaded folder with:

python2 -m SimpleHTTPServer

Open a browser and head to http://localhost:8000/. If you want to try for other subject codes, delete the old adjacency_matrix.csv, modify parse-df.py by putting the new subject courses and re-run it.

Further reading

• Play with the source code from the connected subset and all courses

• Another, very nice tool for hierarchical edge bundling in JavaScript from Mike Bostock

• D3.js documentation

• Web scraping with requests and BeautifulSoup