Interactive Data Dependency Visualizations
Posted by Igor Moochnick on 03/01/2012
There is nothing aids better in understanding your data than a great visualization. Today there is an abundance of different techniques and tools, but today I’d like to show what is readily available for you in .Net.
Let’s take a simple example of understanding dependencies between your assemblies.
If you’re running in a Visual Studio and you have a full access to the source code, it is possible to see the referenced assemblies but it’s pretty hard to track what assembly depend on the assembly you’re working on. [Note: if you’re really in need of a ready made tool for this purpose, you can check the “Architecture Tools” for Visual Studio 2010 or NDepend tool]
A visualization like this is priceless:
On this graph you can see a graph of the assemblies dependencies for the Paint.Net. The snapshot above highlights the dependencies of the PaingDotNet.SystemLayer (highlighted in blue) by showing all the assemblies it depends on in “yellow” and all the assemblies dependent on it in “green”. The rest is left in a “gray” color.
Let’s see how you can create interactive dependency graphs for your data.
In my case I chose to use the QuickGraph module from CodePlex that can be download from NuGet [PM> Install-Package QuickGraph]. It provides a very simple yet robust API that allows you to create the directional and non-directional graphs in memory and then save them in different formats.
Here is a small example of how to create 2 vertices (V1 and V2) and a directional edge (from V1 to V2):
var graph = new AdjacencyGraph(); graph.AddVertex("v1"); graph.AddVertex("v2"); var edge = new TaggedEdge("v1", "v2", "depends"); graph.AddEdge(edge);
As soon as all the graph is created it can be serialized, for example, in a GraphML standard format like this:
using(var xwriter = XmlWriter.Create(...)) g.SerializeToGraphML(xwriter);
This is it. GraphML files can be opened by a range of different tools, but, if you’d like to show these visualizations in your WPF applications you can use a Graph# from CodePlex.
Here is a sample WPF application rendering a GraphML dependency graph:
As you can see, you don’t have to be afraid of interactive data visualizations but you can make your applications shine and provide useful and easily digestible information for your users.
Note: Source code for this article you can download …here from the Git repo…