スポンサーリンク
スポンサーリンク

ヒートマップを作成する

ヒートマップはウェブページで多くクリックされた箇所や、地面や人体の温度変化を把握したいときに使われます。
D3.jsにはヒートマップを自動的にlayoutする機能は備えられていません。ということは、棒グラフと同じようにじぶんっで描画する処理を作成する必要があります。ですが、複雑な処理は必要なく、ヒートマップはデータに合わせて四角形を表示すればいいだけなので処理は単純です。

今回は、下記のように0~9の数値を配列に代入してをベースにしてヒートマップを表示します。

ヒートマップは色の変化により強さを表していますD3.jsで色を扱う方法については、これまでの記事で色々と出てきました。D3.jsに予め用意されているカラーを利用する方法や、予め自分で用意する方法がありました。今回は、D3.jsの
カラー補完機能を用いて色の変化を表現します。D3.jsには以下の表に示すカラー補間メソッドがあります。

メソッド 説明
d3.interpolateRgb(a,b) aからbの色をRGBカラー空間で補間
d3.interpolateHsl(a,b) aからbの色をHSLカラー空間で補間
d3.interpolateHcl(a,b) aからbの色をHCLカラー空間で補間
d3.interpolateLab(a,b) aからbの色をL*a*bカラー空間で補間

たとえば、d3.interpolateHsl(“blue”,”yellow”)と指定すると、青色から黄色に色を補間します。
d3.interpolateHsl(“blue”,”yellow”)と
d3.interpolateRgb(“blue”,”yellow”)としたとき、得られるカラー情報は異なります。
d3.interpolateHsl()メソッドは戻り値が関数なので、指定した数値に応じて色が計算されます。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました