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

  • 33
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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