Graph Gear

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.4

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

Additional Notes

This code is also available over subversion, see more information 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. The code is editable and compilable with MTASC, and it also features a javascript api to control graph interactions.

Release Notes for 1.4

• Vastly Expanded Javascript API - Almost all properties for a graph can be changed over javascript. Nodes can also be added (though not deleted) during a user session. Also good, nodes now notify javascript when you interact with them, allowing significantly richer applications to be built.
• Code Compilation for Non Flashers - Almost all of the code (accept for one or two dangling bits) has been moved to the class files. That means that non flashers can compile by the command line using a free software compiler like mtasc. It’s so easy, its just one line of compile!
• Graphs can now be directed (add type=”directed” to the graph tag, defaults to “undirected”), currently the marker is just a simple arrowhead in the color of the line.
• Support for different, multiple node types (currently supporting: SquareNode, CircleNode, CircleTextNode, OpenNode) - CircleNode is the previous style. A SquareNode is (surprise) a square, a CircleTextNode is a CircleNode with a simpler text display style, an OpenNode is intended to be used with a transparent png (it doesn’t mask to a shape).
• Basic Support for Clustering - The toolkit was intended to draw a single graph, meaning all of the nodes are connected. Still, sometimes you have a few unconnected graphs that need to be displayed. Clusters (cluster=”clustername”) allow you to create groups of nodes that don’t interact with other groups. Nodes default to the aptly named “default” cluster. If you wanted a second minigraph of two nodes connected only to each other, for example, you could assign them to the cluster “secondcluster”. This is still very basic.
• Added support for alternative node interactions (on a graph wide basis). The included example is action=”center”, this interaction centers nodes on click, rather than allowing the user to drag them around.
• Added preliminary support for line locking (if you want to use the force directed layout in a single dimension, by locking to the x or y axis (lock=”x”, lock=”y”). Pretty buggy at the moment, bound and adjust need to be turned way down)
• Added ability to hide labels explicitly (hideLabel=true) (labels are always hidden if they have no content)
• Rotation has been fixed (no weird jumping)
• Added animation library. animation=”true” will enable some basic animations (like node selection effects.)
• Edge bounce - stupid nonfeature, nodes now repel when they hit the edge, making them look extra cool.
• Added additional information in docs/ for javascriptapi, compilation and new xml property descriptions.
• Bug fixes all around (and fast blast kudos)

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.

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