ITエンジニア/デザイナ向けにオープンソースを毎日紹介

heatmap.jsはWebベースのヒートマップ表示ライブラリ。

heatmap.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。グラフには様々な種類があるが、とりわけ作るのが難しそうなグラフにヒートマップがある。一定の範囲における影響度を表現したり、ユーザの動きを可視化するのに使われたりする。


デモ

動線を可視化することによってサイトの流れを変えたり、店の商品配置を変えるデータにもなりえる。そんなヒートマップを表示するためのライブラリがheatmap.jsだ。

heatmap.jsはWebブラウザ上で指定した範囲(画像など)の上にヒートマップを表示するライブラリだ。マウスの動きに合わせたり、クリックでヒートマップデータを作ることが出来る。クリック場所をトラッキングしておけば、元データを集積することができるだろう。


地図との組み合わせ

画像だけでなく、地図の上にレイヤーとして表示するのもサポートされている。レイヤーは表示、非常時を切り替えるのも簡単にできる。事件の発生ポイントや事故の影響範囲をマッピングする際に役立つと思われる。Webサイト上でそうしたデータを公開する際に使ってみたいライブラリだ。


MOONGIFTはこう見る

ヒートマップの面白い所は、予想以上に想定していなかった結果が得られやすいということだ。数値の羅列だけ見ていてもなかなか特徴が見いだしづらい。発生頻度を色に置き換えることで、そのムラを可視化してくれるのがヒートマップだ。二次元的な偏差値とも言える。

heatmap.jsを使いつつ、さらに時間的要素を組み合わせたりするともっと面白い結果が得られるかもしれない。解析系Webサービスで結果の表示に使ったりすると面白そうだ。いざ作ろうと思うと難しいグラフだけに、heatmap.jsで簡単に実現できると幅広い利用が思いつくのではないだろうか。

デモ1

デモ2

デモ3

デモ4

デモ5

heatmap.js | HTML5 Canvas Heatmap Library

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2