先日、「イベントや勉強会のソーシャルグラフを可視化して「ぼっち」具合を覚悟する」で例題に取り上げた #pyhack に初参加しています。が、なんとお誘いいただいた #TokyoSNA の方々がのきなみキャンセル。覚悟していた以上に「ぼっち」www なにもかもがとても新鮮!とても楽しいです!
というわけで、下のグラフは2012年10月20日に開催の「(第24回)Python mini Hack-a-thon」の最終参加者リストをConnpassから取得しなおして、Twitterのフォロー関係を改めてビジュアライズしてみたものです:
var w = document.body.clientWidth, h = document.body.clientHeight, colors = pv.Colors.category19();
var vis = new pv.Panel() .width(600) .height(600) .fillStyle("white") .event("mousedown", pv.Behavior.pan()) .event("mousewheel", pv.Behavior.zoom());
// See http://vis.stanford.edu/protovis/jsdoc/symbols/pv.Layout.Force.html // for parameters that affect the forces that drive the layout var force = vis.add(pv.Layout.Force) .chargeConstant(-400) .chargeMinDistance(10) .springLength(250) .nodes(data.nodes) .links(data.links);
force.link.add(pv.Line);
force.node.add(pv.Dot) .size(function(d) (d.linkDegree*10 + 100) * Math.pow(this.scale, -1.5)) .fillStyle(function(d) d.fix ? "brown" : colors(d.group)) .strokeStyle(function() this.fillStyle().darker()) .lineWidth(1) .title(function(d) d.nodeName) .text(function(d) d.nodeName) .event("mousedown", pv.Behavior.drag()) .event("drag", force) .add(pv.Label) .text(function(d) d.nodeName);
vis.render();
前回と同様に、ProtovisのJavaScriptで動的に描いています。マウスなどで対話的に動かせます。ノード(丸のことですね)をクリックしたまま引っ張ればネットワークの形を変えられます。背景をドラッグしたり図の上でスクロールアップ/ダウンしたりすれば、グラフ全体を移動したり拡大縮小したりもできるはずです。
さてそんなPython mini Hack-a-thon、昼ご飯に行った六本木のカレー屋さんも美味しかったです!