HTML5になってWebの表現力は格段に向上しています。特にJavaScriptと絡めてインタラクティブに変化するチャートはインパクトが強く、ユーザへの訴求力も強くなります。しかし作るのが難しいというのが問題です。 解決策としては様々なチャートライブラリを知り、表現したいものに合わせてライブラリを選択するのが良いでしょう。ということで今回はSankeyを紹介します。

Sankeyの使い方

Sankeyで描けるチャートです。左右をつなぐのですが、途中に別なノードを差し込めます。

マウスオーバーで特定のノード部分だけハイライトできます。

動かしているところです。

Sankeyでは左右にノードを配置して、N対Mでコネクトできます。それをマウスオーバーでハイライトすることで見たい部分を目立たせることができます。複雑な情報ほど分かりやすくなるのではないでしょうか。

SankeyはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

tamc/Sankey @ GitHub tamc/Sankey: A javascript library for drawing sankey / flow diagrams