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

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!

Justification using pure CSS can be achieved by setting the text-align property to “justify”.  This will tell the browser to attempt to line up the words so that left the and right edges of each line are aligned with those above and below.  This effectiveness of this property can be enhanced by inserting hyphens where necessary to maintain the alignment using Hyphenator (here’s an example).

The “text-align: justify” technique is useless when applied to a list or similar column of text where each item or line only has one or two words in it.  For example in a navigation menu.  This is because the spacing that is added to achieve the justification is only added at the word boundaries.  Justification based on characters will be available in CSS3 using the property text-justify with the value “newspaper”.

I had the requirement to build a navigation sidebar with justified text for Caragh’s still unfinished website so rather than wait for CSS3 cross browser support I decided to find a solution.  One technique would be to use image replacement and insert images of the properly justified text.  The main drawback of that is it doesn’t easily allow for dynamic content so I decided to try writing a JavaScript solution.  The result is this Character Justification JQuery plugin.  All you need to do is call characterJustify() on whatever JQuery object you want to be justified.  The plugin will then insert the correct letter-spacing so that the letters are evenly spaced and the left and right edges more or less line up.

       $(document).ready(function(){
          $(".justify").characterJustify();
       });

The text will be distributed to fit within the bounds of the element(s) you called the method on unless you pass an optional integer parameter to set a particular pixel width.  I also added the regular JQuery animation parameters speed, easing and callback so you can also animate the process if you need to.

       $(document).ready(function(){

          $(".justify").characterJustify(200);

          var anim = function() {
            $(".justify").characterJustify(300, 1000, "swing", function() {
              $(".justify").characterJustify(200, 1000, "swing", anim);
            })};

          anim();
       });

Examples:

• Simple example
• Animated example

Plugin source

UPDATE: I’ve updated the plugin slightly.  Details here.  I’ve updated the above example animation code.

Would anyone like to help me beta test Findme, my new Firefox extension? It uses Google’s Social Graph API to find other pages that belong to the same person as the page you’re currently viewing. For example from this blog’s main page it will provide you with a URL to my Pownce profile, my Myspace profile, my Last.fm profile etc. I was thinking of naming the extension “StalkMe” as it is possible to start at one profile on one social network and find most, if not all, of their web presence. StalkMe is a little bit creepy however I’d be willing to hear suggestions.

(more…)