plotly.jsはオープンソースになっていると聞いて使ってみた。
ヒートマップで砂嵐を表現してみた。
この例はかなりCPUの負荷が大きい。
しかし，簡単に一応動かせるレベルで仕上がる。
（layoutのheightは指定しなければ勝手に決められる。）
heatmap以外にたくさん格好の良いチャートが作れるらしい。
heatmapでreact()を実行する場合には注意が必要。dataのオブジェクトの変更を見て更新しているようだ。
つまり，下の例では，data = [ { zmin:0, zmax:10, z: z, type: 'heatmap' } ];としているがこの，zのオブジェクトの参照を変えずにzの要素だけを変更してreact('mydDiv', data)など実行した場合には表示の更新が後回しにされる可能性が高い。
変更を監視して必要があれば更新するのだが，どうも変更監視のコードの作り込みが簡易的に（よりコンピュータに負荷をかけないように）作られているようだ。
<!DOCTYPE html>
<html>
<head>
<script src="js/plotly.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
var layout = {
colorbar: {
autorange: false,
range: [0, 10]
},
height: 600
};
var z = [];
for (var i = 0; i < 250; i++) {
var zz = [];
for (var j = 0; j < 120; j++) {
zz.push(10 * Math.random());
}
z.push(zz);
}
var data = [
{
zmin:0,
zmax:10,
z: z,
type: 'heatmap'
}
];
Plotly.newPlot('myDiv', data, layout);
setInterval(function() {
var z = [];
for (var i = 0; i < 250; i++) {
var zz = [];
for (var j = 0; j < 120; j++) {
zz.push(10 * Math.random());
}
z.push(zz);
}
var data = [
{
zmin:0,
zmax:10,
z: z,
type: 'heatmap'
}
];
Plotly.react('myDiv', data, layout);
}, 500);
</script>
</body>
</html>
