Data Visualization with Flex, Part II

Previously, we dumped our data into a data grid that looked like this:

Figure 1. Our data grid

This allows us to see the data we’ve gathered, but it fails to provide a useful view into any patterns or relationships. For this exercise, we want to see the relationships between keywords, and their relative popularity compared to one another. We could use a simple chart to show us the popularity rankings, but that still won’t show us the relationships between the keywords. To pull everything we want to see into one display we're going to need a better visualization.

What we need is some kind of network diagram that lets us see connections between keywords, but also lets us see which keywords are more popular. Enter the spring graph. A spring graph is a network relationship display component that shows entities with interconnecting lines identifying their relationships to one another. It’s called a spring graph because it relies on a kind of springiness between the represented items, automatically laying them out in a spread fashion and allowing us to see the relationships easily. This kind of visualization is often used in relationship mapping, for example, showing links between people in a social network.

Fortunately, we have a free component available to us to create spring graphs, kindly created and open-sourced by Mark Shepherd. This component will do all the heavy lifting for us, all we’ll need to do is feed in the data we’ve collected.

There are two ways to include the SpringGraph component in your project: you can download the .swc and include it in your project libraries, or you can download the entire source code tree and include that instead. In most cases the simplest option is just to add the .swc to your project. Download the archive from the web site above and extract it. Inside you’ll find a /bin folder containing the .swc file—copy that file to your Flex Builder project’s lib directory. In some cases you might need to go to the project menu and choose Clean…. Check that your project has picked up the library by right-clicking on the project in the navigator window and choosing Properties.

In the Properties dialog, select Flex Build Path on the left-hand menu, then click the Library path tab on the right. If you expand the libs folder that’s displayed, it should look a little like this (that is, it should include SpringGraph.swc):

Figure 2. The Library path view for our project, including SpringGraph.swc

Now that we have SwingGraph.swc in our libraries, Flex Builder will be able to find the classes we require inside it. To use them in our code, we’ll need to add a namespace for the SpringGraph class to the <mx:Application> tag. We’ll call the namespace sg:

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:sg="com.adobe.flex.extras.controls.springgraph.*" 
  layout="absolute"
  creationComplete="service.send();">

The next step is to remove our data grid and replace it with a spring graph. We also have no need for the data grid label function listLinks(), so we can delete that as well. Instantiate a spring graph object like so:

<fc:SpringGraph 
  id="mySpringGraph" 
  backgroundColor="#FFFFFF" 
  lineColor="#6666ff" 
  repulsionFactor="5"
  right="10" left="10" bottom="10" top="10">
⋮ 
</fc:SpringGraph>

At this point your application should compile successfully, but nothing will be visible on the screen. The spring graph works just like a lot of the standard Flex data display components, in that it requires a data provider. Our keywordData variable holds our information, but it’s yet to be in a format that the spring graph can understand. Fortunately, there are a number of classes and methods made available to use within the SpringGraph class, which will let us easily build an appropriate data provider.

Begin by importing a couple of new libraries for us to work with by adding these import statements to the top of your script block:

import com.adobe.flex.extras.controls.springgraph.Item;
import com.adobe.flex.extras.controls.springgraph.Graph;

The Item class defines an item in the spring graph: a node representing data, which will be linked to other nodes. The Graph class is used as the data provider to the <SpringGraph> tag, and contains methods which allow us to add items to the graph and create links between them.

Let’s create and instantiate a graph object. Add this underneath the keywordData variable declaration:

private var myGraph: Graph = new Graph();

We want to build the graph as our component loads, so for that we’ll need a setup method. Add the following code to your script block beneath the variable declarations:

private function setup() : void {
  // add items
  for each (var obj:Object in keywordData) {
    var item: Item = new Item(obj.keyword);
    myGraph.add(item);
  }
}

Here we loop over each keyword in keywordData, and for each one we create a new Item object, using the keyword itself as the item title by passing it as a constructor argument. Finally, we add the Item to the graph and continue—this builds up a collection containing one Item object per keyword in our data set.

Next, we need to create links between the relevant items. Add this code to the setup method on the next line down:

// setup links
for each (var lObj:Object in keywordData) {
  var linkItem: Item = myGraph.find(lObj.keyword);
  var links:Object = lObj.links;
  for each (var link:String in links) {
    myGraph.link(linkItem, myGraph.find(link));
  }
}

In this segment we loop over the keywords again, but this time we grab the actual Item object from within the graph, searching for it using the keyword. This way we can specify the “from” item for our link. Next, we loop over each of the other keywords that this keyword is linked to (remember they’re stored in an array called links for each keyword in keywordData). For each one we create a link, using our “from” item, and doing a second find in the graph object to get the “to” item.

Finally, we need to set the graph as the data provider for our spring graph display component. Add one more line to the end of your setup method:

mySpringGraph.dataProvider = myGraph;

Now save and compile your project, then launch it in the browser and you should see a graph looking like this:

Figure 3. Preliminary spring graph