I recently used Prefuse’s Flare. It is a data visualisation package that has some really nice features.
Click and drag the nodes, if can catch them!
Here is a basic example of what I built and then extended for the job.
package com.kafkaris
{
import flare.physics.Simulation;
import flare.vis.controls.DragControl;
import flare.vis.controls.HoverControl;
import flare.vis.data.Data;
import flare.vis.data.NodeSprite;
import flare.vis.operator.layout.ForceDirectedLayout;
import flare.vis.Visualization;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.geom.Rectangle;
public class Main extends Sprite
{
public function Main()
{
if (stage) init()
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// all visualisations need a Data object
var data:Data = new Data();
// set the node defaults
data.nodes.setDefaults( {
"x": stage.stageWidth,
"y": stage.stageHeight,
"shape": "circle",
"size" : 2,
"mouseChildren": false
});
// set the edge (lines linking the nodes) defaults
data.edges.setDefaults( {
"lineWidth": 1,
"alpha": 1
});
// create 10 nodes in the data
for (var i:int = 0; i < 10; i++)
{
data.addNode();
}
// randomly link the nodes
for (var j:uint = 0; j < data.nodes.length; j++)
{
var k:uint = j + 1;
if (k == data.nodes.length)
{
k = 0;
}
if (j % 4 == 0)
{
data.addEdgeFor(data.nodes[j], data.nodes[Math.round(Math.random() * data.nodes.length)]);
}
data.addEdgeFor(data.nodes[j], data.nodes[k]);
}
// create the visualisation that the data will be held by
var vis:Visualization = new Visualization(data);
// keeps the nodes in an area with a 50px margin
vis.bounds = new Rectangle(50, 50, stage.stageWidth - 100, stage.stageHeight - 100);
// enables the nodes to be dragged by the mouse
var dc:DragControl = new DragControl(NodeSprite);
vis.controls.add(dc);
// enables the node to move to the front when the mouse moves over it
var hc:HoverControl = new HoverControl(NodeSprite, HoverControl.MOVE_TO_FRONT);
vis.controls.add(hc);
// additional tweaks to how the nodes interact
var sim:Simulation = new Simulation(0, 0, .1, -50);
// sets up the layout including some values
var fdl:ForceDirectedLayout = new ForceDirectedLayout(true, 1, sim);
fdl.defaultParticleMass = 10;
fdl.defaultSpringLength = 150;
fdl.defaultSpringTension = 1;
// adds the layout to the visualisation
vis.operators.add(fdl);
// kinda like the renderer
vis.continuousUpdates = true;
addChild(vis);
// enables you to click behind the bounding area.
stage.removeEventListener(Event.RENDER, vis.setHitArea);
}
}
}
Get the library here:
Flare – Data Visualisation
JK


