Flash graph browser

I would be posting more, but I’ve been learning Actionscript with the goal of making an interactive Flash interface to Freebase. I was inspired by seeing what Nick Thompson has done with mjt – basically how easy it is to formulate JSON queries to Freebase and get live data.

Why start from scratch? Prefuse is free, written in Java, and has a graph viewer that is impressively fast up to 100s of densely connected nodes – but it’s hard to throw things together using Prefuse if you are not familiar with Java. I want to put something simple and readable together so anyone can go to the code and experiment with different energy models (so you could put in LinLog for instance).

First there is this free JSON Connector for Flash by Joe Taylor, so you can bind data to visual elements.

==>

Second is putting together the basic layout. Above is what it does to randomly placed nodes. Below is the code I’ve got so far, which lays out a fully connected graph with the force on one node by another like [1/distance - distance]. The first part is the repulsion (not exactly Coulomb’s Law: 1/r^2) and the second part is the attraction (Hooke’s Law for springs). I worked off Wikipedia’s force-based algorithm article. This code works well up to 30 nodes, and I’ve got some ideas about not calculating forces if the nodes are too far away.

import flash.filters.GlowFilter;

var nodes:Array = new Array();
var forcex:Array = new Array();
var forcey:Array = new Array();
var velx:Array = new Array();
var vely:Array = new Array();

var distancex:Number;
var distancey:Number;
var distance:Number;
var force:Number;

var damp:Number = 0.8;
var deltatime:Number = 0.1;
var numnodes:Number = 25;

var glow:GlowFilter = new GlowFilter(0xFF0000, 0.8, 10, 10, 2, 3);

// attach nodes to the stage at random positions and put them in an array
for (var i:Number = 0; i<numnodes; i++) {
nodes.push(this.attachMovie(“symbolID”, “node”+i, i, {_x:Stage.width*Math.random(1), _y:Stage.height*Math.random(1)}));
}

// start all nodes free (not being dragged) and with no velocity
for (var i:Number = 0; i < nodes.length; i++) {
nodes[i].pressed = false;
velx[i] = 0;
vely[i] = 0;
}

this.onEnterFrame = function() {
for (var i:Number = 0; i < nodes.length; i++) {

// clear the force variables to use them as running sums in the loop
forcex[i] = 0;
forcey[i] = 0;

// sum the forces on node i from the other nodes
for (var j:Number = 0; j < nodes.length; j++) {
if (i != j) {
distancex = nodes[i]._x – nodes[j]._x;
distancey = nodes[i]._y – nodes[j]._y;
distance = Math.sqrt(Math.pow(distancex,2) + Math.pow(distancey,2))
force = 5000/distance – distance;
forcex[i] += force*distancex/distance;
forcey[i] += force*distancey/distance;
}
}

// update velocities
velx[i] = (velx[i] + deltatime * forcex[i])*damp;
vely[i] = (vely[i] + deltatime * forcey[i])*damp;

// update the position
if (nodes[i].pressed == false) {
nodes[i]._x = nodes[i]._x + deltatime*velx[i];
nodes[i]._y = nodes[i]._y + deltatime*vely[i];
}

nodes[i].onPress = function () {
this.filters = [glow];
this.pressed = true;
this.startDrag();
}

nodes[i].onRelease = function () {
this.filters = [];
this.pressed = false;
this.stopDrag();
}
}
};