概要
heatmap.js はその名の通りヒートマップを簡単に作成することができる JavaScript のライブラリです
とりあえずブラウザだけで動作する簡単なサンプルを作成してみました
環境
- Mac OS X 10.10.5
- Apache httpd 2.4.12
- heatmap.js 2.0.2
サンプルコード
作業は DocumentRoot 直下で行っているものとします
ライブラリのダウンロード
- mkdir heatmap
- cd heatmap
- wget ‘https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js’
HTML の作成
- cd heatmap
- vim index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>heatmap.js test</title>
<link rel="stylesheet" href="heatmap.css"/>
</head>
<body>
<div class="wrapper">
<h2>Demo</h2>
<div class="demo-wrapper">
<div class="heatmap">
</div>
</div>
</div>
<script src="heatmap.min.js"></script>
<script src="test-heatmap.js"></script>
</body>
</html>- vim heatmap.css
.demo-wrapper {
height:400px;
background:rgba(0,0,0,.03);
border:3px solid black;
}
.heatmap {
width:100%;
height:100%;
}CSS ファイルでヒートマップを描画する領域のサイズを定義しています
この定義がないと後述のエラーになるので注意してください
test-heatmap.js はこのあと作成します
JavaScript の作成
- cd heatmap
- vim test-heatmap.js
// minimal heatmap instance configuration
var heatmapInstance = h337.create({
// only container is required, the rest will be defaults
container: document.querySelector('.heatmap')
});
// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
// heatmap data format
var data = {
max: max,
data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
// heatmapInstance.setData(data);
heatmapInstance.setData(data);最後の heatmapInstance.setData でヒートマップを描画しています
その前に描画するデータ (data) をランダムで作成しています
動作確認
これで httpd を起動して http://localhost/heatmap にアクセスしてみてください
以下のようなサンプルが表示されると思います
画面をリロードするとヒートマップの状況が変わると思います
最後に
heatmap.js を使ってみました
あとはリアルタイムでの描画と組み合わせたり他の画像 (マップなど) と組み合わせると更におもしろい感じになるんじゃないかと思います
その辺も紹介できたら紹介したいと思います
Tips
実行時に Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. というエラーが発生することがあります
その場合はヒートマップを描画する div クラスのサイズを確認してみてください
今回は demo-wrapper -> heatmap というクラスの div タブに描画していますが、このサイズが 0 以上のサイズでないと当該エラーが発生します
なので、今回のサンプルだと CSS ファイルの適用をサボるとエラーが発生します
0 件のコメント:
コメントを投稿