Create flashy graphs in minutes with Graph Gear

Turning plain data into shiny graphs similar to Visual Thesaurus and Visuwords doesn’t only make them look good: it also allows you to visualize connections between different data bits and makes it more fun to explore them. The problem is that creating such graphs can often require three things not all of us have: programming knowledge, time, and money. Fortunately, there is Graph Gear, a neat open source solution to effortlessly create simple high-quality Flash-based graphs. Using it, you can create spiffy graphs in a matter of minutes. Here is how.

First of all, download the Graph Gear package from Creative Synthesis’ website and unzip it. Upload the GraphGear.swf and swfobject.js files to your website or server. These two files are the “engine” that powers Graph Gear. To draw a graph, Graph gear pulls the required data from an XML file that contains a list of nodes and connections between them as well as properties such as node colors and connection labels. For example, the XML below produces a simple graph consisting of two connected nodes, “Fruits” and “Vegetables”.

<?xml version="1.0"?>
<graph title="Fruits and Vegetables" bgcolor="0xFFFFFF" linecolor="0xCCCCCC">
   <node id="n1" text="Fruits" color="0x7401DF" textcolor="0xFFFFFF"/>
   <node id="n2" text="Vegetables" color="0xFF8000" textcolor="0xFFFFFF"/>
 
   <edge sourceNode="n1" targetNode="n2" label="vs" textcolor="0x555555"/>
</graph>

Here is what a graph generated from the XML file looks like:

Figure 1: A simple Graph Gear-based graph

Each node element has four properties that are self-explanatory: id, text, color, and text color. All node ids starts with n followed by a number, for example, n1, n5, n127, and so on. The color property specifies the background color of the node as a HEX value. To find the HEX value of the color you want, you can use one of many tools, including the HTML Color Codes website. Keep in mind that almost all tools prepend HEX values with # (e.g. #FAAC58), which in the XML file should be replaced with 0x. For example, #FAAC58 becomes 0xFAAC58.

The edge element specifies a connection between two given nodes. In the example above, the edge “connects” nodes n1 and n2. Using the label and textcolor properties, you can specify connection’s label and its color. Knowing the basics, you can quickly create more complex XML files similar to the one below.

<?xml version="1.0"?>
<graph title="Fruits Veggies" bgcolor="0xFFFFFF" linecolor="0xCCCCCC">
   <node id="n1" text="Fruits Veggies" color="0x7401DF" textcolor="0xFFFFFF"/>
   <node id="n2" text="Apples" color="0xFF8000" textcolor="0xFFFFFF"/>
   <node id="n3" text="Cucumbers" color="0x04B404" textcolor="0xFFFFFF"/>
   <node id="n4" text="Potatos" color="0xFAAC58" textcolor="0xFFFFFF"/>
   <node id="n5" text="Beans" color="0xDF7401" textcolor="0xFFFFFF"/>
   <node id="n6" text="Granny Smith" color="0x9AFE2E" textcolor="0xFFFFFF"/>
   <node id="n7" text="Macintosh" color="0xB4045F" textcolor="0xFFFFFF"/>
 
   <edge sourceNode="n1" targetNode="n2" label="Fruit" textcolor="0x555555"/>
   <edge sourceNode="n1" targetNode="n3" label="Veggie" textcolor="0x555555"/>
   <edge sourceNode="n1" targetNode="n4" label="Veggie" textcolor="0x555555"/>
   <edge sourceNode="n1" targetNode="n5" label="Veggie" textcolor="0x555555"/>
   <edge sourceNode="n2" targetNode="n6" label="" textcolor="0x555555"/>
   <edge sourceNode="n2" targetNode="n7" label="" textcolor="0x555555"/>
</graph>

Once the XML file is ready, upload it to your website or server. To embed a graph based on the created XML file, you have to insert the following code block into the desired web page.

<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
     // <![CDATA[
     var so = new SWFObject("GraphGear.swf", "graphgear", "725", "400", "8");
     so.addVariable("graphXMLFile", "graph_data.xml");
     so.write("gearspace");
     // ]]>
</script>

There are two things you have to change here. First of all, you have to specify the correct path to the swobject.js script. Then replace the name of the default “graph_data.xml” XML file with the one you’ve created. Open the web page in a browser, and you should see a graph similar to this one:

Figure 2: A more complex Graph Gear-based graph

While Graph Gear is extremely easy to use, it does have a few weak spots. For example, you can’t specify the size of each node, which poses a limit on how much text you can enter into a node. You can’t specify the length of each connection, either. Despite these drawbacks, Graph Gear is definitely a tool worth keeping in your web tools arsenal.

Related articles: