JSONデータを読み込んで、ボタンでパックレイアウトで表示するデータを切り替える

2015年10月24日

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に３つのボタンを設けて、ボタンを押すと読み込むデータを切り替えてパックレイアウトを表示するコードを書いてみます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>パックレイアウトで人口を表示する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:320px;
			height:320px;
			border:2px solid black;
		}
		circle{
			stroke:none;
			opacity:0.25;
		}
		text{
			font-size:10px;
			text-anchor:middle;
			fill:black;
			opacity:0;
		}
	</style>
</head>
<body>
	<h1>パックレイアウトを表示</h1>
	<svg id="graph"></svg>
	<form>
		<input type="button" value="2005年" data-year="year2005">
		<input type="button" value="2010年" data-year="year2010">
		<input type="button" value="2015年" data-year="year2015">
	</form>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>パックレイアウトで人口を表示する</title>

<style>

svg{

width:320px;

height:320px;

border:2px solid black;

}

circle{

stroke:none;

opacity:0.25;

}

text{

font-size:10px;

text-anchor:middle;

fill:black;

opacity:0;

}

</style>

</head>

<body>

<h1>パックレイアウトを表示</h1>

<form>

</form>

</body>

</html>

/*
	パックレイアウトを表示
*/
(function(){

	// 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 pack;							// 円を包むg要素の一覧
	var circles;						// circle要素一覧
	var texts;							// text要素一覧
	var bubble;							// パックレイアウトオブジェクト
	var arrData;						// 円のデータを全て格納する
	var year ="year2005";				// 表示するデータを示す文字列

	// JSONデータを読み込む
	d3.json("data.json",function(error,data){
		arrData = data;
		drawPackLayout(data);
	});

	function drawPackLayout(jsonData){
		var color = d3.scale.category10(); // 10色指定

		// パックレイアウトを使うための設定
		bubble = d3.layout.pack().size([320,320]);

		// パックレイアウトで利用するグループを作成
		pack = d3.select("#graph")
			.selectAll("g")

		/*
			valueキーが無いときは、特定のキーをパックレイアウトの
			valueとして使いたいとき、value()メソッドをつかいます。
			このメソッドに関数を指定して、valueとして使いたいデータを
			返すようにします。下記のようにかけば、任意の年の人口の数値を
			返します。

			yearの値は、"year2005"という文字列を設定していて、HTMLファイルの
			ボタンのdata-year="year2005"という文字列に対応させるようにします。
		*/
			.data( bubble.value(function(d,i){
				return d[year];
			})
			.nodes(jsonData))  // データセットを要素に設定
			.enter()
			.append("g");

		circles = pack.append("circle")
			.attr("r",0)
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			})
			.style("fill", function(d,i){
				return color(i);
			});

		circles.transition()
			.duration(function(d,i){
				return d.depth * 800 + 800;
			})
			.attr("r",function(d){
				return d.r;
			});

		texts  = pack.append("text")
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			});

		texts.style("opacity",1)
			.transition()
			.duration(3000)
			.style("opacity",1)
			.text(function(d,i){
				if( d.depth == 1 ){
					return d.name;
				}
				return null;
			});
	}

	// HTML上のボタンをクリックしたときに処理はここでする。
	d3.selectAll("input").on("click",function(){
		year = d3.select(this).attr("data-year");

		pack.data( bubble.value(function(d,i){
			// ここで違う年度の値を返却する
			return d[year];
		}).nodes( arrData ));             // データセットに要素を設定

		circles
			.transition()
			.duration(500)
			.ease("bounce")
			.attr("r",function(d,i){
					return d.r;
			})
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			});

		texts
			.transition()
			.duration(500)
			.ease("bounce")
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			});
	});
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

パックレイアウトを表示

(function(){

// 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 pack; // 円を包むg要素の一覧

var circles; // circle要素一覧

var texts; // text要素一覧

var bubble; // パックレイアウトオブジェクト

var arrData; // 円のデータを全て格納する

var year ="year2005"; // 表示するデータを示す文字列

// JSONデータを読み込む

d3.json("data.json",function(error,data){

arrData = data;

drawPackLayout(data);

});

function drawPackLayout(jsonData){

var color = d3.scale.category10(); // 10色指定

// パックレイアウトを使うための設定

bubble = d3.layout.pack().size([320,320]);

// パックレイアウトで利用するグループを作成

pack = d3.select("#graph")

.selectAll("g")

valueキーが無いときは、特定のキーをパックレイアウトの

valueとして使いたいとき、value()メソッドをつかいます。

このメソッドに関数を指定して、valueとして使いたいデータを

返すようにします。下記のようにかけば、任意の年の人口の数値を

返します。

yearの値は、"year2005"という文字列を設定していて、HTMLファイルの

ボタンのdata-year="year2005"という文字列に対応させるようにします。

.data( bubble.value(function(d,i){

return d[year];

})

.nodes(jsonData)) // データセットを要素に設定

.enter()

.append("g");

circles = pack.append("circle")

.attr("r",0)

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

return "translate(" + d.x + "," + d.y + ")";

})

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

return color(i);

});

