ccchartでヒートマップを描いてみる #JavaScript

また長いこと投稿していなかったのですが、尊敬する及川さんがQiitaに入られたので記念カキコ。Qiitaの益々の発展を祈念いたします。

さて、最近　github の /toshirot/ccchart に置いてから多少マメに更新している ccchart の v1.12 でヒートマップを実装しました。

こんな感じです。

あるいは、写真を埋め込んでこんなこともできます。

スクリプトのサンプルはたとえばこんなです

html

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>

<script>
var chartdata1 = {

  "config": {
    "title": "heatmap",
    "type": "heatmap",
    "bg":"#eee"
  },
  "data":[
    ["X", 0, 48, 48, 228, 210, 177, 203, 207, 188, 191, 206, 206, 184, 195, 148, 212, 212, 210, 191, 214, 221, 196, 202, 200, 205, 196, 214, 195, 214, 165, 183, 175, 170, 187, 168, 167, 162, 166, 170, 168, 181, 173, 156, 149, 132, 167, 158, 168, 153, 107, 133, 164, 97, 114, 171, 187, 162, 155, 150, 175, 178, 170, 149, 168, 149, 184, 168, 166, 170, 185, 168, 160, 162, 166, 182, 181, 163, 184, 155, 140, 147, 171, 184, 156, 153, 194, 185, 178, 180, 183, 153, 192, 179, 189, 186, 208, 187, 184, 187, 175, 170, 200, 235, 166, 219, 159, 171, 168, 188, 188, 171, 192, 166, 164, 158, 173, 163, 182, 169, 163, 157, 182],
    ["Y", 0, 45, 144, 137, 137, 121, 122, 133, 126, 121, 119, 140, 129, 115, 99, 132, 130, 127, 123, 134, 135, 139, 130, 128, 129, 127, 131, 128, 126, 116, 121, 112, 107, 123, 107, 111, 107, 117, 116, 107, 114, 120, 108, 99, 85, 106, 102, 112, 95, 75, 88, 96, 69, 70, 100, 112, 102, 90, 99, 117, 114, 96, 96, 102, 103, 97, 103, 103, 112, 102, 109, 123, 103, 108, 111, 91, 94, 102, 104, 86, 91, 108, 114, 110, 102, 114, 116, 103, 113, 120, 98, 115, 110, 114, 118, 130, 114, 130, 115, 106, 109, 130, 131, 112, 130, 100, 114, 109, 115, 115, 115, 110, 101, 107, 111, 106, 109, 107, 104, 101, 95, 106]

  ]
};

ccchart.init("hoge", chartdata1);
</script>

キャンバス hoge に chartdata1 で指定したデータを表示しています。data の X と Y は位置情報です。

jsfiddleで上記コードをいじって表示の変化をみたい方は下記でどうぞ。
http://jsfiddle.net/UkdvS/588/

上の椅子の写真のように、もし、連続する画像の差分データを xy で渡してやれば写真の上にヒートマップを表示できるので、たとえば「防犯カメラの動体検知」などの表現も可能です。

もちろん、リアルタイムが売りのccchartなので、下記のリンクのようにリアルタイム受信して刻々と変化するヒートマップを見ることもできます。

この場合、データを送り出す WebSocketサーバーが別途必要になりますがその辺は「ccchartへWebSocketから流し込む」の記事などをご覧ください。

ちなみにバージョンは現在 ccchartは v1.12 になってまして update の履歴はこんな感じです。
http://ccchart.com/update.htm

最近は github も一応使わせて頂きつつあって ccchart はこの辺で見れます。
https://github.com/toshirot/ccchart

という感じで、まぁ、記事というより ccchart の暫定メモみたいなものになってしましましたが、何よりも Qiita は使いやすいなぁと再確認するなうでありました＾＾