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

    Flex: Modest Maps – Demo update to version 1.0 library.

    I have updated both the Modest Maps demos to use the newly released v1.0 Modest Maps library.

    Sample App

    New ones:

    Simple demo Flex builder project in zipped form here.

    London BBC Jam Cams demo Flex builder project in zipped form here.

    I have tagged the new demos with “_v1” to denote them from the old ones. The reason for this is that the new library is much slower at rendering the map tiles (at least for my demos) than the old one and you might want to use the old ones for now.

    Old ones:

    Simple demo Flex builder project in zipped form here.

    London BBC Jam Cams demo Flex builder project in zipped form here.

    I had a look at the new lib source code and for the Flex map it is still missing a “commitProperties” method to set the properties properly after the the map has been created. I feel responsible for this as I didn’t flag it up in the first place with the Modest Maps developers.

    I have not updated the online demos with the new code until I find out what is going on so remember that the online ones use the old code.

    Old Demos:

    Simple demo here.

    London BBC Jam Cams demo here.

    The missing code is in the map.as file for the Flex map (under the flex directory)

    
    override protected function commitProperties():void
    {
        super.commitProperties();
        
        if (_map!=null)
        {
            if (mapZoomDirty)
            {
                _map.setZoom(_zoom);
                mapZoomDirty = false;
            }
            
            if (mapCenterDirty)
            {
                _map.setCenter(_centerLocation);
                mapCenterDirty = false;
            }
            
            if (mapExtentDirty)
            {
                _map.setExtent(_extent);
                mapExtentDirty = false;
            }
            
        }
    }
    

    Without this the zoom-in/zoom-out functionality for the map won’t work. Neither will any attempt to set the centre have any effect.

    Flex: SPARQL Browser – Semantic Web Explorer v0.0.2

    I have updated my SPARQL browser application.

    Sample App

    It’s possible to specify a different endpoint other than just dbPedia now. I have not tested this exhaustively but I know it works against the GovTrack endpoint as well.

    I have separated the PREFIX definitions into a separate tab. This is to make the main query text area a bit tidier and since they are reused each time you make a query it makes sense (to me at least). The whole interface is a bit experimental.

    Old FB2 source code here otherwise right-click on the application to view the source (FB3 only folks). By default the project is setup to run in standalone mode. This is a FlexBuilder2 project.

    Even if you aren’t interested in SPARQL there are quite a few features about this application which you may find useful.

  • Features
    1. Uses Cairngorm framework
      Uses flexvizgraphlib for the graph component. The graph is built from a GML string built from data parsed from the resultset XML
      Uses the IFrame to render any URI’s which point to a web page
      I have implemented a proxy to fetch the result set. This is a Python script and has some other goodies which were developed as part of gTraffic such as a logging singleton. This is placed into the CGI area of your web space and referenced through the HTTPService definition. I could probably devote a whole post to how this works but have a look at the code. If you need a proxy then feel free to modify the once bundled here
      The application accepts SPARQL queries and parses the returned XML for results to display. The parser is not particularly sophisticated: for each result block it will attempt to generate top level node from the first URI it finds and then generate child nodes for subsequent literals and any further URIs. Any result node which shares a child URI with another result node will be connected in the graph. In this way it is possible (or so I hope) to see multiple connections between results in a way that a table wouldn’t show. The success of this approach does depend in the query and I am not an expert on SPARQL but I think it might have some merit.

  • Notes on Usage
    1. You need a full URL for the endpoint. This includes the “http://” part.
      You will usually find the PREFIX definitions on the endpoint web page
      The LIMIT can be switched off but try keeping it until you are happy the result set isn’t too
      large
      You can find a list of endpoints here. Some of these no longer work.

    Update #1

    I have tried these endpoints and they work (after a fashion, some of the URIs go nowhere).

    URL: http://revyu.com/sparql
    Welcome/Docs: http://revyu.com/sparql/welcome

    URL: http://www.govtrack.us/sparql
    Doc/webform: http://www.govtrack.us/sparql.xpd

    I’ll add to this list as I try them

    Update #2

    I have updated the application