ヒートマップを作成する

2015年10月25日

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

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

	for( var i = 0 ; i < 96 ; i++){
		// 0～9までの値のどれかを格納
		arrData[i] = Math.floor( Math.random() * 10 );
	}

for( var i = 0 ; i < 96 ; i++){

// 0～9までの値のどれかを格納

arrData[i] = Math.floor( Math.random() * 10 );

}

ヒートマップは色の変化により強さを表しています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の色をLabカラー空間で補間

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

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ヒートマップを作成してみる</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{ width:160px; height:240px; border:1px solid black;}
		.block{ stroke:black; fill:none;}
	</style>
</head>
<body>
	<h1>ヒートマップの作成</h1>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ヒートマップを作成してみる</title>

<style>

svg{ width:160px; height:240px; border:1px solid black;}

.block{ stroke:black; fill:none;}

</style>

</head>

<body>

<h1>ヒートマップの作成</h1>

</body>

</html>

/*
	ヒートマップを表示
*/
	// HTMLファイルで設定した#graphの幅、高さを取得する
	var svgEle = document.getElementById("graph");
	var svgWidth = getComputedStyle( svgEle, null)
					.getPropertyValue("width");
	var svgHeight = getComputedStyle( svgEle, null)
					.getPropertyValue("height");

	svgWidth = parseFloat( svgWidth );   // 整数に変換する
	svgHeight = parseFloat( svgHeight ); // 整数に変換する

	var blockSize = 20;
	var arrData = [];

	for( var i = 0 ; i < 96 ; i++){
		// 0～9までの値のどれかを格納
		arrData[i] = Math.floor( Math.random() * 10 );
	}
	var maxVal = d3.max( arrData );

	var color  = d3.interpolateRgb("blue","yellow");
	var heatMap =  d3.select("#graph")
		.selectAll("rect")
		.data(arrData);

	heatMap.enter()
		.append("rect")
		.attr("class","block")
		.attr("x", function(d,i){
			return ( i % 8 ) * blockSize;
		})
		.attr("y", function(d,i){
			return Math.floor( i / 8 ) * blockSize;
		})
		.attr("width", function(d,i){
			return blockSize;
		})
		.attr("height", function(d,i){
			return blockSize;
		})
		.style("fill", function(d,i){
			return color( d / maxVal );
		})

	/*
		setIntervalメソッドを合わせることで
		定期的にヒートマップのデータを更新する
	*/
	setInterval(function(){
		for( i = 0 ; i < arrData.length ; i++){	

			// -2 ～ 0 の値をnに代入する
			var n = ( (Math.random() * 3 ) | 0 ) - 2;
			arrData[i] = arrData[i] + n;
			if( arrData[i] < 0 ) arrData[i] = 0;
			if( arrData[i] > maxVal ) arrData[i] = maxVal;
		}

		// 更新したデータをセットする
		heatMap.data(arrData)
			.style("fill", function(d,i){
				return color( d / maxVal );
			})
	},1000);

ヒートマップを表示

// HTMLファイルで設定した#graphの幅、高さを取得する

var svgEle = document.getElementById("graph");

var svgWidth = getComputedStyle( svgEle, null)

.getPropertyValue("width");

var svgHeight = getComputedStyle( svgEle, null)

.getPropertyValue("height");

svgWidth = parseFloat( svgWidth ); // 整数に変換する

svgHeight = parseFloat( svgHeight ); // 整数に変換する

var blockSize = 20;

var arrData = [];

for( var i = 0 ; i < 96 ; i++){

// 0～9までの値のどれかを格納

arrData[i] = Math.floor( Math.random() * 10 );

}

var maxVal = d3.max( arrData );

var color = d3.interpolateRgb("blue","yellow");

var heatMap = d3.select("#graph")

.selectAll("rect")

.data(arrData);

heatMap.enter()

.append("rect")

.attr("class","block")

.attr("x", function(d,i){

return ( i % 8 ) * blockSize;

})

.attr("y", function(d,i){

return Math.floor( i / 8 ) * blockSize;

})

.attr("width", function(d,i){

return blockSize;

})

.attr("height", function(d,i){

return blockSize;

})

.style("fill", function(d,i){

return color( d / maxVal );

})

setIntervalメソッドを合わせることで

定期的にヒートマップのデータを更新する