circles.transition()

.duration(function(d,i){

return d.depth * 800 + 800;

})

.attr("r",function(d){

return d.r;

});

texts = pack.append("text")

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

return "translate(" + d.x + "," + d.y + ")";

});

texts.style("opacity",1)

.transition()

.duration(3000)

.style("opacity",1)

.text(function(d,i){

if( d.depth == 1 ){

return d.name;

}

return null;

});

}

// HTML上のボタンをクリックしたときに処理はここでする。

d3.selectAll("input").on("click",function(){

year = d3.select(this).attr("data-year");

pack.data( bubble.value(function(d,i){

// ここで違う年度の値を返却する

return d[year];

}).nodes( arrData )); // データセットに要素を設定

circles

.transition()

.duration(500)

.ease("bounce")

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

return d.r;

})

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

return "translate(" + d.x + "," + d.y + ")";

});

texts

.transition()

.duration(500)

.ease("bounce")

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

return "translate(" + d.x + "," + d.y + ")";

});

})();

{
	"name" : "日本" , "year2005" : 126000000, "year2010" : 127000000, "year2015" : 128000000,
	"children" : [
		{ "name" : "東京都"   , "year2005" : 12000000, "year2010" :  8500000, "year2015" : 13000000 },
		{ "name" : "神奈川県" , "year2005" :  8000000, "year2010" :  8200000, "year2015" : 11000000 },
		{ "name" : "大阪府"   , "year2005" :  7500000, "year2010" :  7800000, "year2015" :  8100000 },
		{ "name" : "長野県"   , "year2005" :  1900000, "year2010" :  1900000, "year2015" :  2050000,
		"children" : [
				{ "name": "長野市" , "year2005" :  40000, "year2010" : 330000, "year2015" : 340000 },
				{ "name": "松本市" , "year2005" : 330000, "year2010" : 230000, "year2015" : 110000 },
				{ "name": "塩尻市" , "year2005" :  60000, "year2010" : 120000, "year2015" : 240000 }
			]
		}
	]
}

{

"name" : "日本" , "year2005" : 126000000, "year2010" : 127000000, "year2015" : 128000000,

"children" : [

{ "name" : "東京都" , "year2005" : 12000000, "year2010" : 8500000, "year2015" : 13000000 },

{ "name" : "神奈川県" , "year2005" : 8000000, "year2010" : 8200000, "year2015" : 11000000 },

{ "name" : "大阪府" , "year2005" : 7500000, "year2010" : 7800000, "year2015" : 8100000 },

{ "name" : "長野県" , "year2005" : 1900000, "year2010" : 1900000, "year2015" : 2050000,

"children" : [

{ "name": "長野市" , "year2005" : 40000, "year2010" : 330000, "year2015" : 340000 },

{ "name": "松本市" , "year2005" : 330000, "year2010" : 230000, "year2015" : 110000 },

{ "name": "塩尻市" , "year2005" : 60000, "year2010" : 120000, "year2015" : 240000 }

]

}

]

}

-D3.js
-jsonファイル読込, パックレイアウト

comment コメントをキャンセル

: D3.js

文字を描画する

SVGで文字を表示するにはtext要素を使います。<text>とと</text>の間に表示する文字列を書きます。ただ、このままでは文字は表示されません。文字を表示するには、 ...

: D3.js

複数の図形を操作する

D3.jsでは複数の図形を操作するにはselectAll()メソッドを使います。 selectAll()メソッドの引数には要素名、CSSクラス名を指定します。該当する要素があれば、それらすべてを戻り ...

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

図形の位置やサイズを指定する

前回は、svg要素、rect要素を生成しました。ですが、SVGでは要素を生成しただけでは、何も表示されません。図形の位置やサイズを指定しなければなりません。 D3.jsで図形の位置やサイズを指定す ...

パックレイアウトで人口を表す

ツリーマップを表示する