関係性グラフをthree.js を使って3Dで可視化する

このエントリーをはてなブックマークに追加
2016年08月05日

ランダム配置

分析における可視化の重要さ

分析の対象となるデータはログデータであったり、購買ログであったり様々な種類があります。そのデータを整形し、エクセルなどに纏めます。ですが、漫然と数字を並べただけでは気づきを得るのは難しいでしょう。数値を直感的に解釈したり気付きを得るためには、棒グラフや折れ線グラフ、円グラフ、ヒートマップなど、様々な可視化の方法があります。

最適な可視化が、データ活用を促進することは間違いありません。

関係性技術でも同様に、距離やホップ数・つながりの数など、多様な指標をどう可視化するかは一つの課題です。

関係性グラフの可視化

今回は、会員の皆様に提供している「関係性オープンツール」上での表示の改善を目的として可視化の方法を検討しました。現行の可視化は 2D になっていますが今回の改善は 3D にすることから実施します。3D で表現しようと考えたのは、距離やホップ数など多面的な指標を2Dで表現することに限界を感じたためです。また、より実体に近い形で見せることで、もっと直感的な解釈が可能になると考えています。また、見栄えのするグラフをユーザーが自由に縦断できることで、楽しんで利用いただく効果もあると感じています。

WebGL 技術を使って関係性グラフを可視化してみることにしました。Javascript ライブラリを通して高レベル API として WebGL を利用することができます。今回はこうしたライブラリの一番人気である three.js を選択しました。

ノードの表示

まずは、関係性グラフのノードを可視化します。

1.メッシュ版

three.js の一般的な使い方は、ジオメトリー(形状)とマテリアル(表面素材)からメッシュ(物体)を作ることです。

例えば、以下のような表示を簡単に作れます。

three.js によってつくられた球体
three.js によってつくられた球体

ただし、このようになノードを100個作って描画した際、ブラウザが不安定な状態になってしまいました。 WebGL はビデオカードを使用しているので、パフォーマンスはユーザーのパソコンに依存します。 ゲーム用のハイスペックなパソコンなら問題ないと思いますが、一般的な企業や家庭で使われているパソコンではスムーズな表示が困難です。また、描画の高速性もほぼパソコンの性能に依存してしまいます。

2. CSS レンダラー

CSS に transform プロパティが加わり、回転フリップ等、CSS だけで簡単な3D アニメーションを実現できるようになりました。それを活用する three.js の拡張ライブラリである CSS3DRenderer.js を使ってみました。

CSS なので編集することも簡単で、パフォーマンス的にも圧倒的に優良です。

関係性の距離の反映

ノードを表示することができましたが、配置にはノード同士のリンクの強さはまだ実装していません。グラフを美しく描画するために力学モデルを使います。隣接ノードの配置を改善する Fruchterman-Reingold 法を実装した Javascript ライブラリを採用し、関係性技術の元である距離指標を反映させるためにこのライブラリを編集してみました。

ランダム配置
ランダム配置

「増上寺」を基点とした距離を反映する配置
「増上寺」を基点とした距離を
反映する配置


こうして、関係性の距離を反映したネットワークグラフを可視化することができました。次回は、ノード同士のリンクの表示に挑戦してみます。お楽しみに!

関係性コラムトップ

トップへ戻る