HeyGraph Javascript and canvas graphing tool

HeyGraph Screenshot

To learn a bit about the HTML 5 canvas I’ve been writing a simple graphing visualization tool in Javascript.  Graphing in the sense of vertices connected by edges in a network, not in the pie chart and bar chart sense.  There is already a fairly decent charting library for  HTML 5; RGraph.

The canvas API itself is quite straightforward, it even makes things like drop shadows disappointingly simple.  In fact most of the time spent on this project was on implementing a force-directed graph layout algorithm in Javascript.  This was made easier by the fact that I’d already implemented it once in Java.  You can see a demo of the project here.

The canvas element is only available on “real” web browsers such as Firefox, Chrome, Opera and Safari.  Also performance of the layout algorithm is notably better in Chrome, particularly in comparison to Firefox 3.5.7 (on Ubuntu).  The demo can even render in Internet Explorer now thanks to Google’s ExplorerCanvas library although performance is so low that it is not recommended.  The time that the layout algorithm will take to complete is impossible to predict and so the layout will time out after a set time (around 15 seconds).  For this reason you are likely to get a substandard layout on particularly slow machines or when using browsers with poor Javascript performance.  The graph that is represented in the demo is generated at random so be sure to refresh the page a few times to see the tool handle a number of graph structures.

The tool is currently quite limited.  There is only one layout algorithm available* which could be better optimised.  There are no ways to navigate the graph by zooming or panning and the appearance of the graph is currently limited to the white on blue default presented in the demo.  The graph can visualise any data as long as it is expressed in a certain format, easily described in JSON.  However it does add properties to that data when it lays out and renders the graph.  This would ideally be avoided.  I hope to address these issues in the future, particularly in regard to navigating the graph and customising the appearance, specifically so as to be able to visually distinguish and label the vertices.

The project along with it’s source is available under the MIT license from github.

HeyGraph Demo

*(although in my opinion force directed layout’s are appropriate for most small to medium size graphs) <

This entry was posted in Development, Javascript and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">