setInterval(function(){

for( i = 0 ; i < arrData.length ; i++){

// -2 ～ 0 の値をnに代入する

var n = ( (Math.random() * 3 ) | 0 ) - 2;

arrData[i] = arrData[i] + n;

if( arrData[i] < 0 ) arrData[i] = 0;

if( arrData[i] > maxVal ) arrData[i] = maxVal;

}

// 更新したデータをセットする

heatMap.data(arrData)

.style("fill", function(d,i){

return color( d / maxVal );

})

},1000);

-D3.js
-ヒートマップ

comment コメントをキャンセル

: D3.js

D3.jsって何？

D3.jsとは、データを視覚的に表現するためのJavaScriptライブラリです。 D3.jsが表現できるグラフは様々です。 ★注意この「D3.js」のカテゴリーの記事では、JavaScriptの基 ...

: D3.js

折れ線グラフの縦方向の動きを分かりやすくする

縦方向の表示を２倍に、目盛り(縦、横軸)を表示するグラフの変化を大きく見せるために縦方向の表示を２倍にします。サンプルコードの実行結果はこちら [crayon-66287e0d82c9f91028 ...

D3.js

JSONみたいなデータを読み込んでグラフにする

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>折れ線グラフの線を色々な形にする</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:400px;
		height:300px;
		border:2px solid red;}
	.line{fill:none; stroke:black;}

	.axis text{font-size:11px;}
	.axis path,
	.axis line{ fill:none; stroke:black;}
	.axisX line{fill:none; stroke:black;}

	.red  { stroke: red;}
	.blue { stroke: blue;}
	.green{ stroke: green;}
	</style>

</head>
<body>
	<h2>折れ線グラフの線を色々な形にする</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>折れ線グラフの線を色々な形にする</title>

<style>

svg{

width:400px;

height:300px;

border:2px solid red;}

.line{fill:none; stroke:black;}

.axis text{font-size:11px;}

.axis path,

.axis line{ fill:none; stroke:black;}

.axisX line{fill:none; stroke:black;}

.red { stroke: red;}

.blue { stroke: blue;}

.green{ stroke: green;}

</style>

</head>

<body>

<h2>折れ線グラフの線を色々な形にする</h2>

</body>

</html>

