6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-03-12

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

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

こんな感じです。

ccchart heatmap

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

ccchart heatmap photo

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

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 は使いやすいなぁと再確認するなうでありました^^

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?