円グラフを作る

2015年10月18日

日頃のグラフの中でよく見かけるのが円グラフです。スマートフォンの販売シェアとかを表す時に使われます。円グラフの表示には、D3.jsに用意されたレイアウト機能を使います。D3.jsには描画機能はないですが、描画に必要なレイアウトの計算を行うために便利なレイアウト機能があります。下記の表は、D3.jsで利用できるレイアウト機能です。

種類	詳細
Chord	コードレイアウト
Cluster	クラスターレイアウト
Force	力学レイアウト
Hierarchy	階層化レイアウト
Histgram	度数分布図
Pack	パックレイアウト(Hierarchyの一種)
Partition	パーティションレイアウト(Hierarchyの一種)
Pie	円レイアウト
Stack	積み上げレイアウト
Tree	ツリーレイアウト(Hierarchyの一種)
Treemap	ツリーマップレイアウト(Hierarchyの一種)

レイアウト機能を利用すると複雑な計算をD3.jsで行うので、複雑なレイアウトも簡単に実現することができます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　円グラフを表示してみる</title>
	<script src="../js/d3.js"></script>

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

	.pie{
		fill:yellow;
		stroke:green}
	</style>

</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:320px;

border:2px solid red;}

.pie{

fill:yellow;

stroke:green}

</style>

</head>

<body>

<h2>円グラフを表示</h2>

</body>

</html>

	var svgWidth  = 320;       // SVG要素の幅を設定
	var svgHeight = 320;       // SVG要素の高さを設定

	/*  値を代入するデータセット (割合を示す)
		数値の和が100である必要はないです。
		データの個数と値から自動的に円グラフの扇形の
		角度が計算されます。
	*/
	var arrData =[50,25,12,6,3,2];

	var pie = d3.layout.pie(); // 円グラフレイアウト

	var arc = d3.svg.arc()
			.innerRadius(0)    // 円グラフの内径
			.outerRadius(100); // 円グラフの外径

	var pieElements = 
		d3.select("#graph")
		.selectAll("path")     // path要素を指定
		.data( pie(arrData) ); // データを要素に連結

	pieElements.enter()        // データの数だけ繰り返し

	/*
		棒グラフのときはrect要素でしたが、円グラフのときはpath要素を追加します。		円グラフの扇形はpathの座標で構成されるので、append("path")を指定します。
	*/
	.append("path")            // データの数だけpath要素を追加

	/*
		path要素はd属性に表示に必要な座標データを設定します。
		扇形の座標計算を設定するのがattr("d", arc )です。
		arcは関数(オブジェクト)で、データセットから扇形の座標を計算して、
		その結果を返却します。
	*/
	.attr("class","pie")       // CSSクラスを指定
	.attr("d", arc)            // 扇形を指定

	// 円の表示位置を設定
	.attr("transform","translate(" + 
	svgWidth / 2 + ", " + svgHeight / 2 + ")"); //円グラフを中心に配置

var svgWidth = 320; // SVG要素の幅を設定

var svgHeight = 320; // SVG要素の高さを設定

/* 値を代入するデータセット (割合を示す)

数値の和が100である必要はないです。

データの個数と値から自動的に円グラフの扇形の

角度が計算されます。

var arrData =[50,25,12,6,3,2];

var pie = d3.layout.pie(); // 円グラフレイアウト

var arc = d3.svg.arc()

.innerRadius(0) // 円グラフの内径

.outerRadius(100); // 円グラフの外径

var pieElements =

d3.select("#graph")

.selectAll("path") // path要素を指定

.data( pie(arrData) ); // データを要素に連結

pieElements.enter() // データの数だけ繰り返し

棒グラフのときはrect要素でしたが、円グラフのときはpath要素を追加します。円グラフの扇形はpathの座標で構成されるので、append("path")を指定します。

.append("path") // データの数だけpath要素を追加

path要素はd属性に表示に必要な座標データを設定します。

扇形の座標計算を設定するのがattr("d", arc )です。

arcは関数(オブジェクト)で、データセットから扇形の座標を計算して、

その結果を返却します。

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

.attr("d", arc) // 扇形を指定

// 円の表示位置を設定

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

svgWidth / 2 + ", " + svgHeight / 2 + ")"); //円グラフを中心に配置

D3.jsのレイアウト機能はd3オブジェクト内にあるlayoutオブジェクトに格納されています。円グラフの場合はpie()メソッドとして定義されており、d3.layout.pie()とすることでレイアウト機能を利用することができます。d3.layout.pie()は数値を返すのではなく関数(オブジェクト)を返します。この関数により扇形の座標計算をします。

円グラフを表示するには、ほかにも円グラフのサイズの情報が必要です。d3.layout.pie()で用意した関数では、扇形の座標を計算した結果を返しますが、円グラフ全体のサイズは計算されません。円グラフ全体の処理をしたいときは、d3.svg.arc()を使います。円グラフを表示するには半径の指定しなければなりません。この半径の指定はouterRadius()メソッドです。パラメーターには円グラフの半径を指定します。円蔵具の内径をinnerRadius()メソッドで指定することができます。内径を指定するとドーナッツ型の円グラフを表示することができます。

必要な数値が揃ったので、今まで通りdata()メソッドを使いデータセットと要素を連結します。ただ今回は、 data(pie(arrData))のとして、d3.layout.pie()を使って用意した扇形の計算を行う関数を呼んで処理しなければなりません。この処理を忘れると円グラフが表示されません。

-D3.js
-円グラフ

comment コメントをキャンセル

: D3.js

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

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

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

読み込んだCSVファイルのヘッダー名が日本語だったら

TSV,CSVファイルのヘッダー名が英語であるとは限りません。日本語で書かれたりすることもあります。この場合の対処方法を書いていきます。日本語が含まれているときは、 javaScriptの連想配列 ...

: D3.js

散布図を作成

散布図は２つの項目の関係性を調べるのに利用します。。D3.jsでは散布図を表示すための専用のレイアウト機能は用意されていないので、SVG図形を作成して、自分で表示するための座標データを作成する必要があ ...

: D3.js

グラフをアニメーションさせる

前回の記事でデータセットに応じてグラフに変化を付しました。ボタンをクリックするとすぐに書き換わってしまいます。そこで今回は、ボタンがクリックしたらアニメーションをしながら棒グラフを変化するように ...

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

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