VivaGraphJSはオブジェクト同士の関連性をビジュアル化するJavaScriptライブラリです。

最近はソーシャルサービスが流行です。そこで求められるのはユーザまたはオブジェクト間の繋がりになります。それをビジュアル化するのに使えるライブラリがVivaGraphJSです。


Amazonの関連書籍をたどっていくグラフです。


書籍をクリックすると詳細が表示されます。


YouTube版。ノードをクリックするとその場で動画の再生ができます。


Facebookの友達情報の可視化です。


表示方式も様々にあります。大量の情報だとレンダリングが重たいのが難点ですが、インパクトがあります。


より表示したい情報に合わせたアクションを選んでみてください。


こんな密集するパターンも。

VivaGraphJSの使い方はシンプルで、ノードとなるオブジェクトを追加していった後、ノード間のつながりをリンクとして追加していくのみです。実際の描画はVivaGraphJSに任せられます。SVGの他、WebGLを使った描画にも対応しています。

VivaGraphJSはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

レコメンデーションやソーシャルグラフを使ったコンテンツの提案はユーザの趣向に伴ったものが多いのでPV増や購入数増につながる可能性があります。重要なのは利用者のアクションを逐一記録し、それを別な利用者の動きに合わせて最適化していくというシステムです。

問題があるとすればプライバシーに触れない範囲で行わなければならないということでしょう。過剰な情報収集は禁物です。また情報は匿名化し、万一の時にも利用者と紐づけられないようにしなければなりません。意外と面倒ですが、そこまでするだけの価値があるはずです。

デモ3:http://www.yasiv.com/facebook Facebook Friends Visualization - YASIV

デモ1:Amazon Products Visualization - YASIV

デモ2:Youtube Related Videos Visualization - YASIV

デモ4:Graph Viewer Test

anvaka/VivaGraphJS · GitHub