Wednesday 9 May 2012

Visualizing TeamMentor Link's structure (with Graphs)

Here is one of my TeamMentor related tasks for this week:

1) Find a big data visualizer/manager make prototype. Scenarios:
  • Show me structure of the library (directed graph, start from principles policies, filter external out) and let me manipulate the relationships.
  • Show me everything from this article (click on an associated article and you can move to that one) and let me add links to other articles and external links.
  • Show me external links that are broken.
Basically what we are trying to solve is how to visualize (and eventually manipulate) the links/connections between the multiple articles.

To kick-start this process, I wrote an O2 script (using the O2 Graph Script environment that uses the Graph# control) to show the relationships between a small number of articles (see image and scripts below)

I really like this control since it allows for real-time manipulation, modification and extensibility of the graph (since this is a WPF graph with all edges being WPF controls).

I also would like to do this from the web, so I need to find a similar Javascript Library (let me know if you know of a good one)

Visualizing TeamMentor Article's Links

In the images below:

  • Each Article is represented by a Node
  • Each page (internal or external) that an Article 'links to' is also represented by a Node
  • There is a Edge created from an Article to its link (i.e. the arrow goes from the Article to the link)
    • If the article already exists in the Graph (i.e. we are linking to an internal Article that has already been mapped), then an edge is created between the two articles
  • When there are colors
    • Orange: represents the current node
    • Blue: represents links FROM the current node
    • Red: represents links TO the current node


Graph for 1 article (layout = Tree):



Graph for 3 articles (layout = ISOM):


Graph for 10 articles (layout = ISOM):



Graph for 20 articles (layout = ISOM):

Graph for 20 articles (layout = Circle)



O2 Script:

Here is the script that created these images: https://gist.github.com/gists/2640284