2Paths » gord

Visualizing Semantic Data using Javascript and the HTML Canvas Element

gord — Mon, 22 Jun 2009 21:45:37 +0000

So after trying a few existing javascript/canvas graph visualization libraries, I decided to try my hand at writing my own. We were doing a lot of stuff with RDF in the office at the time, so I decided that my visualization would be a graph of rdf data and relationships. Since I’d never done anything with the HTML canvas element before, I thought I’d give that a shot too.

Graph Layout

After looking at various existing graph layout algorithms, I decided to reinvent the wheel and developed my own approach. Each node has a mass based on its size, and I simply used gravity calculations to determine the (inverse, so they repel each other) force each node apples to each other node. You can see this in action when you mouse over a node, it gets bigger and other nodes retreat from it as its mass increases.

This allows each node to position itself in a way so it is visible. It’s not perfect, but it works okay and makes the graph feel responsive to the user.

How to use it

Double click on a node to load its relationships and related nodes. A node must be an rdf node to load properly, I haven’t implemented any way to handle normal web links yet. Basically, only click on links that look like http://dbpedia.org/resource/something, or that you know are rdf.

click for demo of the wikipedia article for baseball

If you’re just interested in the pretty pictures, stop here, if you want more technical information read on.

Implementation

I just used javascript and followed the HTML5 docs for using the canvas element. One thing I ran into was the fact that Firefox doesn’t yet have a full canvas implementation, specifically it doesn’t yet render text on the canvas. I tried doing some voodoo with absolute positioning divs containing text over the canvas, and after a brief descent into insanity, I found the excellent typeface.js library which emulates the missing canvas calls for text.

As for the javascript code itself, I implemented a simple object graph that can contain vertices or edges, then a render loop just advances the object graph by a given amount of time and renders the scene to the canvas.

The back end serving up rdf was done quickly in grails using the Jena framework to do all the heavy lifting. There is some minimal inference going on using the RDF data to determine if something is an image.

Disclaimer

Keep in mind that this is a work of progress that I have not spent much time with. It has bugs, and it’s nowhere near usable for anything useful, but it serves its purpose as a proof of concept. I’m not sure if it will even run under IE, but it should run on any browser that has a decent javascript + canvas implementation.

Conclusions

The canvas element is cool, and works well.

Basically I hope you like it. Please leave any suggestions or feedback as comments. I realize it’s probably full of bugs, but that’s the nature of the beast.

Eclipse update, fix for home and end keys

gord — Fri, 19 Oct 2007 17:32:27 +0000

2Paths Eclipse Distro v2
I’ve put together a new disto of the latest Eclipse wtp with some added plugin goodness. I’ve found this version to be much more stable than v1, and it even works on Lorill’s machine without too much trouble. Among the new features is a regex tester plugin, and a filter plugin that allows you to run command line tools such as sed against a selection in the text editor.

Also note that I’ve put together a 2Paths preferences file that remaps the home and end keys in eclipse, and adds in the 2Paths code formatting templates. To import, once you’ve got the new eclipse up and running, select import and choose preferences.

Download Eclipse 2Paths Edition v2 (155.6MB)

Fix for home and end keys
If you’re anything like me, you are used to having your home and end keys go to the start of the line of text and the end of the line, respectively. The way OS X does it drives me insane, and I’ve finally found a solution that even fixes it in firefox: KeyFixer.

KeyFixer is a free utility that remaps those keys, there are 2 versions, the standard one that remaps it in OS X and most apps, and KeyFixer for Firefox which is self explanatory. I recommend installing them both if you want your home and end keys back.

Download KeyFixer (60KB)

Download KeyFixer for Firefox (80KB)

Eclipse WebTools 2.0 Released, time to update your IDE

gord — Wed, 04 Jul 2007 00:52:24 +0000

The Eclipse WebTools team has released version 2.0 of the WebTools Platform along with the rest of the Europa release. From the release announcement:

Eclipse developers will be particularly pleased with the debut of major features and/or specification updates to EJB3 JPA, JSP 2.0, JSF 1.2, Axis2 Web Services, Tomcat support, and source editing. This release also introduces Java EE 5 project support.

I’ve put together a new Eclipse bundle for everyone here at 2Paths. The package includes some useful plugins preinstalled (Subclipse, SpringIDE 2.0., JAutoDoc, and JSEclipse), as well as some performance and stability tweaks.

Download – Eclipse Europa 2Paths Edition (OS X, 155MB)

To ensure everyone is working with the same tools, you should configure your eclipse to automatically check for updates. This can be done by clicking on the Eclipse menu -> Preferences then Install/Update -> Automatic Updates.

If anyone has any problems with this release, just let me know and I can give you a hand getting things sorted out.

Eclipse WTP 1.5.4 and 2.0RC1 for OS X

gord — Mon, 28 May 2007 18:59:08 +0000

I’ve downloaded and hand-configured the latest Eclipse WTP builds for your convenience. I’d included the Subclipse SVN plugin as well. If there are any other plugins you’d like to see by default in the future, let me know.

First of all, if you haven’t installed this update to the Java SWT libraries from Apple, do it now. It should improve stability with Eclipse.

Download: SWT Compatibility Update (188KB)

Eclipse WTP 1.5.4 is the latest update to the WTP 1.5 line. Not anything new, but contains numerous bug fixes etc.

Download: Eclipse WTP 1.5.4 (183.9MB)

Eclipse WTP 2.0 RC1 is based on Eclipse 3.3 RC1 and appears to be fairly stable. Some of the new features are support for Tomcat 6, support for JPA projects (annotations, , mappings etc), built in support for web services, and spell checking. This is pre-release, so use at your own risk (I’ve been using it and it seems ok, although I keep my 1.5.4 around just incase).

Download: Eclipse WTP 2.0RC1 (227MB)

Remember to update your copy of eclipse regularly to receive the latest bugfixes, or better yet, set it to auto update in preferences.

2Paths blog Widget for OSX

gord — Wed, 21 Feb 2007 21:11:33 +0000

I was messing around with some of the sample Dashboard widget code provided by Apple and came up with a widget that displays the latest entries on the 2Paths blog. Widgets are basically html + css + javascript, with a little ajax mixed in if desired, and as such they’re pretty simple to create and modify. The nice thing about coding them versus something you would access in your browser is that Dashboard is a known variable; you don’t need to worry about what it’s going to look like in 5 different browsers.

On a side note, The Daily Grind is a time tracking widget that allows you to track the amount of time you’ve spent on a number of different tasks/projects. It wouldn’t take a lot of work to interface it with JIRA for our time tracking.

Download: 2Paths Blog Widget (584KB)