I am pleased to announce that version 0.0.1 of th gwt-jsviz GWT Wrapper API has gone online.

JSViz is a javascript library which lets you create visualisations of data as a 2D graph of nodes.

The gwt-jsviz library is a GWT Wrapper API around the JSViz javascript.

You can find it here.


I had started a version of the GWT wrapper classes for a previous version of Kyles JSViz library but I was also working on a wrapper for the Simile Timeline control here.

I had a feeling I could integrate the timeline into the GWT Road traffic site I had developed so I was focusing on that.

Every time I came back to look at the JSViz wrapper code I was having to get my head around how it hung together again and it was slow going.

What kick-started development was when 0.3.3 of the JSViz library came out. I had a look over the code and realised that Kyle had redesigned it to separate the graph rendering into a few rtns. It was obvious to me that I could ditch most of the existing wrapper code I had generated and focus on hooking in the GWT layer into these callbacks. If you examine the source code you will see that each graph type only has to implement the IGraphRender interface i.e.

public interface IGraphRender
        public Layout create(JSVizWidget widget);

        public void render(JSVizWidget widget);

        // ------------------------------

        public NodeConfig model(DataGraphNode dataNode);

        public Element view(DataGraphNode dataNode, 
                   SnowflakeNode modelNode);

        public EdgeProperties viewEdgeBuilder(DataGraphNode dataNodeSrc,
                   DataGraphNode dataNodeDest);


The tricky bit was hooking into the javascript to install the callbacks. Have a look at ‘ForceDirectedLayoutImpl’ and ‘SnowflakeLayoutImpl’ classes to see how this works.

Not only was the design simpler but I though it would be cool if you could use GWT widgets instead of just pure ‘img’ elements. If you can make the nodes widgets then you can get all sort of goodies associated with GWT like tooltips, popup dialogs etc. The issue here was that I would have to write my own drag and drop handler for the widgets to track them on the view and update the JSViz data structures. This final code looks straightforward but it was probably the one piece of code I poured most of my time into getting to work and I think it’s still a little flaky.


The ‘Random Circuit’ and ‘Snowflake’ demos are re-implementations of the ones from Kyles blog but done in GWT. The ‘Random Circuit – GWT Image Widget uses GWT Image objects for the graphics. It has an tooltip listener hooked into it which will display the image url when you pass the mouse over an image. The tooltip could be anything really I just used the url for the demo.

The important point about these demos is not that they are just fun to try out but in imagining what you can do with this sort of visualisation. The point of this project (in case you hadn’t got the point yet in all my rambling) is that you can put together a force directed or snowflake type graph in JAVA by implementing the rtns in
‘IGraphRender’ and deploy it as a web application. You can do it using a great tool like Eclipse where you can run and debug your application just like you would a normal app.

The demos are also linked to on the project page:

The original JSViz site is here.


Leave a Reply