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"}
]