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

2015年10月25日

D3.jsは表示処理は行わないため、SVG、canvasだけではなく、HTMLのdiv要素を使いグラフを表示することができます、ヒートマップもdiv要素を表示することができます。ヒートマップのような単純なものであれば、SVGよりdiv要素のほうが簡単です。

最初に、スタイルシートでヒートマップの四角形の幅、高さを設定する。

	#graph{
		position:absolute;
		top:80px;
		left:20px;
	}
	#graph div{
		position:absolute;
		width:20px;
		height:20px;
	}

#graph{

position:absolute;

top:80px;

left:20px;

}

#graph div{

position:absolute;

width:20px;

height:20px;

}

D3.jsでdiv要素の表示位置と背景色を設定し安栖。表示位置を表す座標ですが、div要素のときは、Ｘ座標を指定する場合はスタイルシートのleftプロパティ、Ｙ座標を指定する場合はスタイルシートのtopプロパティです。値は"px"という単位を付します。塗り潰す色は背景色を指定するbackground-colorプロパティで色を指定します。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ヒートマップをDOMに表示する</title>
	<script src="../js/d3.js"></script>
	<style>
		#graph{
			position:absolute;
			top:80px;
			left:20px;
		}
		#graph div{
			position:absolute;
			width:20px;
			height:20px;
		}
		.block{ stroke:black; fill:none;}
	</style>
</head>
<body>
	<h1>ヒートマップをdiv要素で表示</h1>
	<div id="graph"></svg>

	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ヒートマップをDOMに表示する</title>

<style>

#graph{

position:absolute;

top:80px;

left:20px;

}

#graph div{

position:absolute;

width:20px;

height:20px;

}

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

</style>

</head>

<body>

<h1>ヒートマップをdiv要素で表示</h1>

</body>

</html>

/*
	ヒートマップをDOMに表示する
*/
d3.text("test.csv",function(error,data){

	// 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 = [];

	/*
		test.txtを読み込んだ時の処理はここで行う
	*/

	// ","で分割した情報を格納
	var temp = data.split(",");

	for(var i = 0 ; i < temp.length ; i++){
		arrData[i] = parseInt( temp[i] );
	}

	var maxVal = d3.max( arrData );

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

	heatMap.enter()
		.append("div")
		.attr("class","block")
		.style("left", function(d,i){
			return ( i % 8 ) * blockSize + "px";
		})
		.style("top", function(d,i){
			return Math.floor( i / 8 ) * blockSize + "px";
		})
		.style("background-color", function(d,i){
			return color( d / maxVal );
		});

	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("background-color", function(d,i){
				return color( d / maxVal );
			})
	},1000);

});

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

d3.text("test.csv",function(error,data){

// 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 = [];

test.txtを読み込んだ時の処理はここで行う

// ","で分割した情報を格納

var temp = data.split(",");

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

arrData[i] = parseInt( temp[i] );

}

var maxVal = d3.max( arrData );

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

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

.selectAll("div")

.data(arrData);

heatMap.enter()

.append("div")

.attr("class","block")

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

return ( i % 8 ) * blockSize + "px";

})

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

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

})

.style("background-color", function(d,i){

return color( d / maxVal );

});

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("background-color", function(d,i){

return color( d / maxVal );

})

},1000);

});

3,9,8,2,3,5,4,4,
4,5,3,7,8,6,7,2,
6,7,6,5,4,9,3,6,
2,9,8,0,2,4,1,1,
3,0,4,9,8,9,7,8,
9,5,6,4,8,8,8,5,
8,9,6,5,6,1,9,0,
7,3,1,2,9,4,5,1,
7,1,9,2,2,1,5,7,
9,3,6,9,6,3,8,2,
2,9,7,4,2,5,3,7,
3,3,1,9,6,7,6,1

3,9,8,2,3,5,4,4,

4,5,3,7,8,6,7,2,

6,7,6,5,4,9,3,6,

2,9,8,0,2,4,1,1,

3,0,4,9,8,9,7,8,

9,5,6,4,8,8,8,5,

8,9,6,5,6,1,9,0,

7,3,1,2,9,4,5,1,

7,1,9,2,2,1,5,7,

9,3,6,9,6,3,8,2,

2,9,7,4,2,5,3,7,

3,3,1,9,6,7,6,1

-D3.js
-ヒートマップ

comment コメントをキャンセル

: D3.js

CSVファイルからデータを読み込んで、アニメーションも付けて散布図を表示してみる

タイトルの通りです。CSVファイルを読み込んで、散布図を表示します。今回の記事の後半部分では、読み込んだ数値に合わせてグラフの縦軸、横軸の幅も対応させた散布図を作成します。サンプルコードの実行結果は ...

D3.js

外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>各科目の点数を年度別に表示する</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:320px;
		height:320px;
		border:2px solid red;}

	.pie{
		fill:yellow;
		stroke:green}

	.total{ font-size:12px;text-anchor:middle;}

	.pieNum{font-size:16px;text-anchor:middle;}

	</style>

</head>
<body>
	<h2>年度別科目別の成績</h2>
	<svg id="graph"></svg>
	<form>
		<select id="year">
			<option value="2012">2012年</option>
			<option value="2013">2013年</option>
			<option value="2014">2014年</option>
		</select>
	</form>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>各科目の点数を年度別に表示する</title>

<style>

svg{

width:320px;

height:320px;

border:2px solid red;}

.pie{

fill:yellow;

stroke:green}

.total{ font-size:12px;text-anchor:middle;}

.pieNum{font-size:16px;text-anchor:middle;}

</style>

</head>

<body>

<h2>年度別科目別の成績</h2>

<form>

</select>

</form>

</body>

</html>

[crayon-675af37bb2d4b747 ...

D3.js

CSVファイルからデータを読み込んで縦棒グラフを表示してみる

CSVファイルからデータを読み込んで表示するものを今回作成します。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　CSVファイルからデータを読み込んでから縦棒グラフを表示する</title>

	<style>
	svg{
		width:320px;
		height:340px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}


	/*
		縦棒グラフにラベルを表示する設定
	*/
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	
	.axis text{
		font-family:sans-serif;
		font-size:11px;
	}
	.axis path,
	.axis line{
		fill:none;
		stroke:green;
	}
	.axisX line{
		fill:none;
		stroke:black;
	}
	.barName{
		font-size:9px;
		text-anchor:middle;
	}
	</style>
	<script src="../js/d3.js"></script>

</head>
<body>
	<h2>CSVファイルからデータを読み込んで、縦棒グラフを表示</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　CSVファイルからデータを読み込んでから縦棒グラフを表示する</title>

<style>

svg{

width:320px;

height:340px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

縦棒グラフにラベルを表示する設定

.barNum{

font-size:10px;

text-anchor:middle;

}

.axis text{

font-family:sans-serif;

font-size:11px;

}

.axis path,

.axis line{

fill:none;

stroke:green;

}

.axisX line{

fill:none;

stroke:black;

}

.barName{

font-size:9px;

text-anchor:middle;

}

</style>

</head>

<body>

<h2>CSVファイルからデータを読み込んで、縦棒グラフを表示</h2>

</body>

</html>

[crayon-675af37b ...

: D3.js

四角形・角丸四角形を描画する

SVGは図形を表す要素を指定することで描画を実行します。 SVGは下記の表に示す図形要素があります。要素説明 rect 四角形・角丸四角形 circle 正円 ecllipse 楕円形 line ...

: D3.js

CSVファイルからデータを読み込んで、ヒストグラムを表示する

クラス別の点数をデータにしたCSVファイルを読み込んで、ボタンをクリックするとほかのクラスの成績表がみれるプログラムをかきます。サンプルコードの実行結果はこちら [crayon-675af37bb3 ...

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

世界地図を表示する