Too Much Cookies Network

For the past couple of weeks i’ve been trying to find out how to visualize my referrer statistics visually. It would be a network nodes, each connected to some of the other nodes, via edges. The requirement of the visualization-engine would be the following:

• nodes must hold a specified distance to other nodes.
• interconnected nodes should try to get as close together as possible (they should still abide by the first rule)
• connections can be weighted, so that those with a higher weight would be preferred to be shorter
• each node has a mass - A higher mass results in slower motion and more stability.
• nodes can be fixed (not moving)
• the space used by the entire network should be minimized

To see an Example of my own implementation so far:

node1.svg
To view the example either Firefox >1.5 or Internet Explorer + ASV is requiered. To run the demo, just press the button “Press me”. Pressing it again will refine the result.

I have been reading many articles, technical websites and documentations trying to find a “simple” algorithm that could meet the requirements. To begin with i didn’t want to be able to drag the nodes around. It would be sufficient to just have them aligned according to the requirements at startup.

Yet the easiest way i found is to model the nodes as physical masses and the edges as springs. Then one would have to run a couple of iterations, until the system proves to be stable. During each iteration for every node the resulting force would be calculated and it would be decided by how much and in what direction the node would travel.

What’s still missing?

much!!

• not-connected nodes could overlap (i’m still thinking about which way to go to detect collision, because i don’t want the whole network to wedge on one node not “getting through”.
• though edge-weighting is already implemented, it’s not easy to alter it after creating the edge.
• edge-length should be the length outside the node, so that one can have bigger and smaller nodes, without having to redefine the edge-length every time.
• some optimization required, so that the code would run smoothly with any given number of nodes/connections. Of course that is limited to memory and cpu-power, but at this time there is still much, one can get out of the system(s)
• i wasn’t able to set a timeout, so that the system would update itself automatically. have to look into it again..

For Coders: this is my first test of object-oriented programming via JavaScript, so don’t be too harsh with me please. But Please do comment on the code, so that hopefully it gets better with the time. And of course i’d like to hear what anyone else does with the code..