Graph visualization with Neo4J and Arbor.js

As you might have gathered from my previous post, I have been tinkering with Neo4J lately and I am beginning to appreciate the power and elegance of graphs.
I also came across Arbor.js and was bowled over by it. Loved the force directed layouts and the fact that if you are patient, you will watch your nodes traveling far and wide to settle in their final destination. No need to drag, drop or re-organize the graph- what emerges is a visual pattern, obvious to the eye. I can think of tons of usages for such a visualization, but thought I'd start with something simple just to get the feel of it.


I decided to model a simple organization chart or graph. So off I went to create that model in Neo4J, fed data into it, and my graph was ready very quickly.
On to Arbor.js- I must admit, I was rather stumped, even with the reference doc they publish. I did not know where to start and where to end- of course, my lack of knowledge around jQuery syntax contributed a lot.


So, I did the next best thing which was to get the sample project working locally. Tweak main.js to play with the layout and understand what's really happening. Scroll right down to the $(document).ready function to see the 'ParticleSystem' getting initialized. The sample project initializes with three parameters: repulsion, stiffness and friction. There are more available like frames per second and precision, but I have not tried them yet. Play with those values to see how they affect the graph. I settled on: var sys = arbor.ParticleSystem(500, 600, 0.5)
I also left gravity=true since I definitely want the settling graph.


You can then add edges and nodes to the ParticleSystem object you just initialized.
Adding a node is as simple as sys.addNode(name,data).
The name you supply functions as an identifier of the node and the data is an object you can use to associate any set of parameters with this node. These are especially useful when you need additional information about the node to render it- for example, set its color.
Adding an edge is just as simple: sys.addEdge(source,target,data). Source and target nodes are identified by their node names, and data again is an object of parameters to associate with the edge.


Now the sample project displays little black boxes for nodes. I was looking for something more like circular nodes with their labels in them- much like the arbor.js home page.


Just adding nodes and edges does not do anything- the ParticleSystem needs a renderer to well, render the graph. The arbor.js reference will tell you that you need to create an object with two methods- init and redraw, and set your ParticleSystem renderer to this object.
If you look at main.js, this is exactly what it does (viewport is the canvas object in which to render the graph)-

sys.renderer = Renderer("#viewport")

The init method in this case simply sets up screen dimensions.
The redraw method is the one responsible for painting nodes and edges. You will see those in the
particleSystem.eachEdge and particleSystem.eachNode loops.

So then this is the place to tweak the actual representation of nodes and edges.
Borrowing from the source of the arbor.js home page, I changed the code to:
particleSystem.eachNode(function(node, pt){
        
var w = Math.max(20, 20+gfx.textWidth(node.name) )
if (node.data.alpha===0) return
  if (node.data.shape=='dot'){
      gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:node.data.alpha})
      gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
      gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
  }else{
      gfx.rect(pt.x-w/2, pt.y-8, w, 20, 4, {fill:node.data.color, alpha:node.data.alpha})
      gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
      gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
  }

})
You will note that the color of the node is pulled from the data object attached to the node.
The font, size, width etc. can all be parametrized by setting them in the data object when you create the node.
This example uses the graphics library, so be sure to include graphics.js in your html.


For the edges, I changed the color and also parametrized the thickness of the connector line by the width parameter.
particleSystem.eachEdge(function(edge, pt1, pt2){
if (edge.source.data.alpha * edge.target.data.alpha == 0) return
      gfx.line(pt1, pt2, {stroke:"#151B8D", width:(edge.data.weight/2), alpha:edge.target.data.alpha})

       })


That is sufficient for a basic graph representation. Now to get the data out of Neo4J and into the graph.
The ParticleSystem has a graft method which accepts an object in the form {nodes:{}, edges:{}}.
These nodes and edges are added to the particle system.
I navigated through my Neo4J graph and spat out the data in this json like format.

Then, in the JS, you simply do a
var data = $.getJSON("orgChart.json",function(data){
  sys.graft({nodes:data.nodes, edges:data.edges})
})
and you're done.
Just make sure you enclose each attribute in quotes- for example, color and shape in the code below.
And it also freaks if you supply a .8 instead of a 0.8 for the length attribute in this example.


