97b0e2aa.pngバネモデルによるグラブ描画をするJavaScriptライブラリを書きました。
サンプルはこちら http://sawamuland.com/graph/sample.html

バネモデルの基本は2つのノード(点)がつながれている場合、そこにバネがあるとして力(内向きまたは外向き)を計算し、 さらに自分とつながっていない全てのノードから距離に応じた斥力(反発する力)を受けるとして位置の移動を繰り返します。 つまり、つながれた2点が近すぎる場合は反発し、遠い場合は引き合い、つながれてない他の点からは等しくはなれようとするため多くのエッジ(線)を持つ集合が固まり、線が少ないノードはそこから離れて行きます。

この実装ではバネの力は log( ノード距離 / バネの長さ ) に適当な係数をかけて計算してます。 また、ほっておくといくらでもループしちゃうのでループ回数に制限をかけています。(なので形もややあやうい)
JSファイルはこちら、ご自由にご利用ください。
使い方はこんな感じ:

var g = new Graph("graph"); // div要素のIDを

//ノードの作成
var n1 = g.createNode("john",{ backgroundColor: "red" }); //引数は innerHTML,styleオブジェクト
var n2 = g.createNode("paul",{ backgroundColor: "green" });
var n3 = g.createNode("ringo",{ backgroundColor: "pink" });
var n4 = g.createNode("george",{ backgroundColor: "blue" });

//ノード同士をつなぐエッジの作成
g.connect(n1,n2);
g.connect(n1,n3);
g.connect(n2,n3);
g.connect(n2,n4);

//移動開始
g.move();



TODO:
 力の計算はこんなんでいいのか?
 もうちょっと早いアルゴリズムにする?
 ノードの質量なども考慮できるようにする?

#バネモデルについて詳しく知りたい方は、グーってください:p