また長いこと投稿していなかったのですが、尊敬する及川さんがQiitaに入られたので記念カキコ。Qiitaの益々の発展を祈念いたします。
さて、最近 github の /toshirot/ccchart に置いてから多少マメに更新している ccchart の v1.12 でヒートマップを実装しました。
こんな感じです。
あるいは、写真を埋め込んでこんなこともできます。
スクリプトのサンプルはたとえばこんなです
<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 は使いやすいなぁと再確認するなうでありました^^