The final graph rendered in my browser looks like this(click to enlarge)-

This really just scratches the surface of what you can do with arbor.js
Add to it the various types of graphs or models you can extract out of Neo4J, and you could build some great stuff!


orgChart.json contains the following-
{"nodes":{
   "Aidan":{"color":"green", "shape":"dot", "alpha":1},
   "Sofia":{"color":"green", "shape":"dot", "alpha":1},
   "Liam":{"color":"GoldenRod", "shape":"dot", "alpha":1},
   "Charlotte":{"color":"green", "shape":"dot", "alpha":1},
   "Noah":{"color":"GoldenRod", "shape":"dot", "alpha":1},
   "Ava":{"color":"green", "shape":"dot", "alpha":1},
   "Jackson":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Addison":{"color":"green", "shape":"dot", "alpha":1},
   "Ethan":{"color":"green", "shape":"dot", "alpha":1},
   "Olivia":{"color":"green", "shape":"dot", "alpha":1},
   "Kayden":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Amelia":{"color":"green", "shape":"dot", "alpha":1},
   "Mason":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Lily":{"color":"green", "shape":"dot", "alpha":1},
   "Logan":{"color":"green", "shape":"dot", "alpha":1},
   "Isabella":{"color":"green", "shape":"dot", "alpha":1},
   "Jacob":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Emma":{"color":"green", "shape":"dot", "alpha":1},
   "Benjamin":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Abigail":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Caleb":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Scarlet":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Owen":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Audrey":{"color":"GoldenRod", "shape":"dot", "alpha":1},
   "Gavin":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Grace":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Connor":{"color":"green", "shape":"dot", "alpha":1},
   "Claire":{"color":"GoldenRod", "shape":"dot", "alpha":1},
   "Riley":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Emily":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Nolan":{"color":"lightblue", "shape":"rectangle", "alpha":1},
   "Quinn":{"color":"red", "shape":"dot", "alpha":1}
},
"edges":{
   "Quinn":{"Liam":{"length":2.5,"weight":2},
           "Audrey":{"length":2.5,"weight":2},
           "Noah":{"length":2.5,"weight":2},
           "Claire":{"length":2.5,"weight":2}},
   "Liam":{"Sofia":{"length":2.5,"weight":2},
           "Ethan":{"length":2.5,"weight":2},
           "Amelia":{"length":2.5,"weight":2}},
   "Audrey":{"Aidan":{"length":2.5,"weight":2},
               "Ava":{"length":2.5,"weight":2},
           "Jackson":{"length":2.5,"weight":2}},
   "Claire":{"Charlotte":{"length":2.5,"weight":2},
           "Olivia":{"length":2.5,"weight":2}},
   "Noah":{"Addison":{"length":2.5,"weight":2},
           "Kayden":{"length":2.5,"weight":2}},
   "Olivia":{"Mason":{"length":2.5,"weight":2},
           "Lily":{"length":2.5,"weight":2}},
   "Ethan":{"Logan":{"length":2.5,"weight":2},
           "Isabella":{"length":2.5,"weight":2}},
   "Addison":{"Jacob":{"length":2.5,"weight":2},
           "Emma":{"length":2.5,"weight":2},
           "Benjamin":{"length":2.5,"weight":2}},
   "Emma":{"Abigail":{"length":2.5,"weight":2},
           "Caleb":{"length":2.5,"weight":2}},
    "Logan":{"Scarlet":{"length":2.5,"weight":2},
           "Owen":{"length":2.5,"weight":2},
           "Gavin":{"length":2.5,"weight":2}},
    "Lily":{"Connor":{"length":2.5,"weight":2},
           "Grace":{"length":2.5,"weight":2},
           "Nolan":{"length":2.5,"weight":2}},
    "Connor":{"Riley":{"length":2.5,"weight":2},
           "Emily":{"length":2.5,"weight":2}},
   }
}