D3.jsで外部データを読み込む

前回までは、予めプログラム内に書かれた数値を
もとにして棒グラフを表示しました。
実際にD3.jsを使う場合はプログラム内にデータを用意して
おくというのはまずないと思います。多くの場合は、
データは別ファイルを用意されています。

D3.jsではXML,JSON,TSV,CSVなど、色々なデータタイプに対応して
います。独自の形式でも大丈夫です。ファイルの詳しいやり方は
別の機会にします。

今回はCSV(カンマ区切りテキスト)ファイルを読み込んで
棒グラフを表示します。

test.csvの中身
item01,item02,item03
50,60,80
100,180,40
70,40,140
190,120,40
80,160,320

D3.jsでCSVファイルを読み込むにはd3.csv()メソッドを使います。
第１引数にはファイルのパスを指定し、第２引数にはCSVファイルの
読込が完了したときに読み出す関数を指定します。
この読み込みが完了したときに呼ばれる関数の
第１引数には、エラー情報
第２引数には、読み込まれたデータ(オブジェクト)が渡されます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>CSVファイルを読み込んで棒グラフを作成する</title>

	<style>
	#sampleGraph rect{
		stroke:#dd0000;
		stroke-width:2px;
		fill:#0000dd;
	}
	</style>
	<script src="../js/d3.js"></script>
</head>
<body>

	<h1>CSVファイルからデータを読み込んで値をグラフを表示する</h1>
	<svg id="sampleGraph">
	</svg>

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

<!DOCTYPE html>

<head>

<title>CSVファイルを読み込んで棒グラフを作成する</title>

<style>

#sampleGraph rect{

stroke:#dd0000;

stroke-width:2px;

fill:#0000dd;

}

</style>

</head>

<body>

<h1>CSVファイルからデータを読み込んで値をグラフを表示する</h1>

</svg>

</body>

</html>

	d3.csv("test.csv",function(error,data){
	
		//データを格納する配列を用意
		var dataSet =[];

		for( var i = 0 ; i < data.length; i++){
			/*
				データの行数分だけループ処理
				item01のラベルのデータだけを取り出し
				dataSet[]に値を格納する

				読み込まれたCSVファイルの内容は変数dataに
				格納されています。dataにはCSVのヘッダーを除いた
				行数分のデータが格納されています。

				data.lengthとするとすべてのデータの行数を
				知ることができます。
			*/

			dataSet.push(data[i].item1);
			/*
				dataSet.push()は配列の末尾に
				データを押し込むメソッドです。

				追加するデータはdata[i].item1としています。
				このitem1という文字列は、CSVファイルのヘッダーの
				項目名です。item2なら,item2欄のデータを読み込む
				ことができます。
			*/
		}

		d3.select("#sampleGraph")
		.selectAll("rect")
		.data(dataSet)
		.enter()
		.append("rect")
		.attr("x", 0 )
		.attr("y", function(d,i){
			return i * 32;
		})
		.attr("height","24px")
		.attr("width" , function(d,i){
			return d + "px";
		});

	});

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

//データを格納する配列を用意

var dataSet =[];

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

データの行数分だけループ処理

item01のラベルのデータだけを取り出し

dataSet[]に値を格納する

読み込まれたCSVファイルの内容は変数dataに

格納されています。dataにはCSVのヘッダーを除いた

行数分のデータが格納されています。

data.lengthとするとすべてのデータの行数を

知ることができます。

dataSet.push(data[i].item1);

dataSet.push()は配列の末尾に

データを押し込むメソッドです。

追加するデータはdata[i].item1としています。

このitem1という文字列は、CSVファイルのヘッダーの

項目名です。item2なら,item2欄のデータを読み込む

ことができます。

}

d3.select("#sampleGraph")

.selectAll("rect")

.data(dataSet)

.enter()

.append("rect")

.attr("x", 0 )

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

return i * 32;

})

.attr("height","24px")

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

return d + "px";

});