←Back to Posts

JavaScript/SVG Tag Graph Interface

The implementation is compatible with recent versions of Internet Explorer, Mozilla Firefox, Opera and Google Chrome/Apple Safari. The following image shows a sample output for this blog.

Screenshot illustration from JavaScript/SVG Tag Graph Interface

The graph is generated using PHP, layouted using JavaScript and rendered using SVG. The PHP script basically generates lines for connections between tags, and circles/text elements for the tags themselves. Most of the code is specific to my custom blogging API.

Php illustration from JavaScript/SVG Tag Graph Interface

The JavaScript contains the magic behind the interface. Upon page load the tags are arranged randomly on the canvas. Then, an interval is started to move the tags to their final location step by step. The update functions finally copy the layout algorithm values to the DOM SVG nodes.

Javascript illustration from JavaScript/SVG Tag Graph Interface

Try it out yourself: http://www.georg-hackenberg.de/interface/graph.html. If you would like to provide such interface for your own website, access the code via http://svn.hyperkit-software.com/personalblog/.

Start a Conversation

Want to discuss this topic or have feedback on this article? Feel free to reach out directly via email.

Feedback & Topic Discussion

Send an email request to

georg.hackenberg@fh-wels.at

Typically responding within 2 business days.

Open Email Client →