/*
	折れ線グラフを表示するサンプルコード
*/

	var svgWidth  = 400; // SVG要素の幅
	var svgHeight = 240; // SVG要素の高さ
	var offsetX = 32;    // 横方向のオフセット
	var offsetY = 20;    // 縦方向のオフセット

	var scale = 2.00;    // ２倍のサイズ

	// 今回は３つのデータセットを用意
	var arrData = [
		{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
		{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },
		{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },
		{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },
		{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },
		{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },
		{ year : 2012, value1 : 8 , value2 : 23, value3 : 9  },
		{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },
		{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },
		{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }
	 ];

	var margin = svgWidth / (arrData.length - 1 );// 折れ線グラフの間隔

	/*
		データセットして、要素番号を指定して配列データを渡す
	*/
	drawGraph( arrData,"value1", "red"  ,"linear"); // 折れ線グラフを表示
	drawGraph( arrData,"value2", "blue" ,"step"  ); // 折れ線グラフを表示
	drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示

	drawScale(); 　　　　　　　　　　//目盛りを表示する

function drawGraph( arrData,itemName,cssClassName,type){

	var line = 
		d3.svg.line()                    // svgのライン
		.x(function(d,i){
			return offsetX + i * margin; // Ｘ座標は出現順番＊間隔
		})
		.y(function(d,i){
			//データからＹ座標の分を引く
			return svgHeight - ( d[ itemName ] * scale ) - offsetY;
		})
		.interpolate(type);

	var lineElements = 
		d3.select("#graph")
		.append("path")                    // データの数だけpath要素が追加される
		.attr("class","line " + cssClassName )   // CSSクラスを指定
		.attr("d",line( arrData ) );       // 連続線を指定
}

function drawScale(){

	// 目盛りを表示するためのスケールを設定
	var yScale = 
		d3.scale.linear()            // スケールの設定
		.domain([0,100])             // 元のサイズ
		.range([scale*100,0]);       // 実際の出力サイズ

	// 目盛りを表示する
	d3.select("#graph")
		.append("g")                 // g要素の追加。目盛りを表示する要素
		.attr("class","axis")        // CSSクラスを指定
		.attr("transform","translate(" + offsetX + ", " + offsetY + ")")

	/*
		scale = 2.00 の値を変えると表示倍率が変わりますが、
		縦の目盛り位置がずれてしまいます。今回は１００を基準にしているため、			倍率を変化させても目盛りが正しく表示させるには、
		下記のコメントアウトの箇所のように書きます。
	*/
	/*
		.attr("transform","translate(" + 
		offsetX + ", " + ((100-(scale-1)*100)  + offsetY ) + ")")
	*/
		.call(
				d3.svg.axis()
				.scale(yScale)       // スケールを摘要
				.orient("left")      // 目盛りの表示位置を左側
		);

	d3.select("#graph")
		.append("rect")
		.attr("class","axisX")
		.attr("width", svgWidth)
		.attr("height",1)
		.attr("transform","translate(" + 
		offsetX + ", " + (svgHeight - offsetY - 0.5) + ")");

}

折れ線グラフを表示するサンプルコード

var svgWidth = 400; // SVG要素の幅

var svgHeight = 240; // SVG要素の高さ

var offsetX = 32; // 横方向のオフセット

var offsetY = 20; // 縦方向のオフセット

var scale = 2.00; // ２倍のサイズ

// 今回は３つのデータセットを用意

var arrData = [

{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },

{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },

{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },

{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },

{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },

{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },

{ year : 2012, value1 : 8 , value2 : 23, value3 : 9 },

{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },

{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },

{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }

];

var margin = svgWidth / (arrData.length - 1 );// 折れ線グラフの間隔

データセットして、要素番号を指定して配列データを渡す

drawGraph( arrData,"value1", "red" ,"linear"); // 折れ線グラフを表示

drawGraph( arrData,"value2", "blue" ,"step" ); // 折れ線グラフを表示

drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示

drawScale(); 　　　　　　　　　　//目盛りを表示する

function drawGraph( arrData,itemName,cssClassName,type){

var line =

d3.svg.line() // svgのライン

.x(function(d,i){

return offsetX + i * margin; // Ｘ座標は出現順番＊間隔

})

.y(function(d,i){

//データからＹ座標の分を引く

return svgHeight - ( d[ itemName ] * scale ) - offsetY;

})

.interpolate(type);

var lineElements =

d3.select("#graph")

.append("path") // データの数だけpath要素が追加される

.attr("class","line " + cssClassName ) // CSSクラスを指定

.attr("d",line( arrData ) ); // 連続線を指定

}

function drawScale(){

// 目盛りを表示するためのスケールを設定

var yScale =

d3.scale.linear() // スケールの設定

.domain([0,100]) // 元のサイズ

.range([scale*100,0]); // 実際の出力サイズ

// 目盛りを表示する

d3.select("#graph")

.append("g") // g要素の追加。目盛りを表示する要素

.attr("class","axis") // CSSクラスを指定

.attr("transform","translate(" + offsetX + ", " + offsetY + ")")

scale = 2.00 の値を変えると表示倍率が変わりますが、

縦の目盛り位置がずれてしまいます。今回は１００を基準にしているため、倍率を変化させても目盛りが正しく表示させるには、

下記のコメントアウトの箇所のように書きます。

.attr("transform","translate(" +

offsetX + ", " + ((100-(scale-1)*100) + offsetY ) + ")")

.call(

d3.svg.axis()

.scale(yScale) // スケールを摘要

.orient("left") // 目盛りの表示位置を左側

);

d3.select("#graph")

.append("rect")

.attr("class","axisX")

.attr("width", svgWidth)

.attr("height",1)

.attr("transform","translate(" +

offsetX + ", " + (svgHeight - offsetY - 0.5) + ")");

}

今回紹介するのも複数の線グ ...

: D3.js

図形のスタイルを指定する

D3.jsで図形の属性はattr()メソッドでしました。図形のスタイルはどう指定すればいいのか。答えあ、d3.jsではスタイルを設定するためのスタイル()メソッドが用意されています。第１引数にス ...

: D3.js

円グラフの色分けしてみる

円グラフは、それぞれの扇の部分が色分けされているのが普通です。扇形部分を色分けするにはstyle()メソッドを使い、塗の色を指定します。D3.jsでは予め用意されたカラーを利用することもできます。それ ...

ツリーマップレイアウトで使用されている文字数を数えて表示する

ヒートマップをCanvasに表示する