Creative Synthesis

Graph Gear is an open platform for graph visualization (the mathematical kind, not the bar chart kind). It allows you to create an interactive graph with force directed layout that has a good interactive user experience.

Demo | Download | gpl | Current Version 1.2

If you are interested in more permissive commercial use, please contact us

Additional Notes

This code is also available over subversion, see the web view at the collaborative code repository.

Graph Gear allows you to quickly render a customizable interaction graph that is described by a graph xml file. All you need to do is embed it in your page and pass the xml over javascript. It provides nice interactive capabilities and a force directed layout.

Release Notes for 1.2

• Redesigned nodes. Nodes now have larger ‘text tags’ associated with them that allow more meaningful text.
• Links for nodes. A direct consequence of the above, it now makes sense to have links on the text while still allowing direct manipulation of the graph. This means that graph gear is now a more useful navigation tool.
• Node rotation. Really this is just necessary for the above things to ‘look right’ but it is a nice and simple change nonetheless.
• Images in nodes. Since nodes no longer have text directly clogging them, we can add meaningful images to nodes. This kind of thing can be particularly nice in items such as Passant’s foaf browser. Transparent pngs and the like are also supported, which can produce some rather nice effects.
• Cleaner look. Overall design improvements for the graph. Branding is also significantly more discreet.
• Show as you go explore mode. Graphs now come in too flavors. They can either display all nodes (as before) or they can show only those nodes directly connected to the currently selected node. This allows the exploration of significantly larger graph sets in ways that feel pretty natural (once you try it a bit). Nodes which have connections that are not being shown are indicated, so it a quick matter to jump back and forth around a large graph.
• Easy Graph Sizing. It is now significantly easier to make graphs of any canvas size. The only necessary steps are the inclusion of a width and height in the xml file (and correspondingly in the swf object call).
• Better example page. It’s a silly little thing really, but it does help a lot. Although XXX has a pretty nice rundown of how to use the graph gear, its nice to be able to show some better example graphs. You can even type a graph in the textarea and render it so people can build a graph “live” as it were.

Things that could still stand to be done.

• Better linking to more live data sources. Solutions like Passant’s are good, but they still require building an xml file. It would nice if you could (for example) just pass things like a foaf uri to the graph and it would figure out what’s going on. Of course this kind of thing requires more specific kinds of code.
• Larger node set. While the new nodes are more functional, there are obviously a lot of different kind of node types we still don’t support. The adding of rotation for nodes, however, makes it significantly easier to have a “non circle node” look right.
• It’s not clear how many people would prefer passing constant values (things like repulsion and attraction forces, mass, and gravity, over the xml rather than manually editing in source) - this is an easy add if it makes sense (is useful and not confusing).

Additional Links

When we started working on graph gear it was mostly because there wasn’t a good opensource flash graph solution. There are now a few more: (flexvizgraphlib, springgraph flex component).