I had a chance this week between a zillion conference calls to put some time against Firefly. The objective for me this week was two fold: get the signature going and get the layouts under control.

What's a signature you ask? Well, I'm glad you asked. When we load the network, we perform a histogram on the entire network. This is shown in the Edge Influence Evaluation Tool midway down the left.

Here's a close up:

The signature shows the overall "connectedness" of the network. In this case, there are zero cases where nodes have zero edges and 4 cases where nodes share one edge, but the majority of the nodes have one edge and one (at the end) has 5 edges. Come to think of it - it's easier to show than to explain. I really like showing the histogram when allowing filters and I'll do the same for the metrics (coming soon - perhaps Monday). This provides a bit of analytics and I also have some thoughts about suggesting various layouts to the user based on the overall signature.

Speaking of Layouts, we added a bunch.

Here's the Fruchterman/Reingold Layout...

And the ever popular circular layout

A Grid Layout

A Sugiyama Layout (this reminds me of a suspension bridge with trusses)

A Sinusoidal Layout (There are Horizontal and Vertical variants of this)...

And a Spiral layout. Other layout methods can be added later.

There are a few things you notice about this work, one is that the comments get compressed and occlude one another. I plan on using the layout engine to attach the comments to the nodes and edges - since the layout engine is outside the data we can use it to layout things that are not exclusively nodes or edges - cool, huh?

The Layout engine is using NodeXL (codeplex) - this is available to all. It's exceptionally easy to use and very versatile. Here's a quick example of how to add nodes, edges and perform a layout (in C#) - notice that no visualization is occurring here - this is almost something that could be a service in the cloud.

using System;
using System.Drawing;
using Microsoft.NodeXL.Core;
using Microsoft.NodeXL.Layouts;

namespace PopulateAndLayOutGraph
{
class Program
{
    static void Main(string[] args)
    {
        // Create a graph.  The graph has no visual representation --
        // it is just a data structure.

        Graph oGraph = new Graph(GraphDirectedness.Directed);
        IVertexCollection oVertices = oGraph.Vertices;
        IEdgeCollection oEdges = oGraph.Edges;

        // Add three vertices.

        IVertex oVertexA = oVertices.Add();
        oVertexA.Name = "Vertex A";
        IVertex oVertexB = oVertices.Add();
        oVertexB.Name = "Vertex B";
        IVertex oVertexC = oVertices.Add();
        oVertexC.Name = "Vertex C";

        // Connect the vertices with directed edges.

        IEdge oEdge1 = oEdges.Add(oVertexA, oVertexB, true);
        IEdge oEdge2 = oEdges.Add(oVertexB, oVertexC, true);
        IEdge oEdge3 = oEdges.Add(oVertexC, oVertexA, true);

        // Lay out the graph within a 100x100 rectangle.  This sets
        // the IVertex.Location property of each vertex.

        ILayout oLayout = new FruchtermanReingoldLayout();

        LayoutContext oLayoutContext =
            new LayoutContext(new Rectangle(0, 0, 100, 100));

        oLayout.LayOutGraph(oGraph, oLayoutContext);

        // List the results.

        foreach (IVertex oVertex in oVertices)
        {
            Console.WriteLine("The location of {0} is {1}.",
                oVertex.Name,
                oVertex.Location);
        }
    }
}
}

Special Thanks to Tony Capone for his help on wiring this up.

Feel free to send your comments...the source code will be available soon.

I have a demo of Firefly today and decided that I would do a quick post to help myself "rehearse" a bit of the features we will talk through.

For the record, this is about half way through - which is code for "kind of messy". I prefer to code and get the hard stuff our off the way and wired up and then work through the polish and beautification stage. It drives some people batty...

First off let's take a look at the overall application...The red cross hair is used for selection purposes. Double-clicking on a node will center the cross hair on the node - we use animation to smoothly tween between positions and it comes across nice - almost like a video game. The view also shows commenting (with Text and Links - more on that in a minute) and Viewpoints - the large hollow white square on the left, bottom portion of the graph.

The Left control panel has been almost completely redone. Starting from the top left:

Size to Fit - reset the zoom to include the whole graph
Zoom Slider - that's kind of obvious
Pan & Selection modes - important when zoomed in and selecting and, well, er...panning.

Below that I have a button for persisting the zoomed and x,y positions of the current viewpoint. I'll be honest, I'm struggling a bit with the visual vocabulary and usability here. There's a part of me that says that the user should be able to draw the rectangle on the display and then name it - but dealing with different aspect ratios on X and Y for something like this will not be a WYSIWYG kind of thing.

Then we can customize the whole display. Show or Hide the nodes, the edges, the labels, the metrics (the blue ellipses) and the comments. You can also change the opacity and the color of all these things.

Here's an example of full opacity (solid) metrics, no nodes and faint edges and full labels. By altering these things you can get very different displays and focus on different elements of the graph in a better fashion.

There is now a search by name (just type the nodes name - or a part of it), or simply look it up and select it...

Here's Z selected - notice the red cross hairs...

OK, so comments are really important in this app. Comments can be added to a node, edge, or a region of the network.

Comments come in two flavors: Text and Links. Running your mouse over a comment expands it fully so you can read it. For a link, clicking on it will fire the browser and navigate you to that node - great for incorporating Reporting Services or any BI tool that accepts an ID for drilling down - this keeps the app light and flexible - almost like a visual wiki.

More coming, the layout and weighting aspects are next up.