Download Source Code: SilverlightRadialGraph.zip [582 KB]

Recently I've been looking into some challenges with data visualization - particularly with viewing relationships between a large number of entities.  Social Networking is a classic example.  A great example of how to visualize a large network of "friends" on Facebook is to use the Nexus application (developed by Ivan Kozik):

Click to enlarge

This is very close to what I know as a "radial graph".  I couldn't find a good definition of a radial graph anywhere, but here is an academic publication that at least describes the concept: http://bailando.sims.berkeley.edu/papers/infovis01.htm

I decided to try and implement this type of radial graph using Silverlight.  Given a set of entities that are connected to each other, I figured it should be easy enough to come up with a basic algorithm to put this on a screen.

The general idea was to start with an initial entity and then compute and render its first "ring" of connections.  Then for each entity in the first ring, find its connections and create a second ring.  Entities can only be added to the graph once, so if an entity in the first ring is a connection of an entity in a fourth ring, the entity in the first ring is not added to a fifth ring. 

I used Silverlight user controls to represent an entity on the screen.  Each user control is placed using basic trigonometry computation and an constant radian increment on each ring for the spacing along the ring.  "Basic" trigonometry computation may be a contradiction in terms, but that's a different topic :)

Here's what it looks like:

The direct connections between each entity are drawn with a line.  When there are a lot of connections, it can be difficult to read or becomes a distraction.  There is a bit of eye candy in there though to help make the connection visualization easier: when you hover over an entity its direct connections are highlighted.  You can see this by looking at the selected (yellow) entity and its connections highlighted in green.

The model relies on a central entity to start with (highlighted in blue).  When you click on another entity, the screen re-draws and the graph re-builds around the selected entity.

I know you're probably looking for code, but I need to clean up some .NET namespaces first in order to protect the innocent :)  Stay tuned for an update...

--UPDATE--

Here is the source code as promised:

Download Source Code: SilverlightRadialGraph.zip [582 KB]