【D3.js】Gunma.webのソーシャルグラフ作ってみた。

最終更新日

ソーシャルグラフには浪漫があるよね。
colormap000002

ソーシャルグラフを作ってみたかったので、Gunma.webに参加されたユーザーのグラフを作ってみました。
ユーザー間のリンクは、同じイベントに参加している回数が多いほど太く表示されます。
アイコンやユーザー名をクリックするとリンクが強調(赤)されます。
(アイコン画像はATNDから直で読み込んでいるので、そのうち弾かれるかも)

Gunma.web Social Graph
激重です。できればChromeで見てやってください。

Gunma.webについてはこちら

やったこと

  1. ATNDからイベント参加ユーザの取得
  2. イベントに参加したユーザーの組み合わせ(Combination)リスト作成
  3. 重複する組み合わせをカウント(同じイベントに参加している回数)
  4. 上記のデータをCSVで出力
  5. CSVファイルをD3.jsでJSONに変換
  6. Force Layoutdで表示

データセットの作成(手作業多め)

ATNDからデータを取得するスクリプトをnode.jsで作成します。
(APIを使えばよかったということに後で気付きましたが、後の祭り)

まずは、必要なライブラリをインストールします。

Atndスクレイピング用スクリプト(atnd.js)

 
実行

実行すると対象のATNDページから参加ユーザーを取得し、全ての組み合わせを出力します。
これをgunma.web~gunma.web#12まで繰り返し、全てのユーザー組み合わせを取得。

 
出力したテキストファイルをcatコマンドで一つにまとめます。

 
重複している組み合わせをカウントし、ユニークなユーザー組み合わせのみのリストに変換します

(これで計算あっているはず……たぶん)

 
作成したファイルをExcelで読み込み「データ→区切り位置」機能を使用して「重複カウント(value),ユーザー(source)、ユーザー(target)」のリストに変換しcsvで保存します。
出来上がったのが下記csvファイルです。
data.csv

このcsvをForce Layoutで使用できるようにJSONに変換します。
d3.jsを使って変換スクリプトを作成しました。

example convert.html
上記のデータをjsonファイルとして保存して、データ作成は完了です。

source,targetのリストからnodeとlinkを含むオブジェクトを作る作業については、D3 Tips and Tricks「Sankey Diagramsn」の章に詳しく掲載されていますので興味ある方は参照ください。

Force Layout 表示

Force Layoutについてはこちら

example

やってみてわかったこと

データセットを作るのが一番大変。
特に今回はwindows上で作業したのでSJIS-UTF8の変換を繰り返す羽目になってしまった。
nkfはやっぱり便利。
Force Layouは、うまく動かなかったときのデバッグが難しい。

本当は、過去群馬で開催されたイベント全てからデータを取ろうと思っていたのですが、力付きました。
まぁ、これ以上データが多くなると見づらくなるし。
愚直にデータを全て表示するのではなく、程よく省略してフォーカスが当たったときに詳細を表示する(ズーム/パン)処理を行いたいのですが、なかなかうまくいきません orz

その辺の処理がちゃんとできるようになったら再挑戦したいと思います。