miilに投稿された写真をグラフで表示するChrome拡張機能『MiilGraph』をつくりました．
これとは全く関係ないテーマですが，大学の実験で結構ボリュームのあるデータを扱ったときに，個々の関連をグラフで可視化したら良い感じに全体が把握できて嬉しかったので，miilでも美味しそうな写真を見渡せればいいなと思いやってみました．
miilとは
食に特化したSNSです．タイムラインでは，毎日美味しそうな写真が流れてきます． miil.me
MiilGraph
下記サイトからインストールすると，Chromeのツールバーにアイコンが現れます．これをクリックすると新しいタブでグラフが表示されます．朝／昼／夕食に何を食べようか迷ったときに開いて探すのがおすすめ使用法です．
https://chrome.google.com/webstore/detail/miilgraph/cibedhmdbhajheahpmkoanebekgehpkgchrome.google.com
miilでは写真を投稿するときにユーザー自身がカテゴリを選択します．miilGraphはこのカテゴリ制度を利用させていただきました．画面の見方や操作方法は以下のとおりです．
- 青色のノード（まるぽち）：カテゴリ／サブカテゴリを表します．これをダブルクリックすると，さらに展開されます．
- オレンジ色のノード：ノードの一つ一つが投稿された写真を表します．マウスをホバーすると写真と投稿文がマウスポインタの右肩に小さくプレビューされます．
- ノードのラベル：サブカテゴリのノードの隣にあるラベル（サブカテゴリ名）をクリックすると，そのカテゴリに含まれて，かつ，現在画面にオレンジ色のノードとして表示されている写真のサムネイルリストが画面の左端に表示されます．
- サムネイルの上にマウスポインタを乗せると，該当するオレンジ色のノード付近に小さなプレビュー写真が表示されます．
- サムネイルをクリックするとmiilの写真ページが新しいタブで開きます．
ノードを摘んでドラッグすると，グラフ全体を移動させることができます．
D3.js
グラフを表示するために，D3.jsというJavaScriptライブラリを使用しました．D3というのは，Data-Driven Documentのことで，データ駆動型ドキュメントという感じに和訳できます．データに基いてドキュメントを操作する際に便利な機能がいろいろと備えられています．個人的に前々から気になっていました．様々な形態のグラフがサンプル（使用例）として紹介されています．今回はForce Layoutというものを使いました．
今後
- より快適にグラフを操作できるようにする工夫
- ユーザーノードを追加
- 独自カテゴリを追加
- 重心の変更
MiilGraph，どうぞお試しください．
