Wikipediaというグラフを描画するための面白いアルゴリズムを見つけたので、こいつをJavaScript(CoffeeScript)とcanvasで実装してみました。動作デモまずはこちらを御覧ください。5つの丸が、ふわふわ動いてバランス良い配置になると思います。用語の整理まず、グラフとは、折れ線グラフや円グラフのようなものではありません。頂点と辺の集合で構成されている方のグラフです。Wikipediaグラフとは、↑のグラフのことで、グラフの頂点のことをノードノードの点と点を繋ぐ辺をエッジと呼びます。基本的な理論のおさらい力学モデルのWikiに書いてある通りですが、少し噛み砕いてみます。ノードの座標決定にはクーロンの法則とフックの法則という法則が絡んできます。要はノード同士が引き合う/反発する力は徐々に安定へ収束するというだけです。この2つの法則を元に各ノード同士に働く力を計算し、その力を元に座標を決定します。コードはCoffeeScriptで書きます。y方向の速度の5つです。nodeごくシンプル。各ノードに固有のIDを持たせたい中にテキストを表示したいランダムに背景色をつけたいノード同士の接続情報をグラフではなくノード同士に持たせたいということで最終的に以下のような定義になりました。今回のキモ、力指向グラフです。balanceメソッドが、このグラフに属する各ノードの位置を計算します。targetNode.vyWikiに書いてある擬似コード、ほぼそのままだと思います。今回はcanvasで実装するので、さくっとcanvasのユーティリティを作ります。接続されているノード同士を全て線分で繋ぐ各ノードの背景を描画し、テキストを入れるということを行っています。↑の3つだけではクラス定義でしかないので、初期化します。最初の方はあまり意味がなく、canvasのサイズ調整をしているだけです。いくつかノードを生成して、そのノードのインデックスを渡して接続します。そのグラフのインスタンスをcanvasにadd(↑のCanvasクラスを参照)して、50ミリ秒ごとに再描画をかけています。50というコードになっております。コードベースでの解説となってしまいましたが、これで説明は以上です。一応zipのダウンロードリンクも貼っておきます。