ヒートマップの作り方

こんなヒートマップを作ったのでロジックの考え方をメモしておきます。

1.最小と最大値を定義

テーブルにある数字の内、最小と最大値を取得し定義します。

const min = 20;
const max = 1783;

2.色の定義を作成

セルを7色にするとして7つのレベルを表す配列を作ります。

const colorCount = 7;
let level = [];
for (let i=1; i<=colorCount; i++) {
    level.push( (max - min) / colorCount * i + min );
}
console.log(level); // [271.8571428571429, 523.7142857142858, 775.5714285714286, 1027.4285714285716, 1279.2857142857142, 1531.142857142857, 1783]

3.テーブル描画

テーブル描画ロジックの中に処理を追加します。

// 外側のループは省略...
let levelNum = 0;
for (let i in level) {
    if(cellValue <= level[i]){
        levelNum = i;
        break;
    }
}
tdDom.append(`<td class="heatmap${levelNum}">${cellValue}</td>`);