仕事でちょっとネットワークの可視化をしたい場面に遭遇したので、先日果たしてtumblrにアルファリブロガーは存在するのかのあとでtwitterでkybintさんに可視化ツールをいろいろ教えてもらったのでちょっと試してみようとやってみたらUbigraphがとてもお手軽でよかったです。インストールからはじめて、自分が持っているネットワークデータを可視化する方法を理解するまで5分、はじめてでも10分もあれば自分のデータを可視化できます！
ダウンロードのページからバイナリをダウンロードします(でも悲しいことに今はOSX版とLinux版しかありません)。ダウンロードするページにインストール方法、起動方法、サンプルコードの実行方法が載っているので、とにかくそれをコピーしてターミナルに貼れば本当に何も考えないでもサンプルが画面で表示されるところまでいけます。
で、おおー、っと思ったところではじめて画面に出てきたものとサンプルのコードを見比べていくと、ほしい数だけ頂点を作って繋がっているぶんだけ頂点2つを指定して辺を作っていくだけでいいのがすぐ分かります。Ubigraphの実体は、視覚化したものを表示するXMLRPCサーバで、それにXMLRPCでリクエストを送ると動的にネットワークが変化していく仕組みになっていて、いろんな言語から使うことができます。perlの場合は
#!/usr/bin/perl
use Frontier::Client;
my $client = Frontier::Client->new( url => 'http://127.0.0.1:20738/RPC2';);
$client->call('ubigraph.clear', 0);
my $a = $client->call('ubigraph.new_vertex');
my $b = $client->call('ubigraph.new_vertex');
$client->call('ubigraph.new_edge', $a, $b)
こういうコードで、画面に頂点がふたつ生成されて、そのふたつが辺で結ばれます。
perlを使うなら実際はFrontier::ClientをオブジェクトっぽくラップしているUbigraphのほうがなじみやすいと思います。RubyはmootohさんのRubigraphがあります。
Ubigraphのコードが分かりやすい、といっても、ほかのツールも同じようなもので、どの頂点とどの頂点が結ばれているかのデータファイルを作ってツールに流し込むだけで単純さはほとんど変わりません。ただ、手持ちのデータからそのツール用のデータファイルを作るためのプログラムを書いてそれをツールに読ませてビュワーで再読み込みさせるのより、手持ちのデータに従ってUbigraphのAPIを呼ぶプログラムを書けばそれで画面に反映されるところは地味に面倒な手順が減っていいなと思いました。
ひととおり使い方が分かったので、前回の果たしてtumblrにアルファリブロガーは存在するのかのときに果たせなかったリブログされる様子のグラフも作ってみました。
Ubigraphは動的に変化するグラフを視覚的に見られるところが本当に素晴らしいのであって、こういうふうに動かない画像にすると全然魅力的に見えないんですが、ほんとはリブログされた時系列順で頂点が増えていきます。Ubigraphは次数(頂点から出ている辺の数)が多いものを中心にしてグラフがレイアウトされるので、なんか全ての始まりであるはずのところが、真ん中のほうにちょこっとついてるだけに見えちゃってますが、赤い球のところが一番はじめのpostです。
はじめにpostしたgipsさんからkielaさんがreblogして、そこから6人のひとに枝分かれして何人もの人を介して広がっていっているのが分かります(っていうのが初めてでも10分くらいで作れるので、ちょっとこれ見てみたいな、という時があったらぜひ試してみるのをお勧めします！)。
一部を拡大することもできます。
Ubigraphの神髄は動的に変化する様子が見られるところで、こういう変化しないものを見るときはレイアウトを細かく設定できるほかのツールのほうが優れてそうです。それでも、小さなネットワークであればUbigraphでも十分形を把握することはできますし、何よりとっときやすいところがよかったです。
Firebug+ubi.js
上のグラフはFirefox+FirebugでXMLHttpRequestを使ってUbigraphにXMLRPCリクエストを送信して作りました。
ほんとはFirefox3.1のクロスサイトXMLHttpRequestを使えたら、ウェブページに置かれたUbigraph用のjavascriptコードを読み込むだけでローカルのUbigraphを動かせるんですが、仕様が厳しくなってtext/xmlはリクエストを送られる側のサーバの許可なしで送れなくなったため*1、Ubigraph自身のページ(127.0.0.1:20738)でFirebugを開いてコードを実行しないといけません。
FirefoxでUbigraphを起動したあとFirefoxでhttp://127.0.0.1:20738/RPC2を開いてFirebugで下記のコードを実行すれば手元のUbigraphでリブログされていく様子を見ることができます。Firefox上でウェブにあるHTMLからデータを取り出してFirebugからUbigraphにデータを送れたらすごくスマートでいいなというわけでUnigraph APIのほんの一部をラップしたubi.jsというのgistに置いたので、ちょっとしたデータをちょっと見てみたいな、という時にはぜひUbigraphともども使ってみてください。
function s (u) {
var s = document.createElement("script");
s.src = u;
s.type = "text/javascript";
document.body.appendChild(s);
}
s("http://gist.github.com/raw/66201/b6784b8431305d74ec0c822f73e7b8de9aee95af/ubi.js");
s("http://re.ido.nu/action/73684294?callback=p")
var vt = {};
window.p = function(ret) {
var u = new Ubigraph();
u.clear();
ret.map ( function (d) {
if ( d.action == "liked" )
return;
// ignore multiple reblogs.
if ( vt[d.who] )
return;
var v = vt[ d.who ] = u.new_vertex();
u.set_vertex_attribute(v, "label", d.who);
u.set_vertex_attribute(v, "shape", "sphere");
if ( d.action != "reblogged" ) {
u.set_vertex_attribute(v, "size", 1.5);
u.set_vertex_attribute(v, "color", "#800000");
return;
}
if ( vt[d.from] && vt[d.who] ){
var e = u.new_edge(
vt[ d.from ],
vt[ d.who ]
);
u.set_edge_attribute(e, "arrow", "true");
u.set_edge_attribute(e, "arrow_position", "1.0");
}
} );
}