Flex: Social Graph Browser

I have created a Social Graph Browser application.

Sample App

This is a graph front end to the Google Social Graph API. It presents the same sort of information you can fetch from the example applications but on a connected graph.

You can read up on the Social Graph and what it is here.

In short, Google have applied their web crawlers to collect semantic link information which are links between things. The links not only provide a connection but they also describe relationships between these things. Semantic links underpin the next generation of the internet and are a big deal in social networks as they are a means to track relationships.

The Browser uses the same Flex framework as the the SPARQL browser. The two core components which do all the work though are the parser which extracts data from the JSON data and the algorithm to build the graph.

This application uses flexvizgraphlib for the graph component.

You can find a full FlexBuilder2 project here. This is licensed under the MIT license. The reason for this is that it was just easier given that the 3rd party components used are under the same license.

  • JSON Parser
  • The Google Social Graph API uses JSON to return data to any request made through the graph endpoint. This format is convenient for bog-standard web pages but a little more work under Flex. I had to use the JSON parser which is bundled with the corelib library. This serialised the returned JSON into AS3 Objects. This AS3 strutures were processed further to generate node information. I could not use the serialised AS3 structures in the manner given in most of the Noddy Flex JSON examples that are kicking around. This is because the structures were heavily nested and used a great deal of name paired behaviour between keys and objects (look at the code).

  • Graph Algorithm
  • There are different approaches to building a visual graph to represent the JSON graph data. You can see a couple of them here and here. I liked Victors the best as has provided a good test bed to try out things which is the osocial web site. The osocial site is just the right size to provide data which can be queried with the Google API and represented on the graph when developing.

    Basically the approach I have taken is:

    – Build all the nodes at the start.
    – Interate through all the relationships and draw the edges between nodes and label the edges with the appropriate associations. If a node already has an association when processing edges then move on. I make the assumption that a doubly connected node will have the same association although I don’t believe this will hold true for all cases. This means we may be losing associations.

  • Uses
  • You should be able to use this to the sort of stuff described here and display the graph for it.

  • Usage
  • Okay, a few notes on getting the best from this.

      If you deselect all the checkboxes for query conditions your results nodes will not be connected.
      Try moving the separation length slider up and down to expand or contact the number of visible nodes.
      To get an expanded graph deselect the ‘autofit’ checkbox and move the ‘Link Length’ slider up and down.
      The graph can get out of hand if there are a lot of edges. Try selecting the ‘Follow Me’ checkbox only.
      Pointing the browser at myspace is pointless as you will get an unmanageable number of results. A better approach is to pick a particular myspace page and query that instead.
      Blue circles represent result or ‘primary’ nodes (as I call them).
      Grey stars represent ‘Edges Out’
      Blue stars represent ‘Edges In’
      You will only see ‘claimed’ or ‘claims’ nodes when the ‘Follow Me’ checkbox is selected. If you select this you will see that the result node list (on the left) expands to produce follow nodes.

  • Known Bugs
    1. If no node appears after making a query try flicking the ‘Separation’ slider up and down.
  • Update 0.0.2
  • – Fixed error when blank search issued.
    – Fixed About box problem where application unreachable.
    – Added in ability to switch between graph types Normal/Force Directed


    5 Responses to “Flex: Social Graph Browser”

    1. michal on March 25th, 2008 7:12 am

      I started couple weeks ago with the same idea: http://michalkuklis.com/sge/

      nice work!

    2. Tim on April 19th, 2008 2:07 am

      Nice work. Have you ever played EVE. The map system there would do nicely. 3D. Probably too much for this now.

    3. Administrator on April 21st, 2008 9:03 am

      Tim, Sounds interesting. I am always looking for cool visualisations. I will Google for screenshots.


    4. Melanie on December 5th, 2009 7:17 pm

      Hi, your research is very interesting, but how can I get the flexvizgraphlib ? There is only a demo on The website of adobe ,can you send the code to me? My email:gutingting110@gmail.com

      Thank you !!!

    5. Administrator on February 1st, 2010 11:13 am

      Melanie, The graphing component is now part of this: