D3.jsで縦棒グラフを表示してみる

2015年10月18日

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は縦棒グラフも同じです。異なる点は、グラフの棒が横に伸びるか、縦に伸びるかの違いです。

グラフ内に数値を表示する

グラフ内に数値を表示します。数値のスタイルをHTMLファイル内で設定しておきます。必要なのは文字サイズと、文字をどこから表示するかです。文字の描画位置は下記の表に書いてある通り３種類のいずれかを設定できます。

値	詳細
start	左から描画(初期値)
middle	中央から描画
end	右側から描画

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　縦棒グラフを表示する</title>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	/*
		test.js上の.attr("class","barNum")の箇所の
		「barNum」を「barNumTate」へ変更すると、棒グラフの中の数値を
		縦書きへ変更することができます。
	*/
	.barNumTate{
		font-size:10px;
		text-anchor:end;

		/* 
			writing-modeの設定値
			1r 又は 1r-tb：左から右
			rl 又は rl-tb：右から左
			tb 又は tb-rl：上から下
		*/
		writing-mode:tb;

		/* 回転角度を示します。 0,90,180,270を設定できます。 */
		glyph-orientation-vertical:0;
	}
	</style>
	<script src="../js/d3.js"></script>

</head>
<body>
	<h2>縦棒グラフを表示</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　縦棒グラフを表示する</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

.barNum{

font-size:10px;

text-anchor:middle;

}

test.js上の.attr("class","barNum")の箇所の

「barNum」を「barNumTate」へ変更すると、棒グラフの中の数値を

縦書きへ変更することができます。

.barNumTate{

font-size:10px;

text-anchor:end;

writing-modeの設定値

1r 又は 1r-tb：左から右

rl 又は rl-tb：右から左

tb 又は tb-rl：上から下

writing-mode:tb;

/* 回転角度を示します。 0,90,180,270を設定できます。 */

glyph-orientation-vertical:0;

}

</style>

</head>

<body>

<h2>縦棒グラフを表示</h2>

</body>

</html>

	var svgHeight = 240; //svg要素の高さ
	var bar;            //棒グラフの棒の要素を格納
	var arrData = [120,80,150,200,110];

	bar = d3.select("#graph")
		.selectAll("rect")
		.data(arrData);

	bar.enter()
	.append("rect")
	.attr("class", "fillPink")
	.attr("height", function(d,i){
		return d;
	})
	.attr("width",20)
	.attr("x",function(d,i){
		return i * 25;
	})

/*
	注意する必要があるのは、Ｙ座標です。SVGの座標は一般的なコンピュータ系の
	座標と同じで、左上が原点です。右下に行くほど座標値が大きくなります。
	グラフのＹ座標をデータと同一にすると、棒グラフは上から下に
	伸びて表示されます。そこでＳＶＧの高さからデータの値を引くことで
	下から上に伸びるように調整(svgHeight - d の部分)しています。
*/
	.attr("y",function(d,i){  //Y座標を指定
		return svgHeight - d; //Y座標を計算
	});

	//棒グラフの数値を描画する

	bar.enter()              //text要素を指定
	.append("text")          //text要素を追加
	.attr("class","barNum")  //CSSクラスを指定
	.attr("x",function(d,i){ //Ｘ座標を指定
		return i * 25 + 10;  //棒グラフの表示間隔に合わせる
	})
	.attr("y", svgHeight -5 )//Ｙ座標を指定
	.text(function(d,i){     //データを表示
		return d;
	});

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

var bar; //棒グラフの棒の要素を格納

var arrData = [120,80,150,200,110];

bar = d3.select("#graph")

.selectAll("rect")

.data(arrData);

bar.enter()

.append("rect")

.attr("class", "fillPink")

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

return d;

})

.attr("width",20)

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

return i * 25;

})

注意する必要があるのは、Ｙ座標です。SVGの座標は一般的なコンピュータ系の

座標と同じで、左上が原点です。右下に行くほど座標値が大きくなります。

グラフのＹ座標をデータと同一にすると、棒グラフは上から下に

伸びて表示されます。そこでＳＶＧの高さからデータの値を引くことで

下から上に伸びるように調整(svgHeight - d の部分)しています。

.attr("y",function(d,i){ //Y座標を指定

return svgHeight - d; //Y座標を計算

});

//棒グラフの数値を描画する

bar.enter() //text要素を指定

.append("text") //text要素を追加

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

.attr("x",function(d,i){ //Ｘ座標を指定

return i * 25 + 10; //棒グラフの表示間隔に合わせる

})

.attr("y", svgHeight -5 )//Ｙ座標を指定

.text(function(d,i){ //データを表示

return d;

});

-D3.js
-グラフ内に数値, 縦棒グラフ

comment コメントをキャンセル

D3.js

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>散布図のデータを定期的に更新する</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:340px;
		height:340px;
		border:2px solid red;}
	.mark{ fill:red; stroke:none;}

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

	</style>

</head>
<body>
	<h2>散布図を表示する</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>散布図のデータを定期的に更新する</title>

<style>

svg{

width:340px;

height:340px;

border:2px solid red;}

.mark{ fill:red; stroke:none;}

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

.axis path,

.axis line{

fill:none;

stroke:black;

}

</style>

</head>

<body>

<h2>散布図を表示する</h2>

</body>

</html>

/*
	散布図を表示する
*/

	var svgWidth  = 300; // SVG要素の幅 
	var svgHeight = 300; // SVG要素の高さ
	var offsetX = 30;    // Ｘ座標のずれ
	var offsetY = -20;    // Ｙ座標のずれ

	var arrData = [
		[16,32],[64,48],[128,92],[70,150],[120,300],
		[45,90],[110,160],[300,20],[180,180],[15,145]
	];

	var circleElements = d3.select("#graph")
	.selectAll("circle")                   // circle要素を追加
	.data(arrData);

	circleElements 
	.enter()
	.append("circle")                      // CSSクラスを指定
	.attr("class","mark")
	.attr("cx",function(d,i){
		return d[0] + offsetX;             // １番目の要素をＸ表に指定
	})
	.attr("cy",function(d,i){
		return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定
	})
	.attr("r",4);                          // 点の半径

// アニメーション後の散布図に使用するデータを再設定
function generateData(data){

	var result = data
		.map(function(d,i){
			// 配列の要素数だけ繰り返す
			var x = Math.random() * svgWidth;  // Ｘ座標を設定
			var y = Math.random() * svgHeight; // Ｙ座標を設定
			return [x, y];
		});
	return result;
}

// 散布図を更新する関数
function generateGraph(){

	circleElements
	.data(arrData)
	.transition()
	.attr("cx",function(d,i){
		return d[0] + offsetX;
	})
	.attr("cy",function(d,i){
		return svgHeight - d[1] - offsetY;
	});
}

function drawScale(){

	var maxX = d3.max(arrData,function(d,i){
	/*
		以下のようにd[ ]の添字を０を指定すると
		Ｘ座標の最大値を求めることができます。
	*/
		return d[0]; // Ｘ座標
	});
	var maxY = d3.max(arrData,function(d,i){
	/*
		以下のようにd[ ]の添字を１を指定すると
		Ｙ座標の最大値を求めることができます。
	*/
		return d[1]; // Ｙ座標
	});
	
	// 縦の目盛りを表示するために縮尺設定
	var yScale = 

	/*
		上記で求めた最大値maxYをここで使用する。
	*/
		d3.scale.linear()  // 縮尺設定
		.domain([0, maxY]) // 元データの範囲
		.range([maxY, 0]); // 実際の出力サイズ

	// 目盛りを表示
	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + offsetX + ", " + 
		( svgHeight - maxY - offsetY ) + ")" )
		.call(
			d3.svg.axis()
			.scale(yScale)
			.orient("left")
		);

	// 横の目盛りを表示するために縮尺設定
	var xScale =
	/*
		上記で求めた最大値maxXをここで使用する。
	*/
		 d3.scale.linear() // 縮尺設定
		.domain([0, maxX]) // 元データの範囲
		.range([0, maxX]); // 実際の出力サイズ

	// 目盛りを表示
	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + offsetX + ", " + 
		( svgHeight - offsetY ) + ")" )
		.call(
			d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
		);

}
	drawScale();
	// 一定時間後に行う処理
	setInterval(function(){
		arrData = generateData( arrData ); // データを更新
		generateGraph();                   // グラフの更新(アニメーション)
	},2000);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

散布図を表示する

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

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

var offsetX = 30; // Ｘ座標のずれ

var offsetY = -20; // Ｙ座標のずれ

var arrData = [

[16,32],[64,48],[128,92],[70,150],[120,300],

[45,90],[110,160],[300,20],[180,180],[15,145]

];

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

.selectAll("circle") // circle要素を追加

.data(arrData);

circleElements

.enter()

.append("circle") // CSSクラスを指定

.attr("class","mark")

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

return d[0] + offsetX; // １番目の要素をＸ表に指定

})

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

return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定

})

.attr("r",4); // 点の半径

// アニメーション後の散布図に使用するデータを再設定

function generateData(data){

var result = data

.map(function(d,i){

// 配列の要素数だけ繰り返す

var x = Math.random() * svgWidth; // Ｘ座標を設定

var y = Math.random() * svgHeight; // Ｙ座標を設定

return [x, y];

});

return result;

}

// 散布図を更新する関数

function generateGraph(){

circleElements

.data(arrData)

.transition()

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

return d[0] + offsetX;

})

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

return svgHeight - d[1] - offsetY;

});

}

function drawScale(){

var maxX = d3.max(arrData,function(d,i){

以下のようにd[ ]の添字を０を指定すると

Ｘ座標の最大値を求めることができます。

return d[0]; // Ｘ座標

});

var maxY = d3.max(arrData,function(d,i){

以下のようにd[ ]の添字を１を指定すると

Ｙ座標の最大値を求めることができます。

return d[1]; // Ｙ座標

});

// 縦の目盛りを表示するために縮尺設定

var yScale =

上記で求めた最大値maxYをここで使用する。

d3.scale.linear() // 縮尺設定

.domain([0, maxY]) // 元データの範囲

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

// 目盛りを表示

d3.select("#graph")

.append("g")

.attr("class","axis")

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

( svgHeight - maxY - offsetY ) + ")" )

.call(

d3.svg.axis()

.scale(yScale)

.orient("left")

);

// 横の目盛りを表示するために縮尺設定

var xScale =

上記で求めた最大値maxXをここで使用する。

d3.scale.linear() // 縮尺設定

.domain([0, maxX]) // 元データの範囲

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

// 目盛りを表示

d3.select("#graph")

.append("g")

.attr("class","axis")

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

( svgHeight - offsetY ) + ")" )

.call(

d3.svg.axis()

.scale(xScale)

.orient("bottom")

);

}

drawScale();

// 一定時間後に行う処理

setInterval(function(){

arrData = generateData( arrData ); // データを更新

generateGraph(); // グラフの更新(アニメーション)

},2000);

...

: D3.js

D3.jsのデータと要素の対応

D3.jsがどのようにして読み込んだデータと表示する要素を対応させているかを書いていきます。 D3.jsはデータを対応する要素の__data__プロパティに格納しているだけです。D3.jsはデータ ...

: D3.js

ヒストグラムの表示データの範囲を指定

前回のヒストグラムの記事で点数の範囲を10点刻みではなく5点、20点など任意の範囲で表示できるようにしてみます。下記のように入力フォームを使ってみます。サンプルコードの実行結果はこちら [crayo ...

: D3.js

縦棒グラフにアニメーションを付ける

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.jsでのアニメーションは下記のように行います。１．attr(),style()メソッドでアニメーション ...

: D3.js

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

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位でグラフィックを描画できるCanvasや、3D描画が可能なWebGL(Canvas 3D)があります。 ...

データの削除

縦棒グラフに目盛りを表示してみる