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) <

For quite some time now I’ve been working on an Android application in my spare time.  It is an alarm clock called Alarmed! and I released the beta version of it today.  This version is a free trial with a limited feature set.  You can find out more about it here.  The main feature of the application is the puzzle aspect.  When the alarm goes off the sound won’t stop until you’ve answered a set of questions, some simple maths questions and some short anagrams.  The questions start off simple by default but you can add more as you get better.  The idea is that by the time you’ve answered all the questions you should be properly awake!

Additional features are snooze and the ability to set the alarm to play a random song from a playlist in your music library.  The playlist feature will only be available in the upcoming full paid-for version which I’ll likely only charge a dollar (US) or two for.

Example of Character Justification plugin

I’ve updated my Character Justify Plugin. I could go into detail but to put it simply I’ve worked to improve the alignment on the right edge particularly when there are spaces between words in the same element.  Previously I was trying to deal with the extra letter spacing caused by multiple words by subtracting an arbitrary percentage from the width that I’d stretch the letters to.  Now I’m replacing the spaces with a character of fixed size (”_”) when calculating the width of the elements.
The example has been updated to show this and I’ve tweaked the animation example to so that the animations on each element don’t get out of sync.

Happy Justifying!