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

HeatCanvasはCanvasタグを使ったWebベースのヒートマップライブラリ。

HeatCanvasはHTML5/JavaScript製のオープンソース・ソフトウェア。大量のデータが位置情報と結びついている時、ビジュアル化に最適な手法と言えばヒートマップではないだろうか。Webサイトのクリック情報を投影したりするのにも使える。


ヒートマップを自作しようと思うと大変な苦労をするかも知れない。専用のソフトウェアを使うか、WebベースであればHeatCanvasを使えばスムーズに作れるかもしれない。

HeatCanvasはCanvasタグを使ってヒートマップをレンダリングするライブラリだ。デモではCanvas上を適当にクリックしてヒートマップを生成したり、ランダムなデータを使って作成する。何度もクリックを繰り返した部分が赤くなる仕組みだ。


クリックすると強く出る

多数のポイントがあると生成する際に若干の時間を要するようだ。HeatCanvasを真似すれば自分の持っているデータをヒートマップとして表示するのも可能だろう。Googleマップや他のレイヤーを表示するのにも対応している。位置情報や座標に基づいた大量のデータがあれば使ってみたいソフトウェアだ。


MOONGIFTはこう見る

Webサイトのクリックやマウスの動きをヒートマップに現そうと思ったら、JavaScriptでマウスの位置情報を適宜サーバに送信しなければならない。データ量も負荷も相当大きくなると思われるので、実際のデータ収集は慎重に行う必要があるだろう。

位置情報に基づいたグラフであれば簡単に取れるかもしれない。スマートフォンをロガーにすれば簡単だ。後はGoogleマップと組み合わせて表示すれば自分の行動履歴等が追えるようになる。ヒートマップは見る分には面白いが作るのは大変だったので、HeatCanvasのようなライブラリを覚えておくと使える場面がありそうだ。

デモ:Value

sunng87/heatcanvas - GitHub

 

MOONGIFTの関連記事

  • DevRel
  • Com2