d3.jsでCSVファイル/TSVファイルを扱う

More than 3 years have passed since last update.


CSVファイルの読み込み


ヘッダ付きCSVファイルの読み込み

d3.csv(url, callback)で各列の値をプロパティとして持つオブジェクトの配列が作成される。


data.csv

id,name,value

1,foo,36
2,bar,29
3,baz,42
4,hoge,8


js

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

console.log(data);
});


結果

[

{"id":"1","name":"foo","value":"36"},
{"id":"2","name":"bar","value":"29"},
{"id":"3","name":"baz","value":"42"},
{"id":"4","name":"hoge","value":"8"}
]


データを加工して読み込む

d3.csv(url, accessor, callback)でaccessorに各行を加工する処理を記述する。

またはrow()を使用する。


js

d3.csv("data.csv",

function(d) {
return [d.id, d.name, d.value].join(":");
},
function(error, data) {
console.log(data);
}
);


別の書き方

d3.csv("data.csv")

.row(function(d) {
return [d.id, d.name, d.value].join(":");
})
.get(function(error, data) {
console.log(data);
});


結果

["1:foo:36","2:bar:29","3:baz:42","4:hoge:8"]  



ヘッダなしファイルの読み込み

ヘッダがないCSVファイルを読み込む時は、テキストとして読み込んでからd3.csv.parseRows()を使用する。


data_headless.csv

1,foo,36

2,bar,29
3,baz,42
4,hoge,8


js

d3.text("data_headless.csv", function(error, text) {

var data = d3.csv.parseRows(text);
console.log(data);
});


結果

[["1","foo","36"],["2","bar","29"],["3","baz","42"],["4","hoge","8"]]



ヘッダなしファイルを加工して読み込む


js

d3.text("data_headless.csv", function(error, text) {

var data = d3.csv.parseRows(text, function(d) {
return { id: d[0], name: d[1], value: +d[2] };
});
console.log(data);
});


結果

[

{"id":"1","name":"foo","value":36},
{"id":"2","name":"bar","value":29},
{"id":"3","name":"baz","value":42},
{"id":"4","name":"hoge","value":8}
]


オブジェクトをCSVテキストに変換


オブジェクトを変換


js

console.log(d3.csv.format([

{id:1, name:"foo"},
{id:2, name:"bar"}
]));


結果

id,name

1,foo
2,bar


配列を変換


js

console.log(d3.csv.formatRows([

[1, "foo"],
[2, "bar"]
]));


結果

1,foo

2,bar


TSVファイル

d3.tsvを使用する。使い方はd3.csvと同じ。


任意区切り文字のファイル

d3.dsvを使用する。


data.txt

id|name|value

1|foo|36
2|bar|29
3|baz|42
4|hoge|8


js

d3.dsv("|", "text/plain")("data.txt", function(error, data) {

console.log(data);
});


結果

[

{"id":"1","name":"foo","value":"36"},
{"id":"2","name":"bar","value":"29"},
{"id":"3","name":"baz","value":"42"},
{"id":"4","name":"hoge","value":"8"}
]


参考

CSV · mbostock d3 Wiki