Data Visualization in WPF using Graph#

I’m currently working on a prototype for my current project to visualize a set of data in a way that can give a user a quick overview of the relationships between objects within a “project”.

In the product I work on there is a lot of inter-related data that users are exposed, but it is still fairly difficult for users to get the “big picture” rather quickly. Instead they currently rely on a set of reports and data dumps to help them visualize the data.

I thought I would generalize this a bit (names removed to protect the innocent) and showcase a use of a great open source library – Graph# – for visualizing data. Nothing fancy, but I believe showing the data in an additional view, will enable someone to better understand the relationships between the items at a glance.

First some background is in order. For the purposes of my project I have a pseudo-hierarchical set of items that can be linked to one another. So our model can have both hierarchical relationships as well as associative relationships.


Demo Background

To make this a bit more concrete I will use an example right out of software development. We will have a software “project” we are working on with the following item types:

  • Project – deliverable that “contains“ features.
  • Feature – a feature “contains” tasks. A feature may also have a document associated with it.
  • Task – a task is the low level unit of work being done. A task may also have issues “associated” with it.
  • Issue – a problem or defect found in a task. A single issue can pertain to multiple tasks.
  • Document – a textual description of something. Can be associated to a task.


    The design is fairly straight forward in that I’ve defined a few abstract classes that represent a “Model” and “ProjectItem”. Deriving from these I’ve created classes for each of the above item types we will support.

    The GraphViewFactory component is the bridge between the”Model” implementation and the objects the graph needs. It will walk the model and flatten it, producing a set of vertices and links to add to the graph.

    From there the graph control is used to layout and render the graph. The demo application has a few tweakable items available in the UI, such as the Layout algorithm. Additionally you can drill down into a node to get a rendering of that node, it’s sub-tree and it’s immediate parent (to go back up the tree).

    Incidentally, the data is loaded from an XML file – SampleData.xml. This was my first attempt at using LINQ to XML.


    The Finished Product


    While not awe inspiring perhaps, it does showcase the ease with which normal data can be visualized in a different way. The project I am working on actually has spiffy icons, tooltips and details panels for each item with the graph.

    Some of the interesting ways we are considering using visualization

    • Give users the ability to see “covered” items.
      • For instance, in our demo we could visualize the number of issues being generated and easily see which items were getting a lot of defects, or see which items do/don’t have enough “Documentation”
    • The ability to see transitive links. Currently systems are fairly good at showing you a relationship between an item and other items in a many to many relationship. With visualization we can take them to the next level by seeing the connections of the connections of…

    Screenshot #1


    Screenshot #2


    Download the source for the demo here

    Digg This