月別アーカイブ：2016年02月

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

2015/10/21 散布図, 最大値を求める

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

<!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

散布図を作成

2015/10/21 散布図

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

: D3.js

ボタンをクリックして、折れ線グラフの表示範囲を変える

2015/10/21 ボタン, 折れ線グラフ

JSONファイルからデータを読み込んで折れ線グラフを表示します。グラフのデータの読み込みは10年分のみにします。サンプルコードの実行結果はこちら [crayon-686f9c0c887cc55330 ...

: D3.js

データセットと日付を対応させてみる

2015/10/19 日付

前回の記事で、JSON形式のデータを扱ったデータには、折れ線グラフの数値だけではなく、年度のデータも含まれています。今回は横軸である下の目盛りにデータのの年数を表示します。 { year : 2006 ...

D3.js

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

2015/10/19 折れ線グラフ

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

<!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

２次元配列のデータを読み込んで、折れ線グラフを表示する

2015/10/19 二次元配列

２次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。サンプルコードの実行結果はこちら

<!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>

[cray ...

: D3.js

折れ線グラフを塗りつぶす

2015/10/19 折れ線グラフ, 領域内塗りつぶし

D3.jsでは両機内にを塗りつぶしたグラフを表示することができます。このとき、d3.svg.line()メソッドではなくて、d3.svg.area()メソッドを使います。座標値を指定するx()､y0 ...

: D3.js

折れ線グラフを曲線、直線、階段状に表示する

2015/10/19 折れ線グラフ, 曲線, 直線, 階段状

D3.jsでは折れ線グラフを直線で表示するのではなく、曲線、階段状に表示することもできます。D3.jsでは、下記の表にある補間方法があります。補間方法説明 linear 直線(両端が開いている) ...

: D3.js

複数の折れ線グラフを表示する

2015/10/19 折れ線グラフ, 複数の折れ線グラフ

複数の折れ線グラフを表示します。今回は３つのデータを用意して、３つの折れ線グラフを表示します。目盛りを表示する部分と折れ線グラフを描画する部分を関数にします。サンプルコードの実行結果はこちら [cr ...

: D3.js

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

2015/10/19 折れ線グラフ

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

1 2 3 Next »