D3.jsでTSV(タブ区切りデータ)形式のファイルを読み込む

D3.jsでデータとデータがタブコードで区切られたファイル形式である
TSV形式も扱う事ができます。タブ区切りテキストは、シンプルで
扱いやすいです、エクセルでも、このTSV形式を出力することができます。

D3.jsでは最初の１行にヘッダーがあることが前提となっているので、
text.tsvは、graph1,graph2,graph3といった名前で、その次の行から
数値データがあります。なので、ヘッダーが無い場合は、
ヘッダーを付す処理が必要です。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>TSVファイルを読み込んでみる</title>

	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}

	</style>
</head>
<body>

	<h2>TSV形式のファイルを読み込んでグラフ表示</h2>
	<svg id="graph"></svg>


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

<!DOCTYPE html>

<head>

<title>TSVファイルを読み込んでみる</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

</style>

</head>

<body>

<h2>TSV形式のファイルを読み込んでグラフ表示</h2>

</body>

</html>

/*
	d3.tsv(url[, accessor][, callback])
	第１引数：読み込むTSVファイルのURL
			同一ドメイン(サーバー)上のファイルのみ
	第２引数：ファイルの読み込みが完了時に、
			呼びだす関数を指定

	第１引数のパラメーターは非同期通信を行う
	オブジェクト(XMLHttpRequestオブジェクト)です。
	エラーかどうかは、このオブジェクトのstatusプロパティの
	値を調べます。

	値　：説明
	200 ：ファイルが正常に読み込まれた
	400 ：不正な要求(エラー)
	403 ：閲覧禁止・閲覧が許可されていない(エラー)
	404 ：ファイルがない(エラー)

	第２引数のパラメータには読み込まれたデータが
	オブジェクトとして渡されます。
*/
d3.tsv("test.tsv",function(error,data){
	/*
		上記をコメントアウトして
		下記のコメントアウトを消せば
		CSVファイルが読み込める
	*/
	//d3.csv("test.csv",function(error,data){

	var arrData = [];

	/*
		data.lengthには読み込んだTSVファイルの
		でーたの数＝行数が格納されます。
	*/
	for( var i=0 ; i < data.length ; i++){
	/*
		data[0]にtest.tsvの最初のデータである「100	70	40」が
		入ります。このデータはヘッダーと対応していて
		data[0].graph1には100、
		data[0].graph2には70、
		data[0].graph3には40が格納されます。
		
	*/
		arrData.push(data[i].graph1);
	}

	//棒グラフを描画する。
	d3.select("#graph")
	.selectAll("rect")
	.data(arrData)
	.enter()
	.append("rect")
	.attr("class","fillPink")
	.attr("width",function(d,i){
		return d;
	})
	.attr("height",16)
	.attr("x",0)
	.attr("y",function(d,i){
		return i * 24;
	});

});

d3.tsv(url[, accessor][, callback])

第１引数：読み込むTSVファイルのURL

同一ドメイン(サーバー)上のファイルのみ

第２引数：ファイルの読み込みが完了時に、

呼びだす関数を指定

第１引数のパラメーターは非同期通信を行う

オブジェクト(XMLHttpRequestオブジェクト)です。

エラーかどうかは、このオブジェクトのstatusプロパティの

値を調べます。

値　：説明

200 ：ファイルが正常に読み込まれた

400 ：不正な要求(エラー)

403 ：閲覧禁止・閲覧が許可されていない(エラー)

404 ：ファイルがない(エラー)

第２引数のパラメータには読み込まれたデータが

オブジェクトとして渡されます。

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

上記をコメントアウトして

下記のコメントアウトを消せば

CSVファイルが読み込める

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

var arrData = [];

data.lengthには読み込んだTSVファイルの

でーたの数＝行数が格納されます。

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

data[0]にtest.tsvの最初のデータである「100 70 40」が

入ります。このデータはヘッダーと対応していて

data[0].graph1には100、

data[0].graph2には70、

data[0].graph3には40が格納されます。

arrData.push(data[i].graph1);

}

//棒グラフを描画する。

d3.select("#graph")

.selectAll("rect")

.data(arrData)

.enter()

.append("rect")

.attr("class","fillPink")

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

return d;

})

.attr("height",16)

.attr("x",0)

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

return i * 24;

});

graph1	graph2	graph3
100	70	40
10	150	270
170	50	200
280	200	80
140	120	140

graph1 graph2 graph3

100 70 40

10 150 270

170 50 200

280 200 80

140 120 140