Post Your Graphs with gexf-js

DH11 Conference in gexf-jsWhile tools like Gephi allow for easy manipulation and examination of a network, to present such networks you’ll invariably need to export it into a more accessible form.  This can be accomplished using vector imagery, such as PDF; or static images if the graph is small or meant to be viewed from a strategic perspective; or using tiled maps, like Seadragon, to have a static but extremely large image.  Of course, we always want to give viewers the option to interact with the graph, not only because dynamic maps are more engaging but because they also allow us to hide a variety of details about individual nodes and only present them when they are selected.

There are a few options for dynamic and traversable network representation on-line, with Processing, Flash and JavaScript providing the majority of the frameworks.  I’ve used Protovis and D3 as well as Flash-based solutions like GexfWalker and SiGMA.  The strength of gexf-based solutions like GexfWalker is that they maintain the style and formatting that you created in Gephi while providing interactive functionality.  The best of these that I’ve seen so far is gexf-js, which takes a gexf and uses HTML5 functionality to present it on-line.  There are a few hiccups–it doesn’t work in archaic browsers and things like edge coloring don’t show up properly unless you’re in Chrome–but otherwise it’s a practically zero-effort solution for taking a graph straight out of Gephi and putting it online.

Carthago Nova selected on the Roman Transportation Graph

In Chrome, selecting Carthago Nova displays the proper blue "sea lane" edges, whereas in Firefox this will be displayed as a source-target mixed color.

Here’s an example using the DH11 graph from this year’s Digital Humanities 2011 conference at Stanford.

Credit goes to Raphaël Velt–who created gexf-js–for a sleek and simple interface that presents graphs beautifully.  You’ll notice that gexf-js uses bezier curves for the edges by default.  I’ve changed the code from BezierCurveTo to a simple LineTo, which improves performance a bit but reduces clutter for the types of networks that I tend to work with.

Gephi graph in gexf-js


This entry was posted in Graph Data Model, Tools, Visualization. Bookmark the permalink.

Comments are closed.