Background

This is not going to be a comprehensive blog post to start with, however I think it will become a subject that sits as a regular fixture on this blog. I’ve recently been looking at how to graph data, something I became interested some years ago when I saw a SVG diagram of a network map.

There are several projects I am working on that require some kind of network digram to be displayed specific to the problem domain I’m working in.

QuickGraph

Codeplex has a project that can be used to create the data graphs that will be used to generate the visualisation. Rather that talk about the usage too much here, I’d strongly recommend that you use the excellent documentation available from this site;

http://www.codeplex.com/quickgraph/

My example was created using peoples names and the links they represented within a family.

Essentially, it’s simply a case of adding the people as vertices and their connections as edges. This will represent the data graph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Create the graph
var graph = new AdjacencyGraph<string, SEdge<string>>();
 
// Add Vertices - These are the people
graph.AddVertex("Owen");
graph.AddVertex("Dan");
graph.AddVertex("Stephanie");
graph.AddVertex("George");
graph.AddVertex("Alex");
graph.AddVertex("Megan");
 
// Add the Edges - These are the links between the people
graph.AddEdge(new SEdge("Owen", "Dan"));
graph.AddEdge(new SEdge("Owen", "Alex"));
graph.AddEdge(new SEdge("Owen", "Megan"));
graph.AddEdge(new SEdge("Megan", "Dan"));
graph.AddEdge(new SEdge("Alex", "Dan"));
graph.AddEdge(new SEdge("Owen", "Stephanie"));
graph.AddEdge(new SEdge("Owen", "George"));
graph.AddEdge(new SEdge("Stephanie", "George"));
graph.AddEdge(new SEdge("Alex", "Megan"));

Microsoft GLEE

GLEE is a research project from Microsoft that has since become a commercial product call Microsoft Automatic Graph Layout (MSAGL). GLEE is still available for download, however this may change.

Download Microsoft GLEE

A GleeGraph Populator is required to fill the GLEE Graph with the vertices from my QuickGraph data graph.

At this point, I should say that it may be the case for this example that I don’t need to use QuickGraph, I’ll update as I learn more on this subject.

Once a the graph populator has been computed, the graph visualisation can be displayed in the GLEE control using the ShowDialog method of GleeGraphExtensions.

1
2
3
4
5
6
7
8
9

// Create the GleeGraph Populator
var gleeGraphPopulator = GleeGraphExtensions.CreateGleePopulator<string, SEdge<string>>(graph);
gleeGraphPopulator.Compute();
 
// Create the actual Graph from the poulater
Graph renderGraph = gleeGraphPopulator.GleeGraph;
 
// First attempt to Display graph
GleeGraphExtensions.ShowDialog(renderGraph);

The end result is shown below, the representation of the vertices and edges can be modified, I’ll be learning about this along the way and will do further posts.

Output from Microsoft GLEE

As can be seen from this image, you can zoom and drag the graph around. It can also be printed or saved to an image.

Watch this space….