Link Visualizer User Interface

Link Visualizer

A friend of mine was applying at an art university and we worked on some projects to make his portfolio more interesting. This was the product of trying to visualise the web. Websites are visualised in a tree kind of fashion with the "www" node being the root. A website can be read from root to leaf node while each level of depth represents a '/' in the website. Each node is rendered with an algorithm which parses its part of the website and translates it into a graphical representation. The algorithm is deterministic and always produces the same images given the same input. This ensures that each website truly has a graphical representation which does not change.

The user can pan by clicking and zoom in/out using the mouse wheel. Upon clicking on a node the UI zooms in and locks on that node which displays the nodes full url from root to the current level. It also provides options to save the image or remove the node.

Each new node gets placed randomly on the screen. Using force directed graph drawing the graph then gets organised automatically. This is achieved by having connected nodes attract each other mimicking springs. Not connected nodes repulse each other like magnets of the same polarity. The deeper in the tree the node lies the smaller it gets drawn and the stronger its attraction to its neighbours is making it connect stronger.

For this project only a library was used to persist and read the inserted websites as .json files. Java Swing was used for the UI with a lot of custom implementations.

The code can be found at my github repository and an executable .jar can be downloaded here.