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

D3.jsでデーターを可視化するときに役立ちます。
通常のXHRと同じくクロスドメイン制約(CORS)に気をつけてください。

##　テキストファイル
# d3.text(url[, mimeType][, callback])

XHRを通してテキストファイルを読み込みます。

d3.text '/data.txt', (error, rawText) ->
  # data processing

JSON

# d3.json(url[, callback])

JSONファイルを読み込みます。

d3.json '/data.json', (error, arrayOfData) ->
  # data processing

エクセル/CSV/TSV

# d3.tsv(url[, callback])
# d3.csv(url[, callback])

RFC4180に準じてCSVファイルを解析してくれます。

例えば：

csv

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

result

d3.tsv '/data.txt', (error, arrayOfData) ->
  console.log(arrayOfData)
  # [
  #   {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
  #   {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
  # ]

XML/HTML

# d3.xml(url[, mimeType][, callback])
# d3.html(url[, callback])

jQueryでアクセスすると便利です。

d3.html '/page.html', (error, documentFragment) ->
  $.data(documentFragment)
   .select('selector')

XMLはraw textで読み込んでjQueryで解析するのもアリだと思います。

d3.text '/data.xml', (error, rawText) ->
  xml = $.parseXML(rawText)

複数のファイルを読み込む

コールバックを重ねるのは止めてください。

これ反面教材

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

以前紹介したQ.jsなどのライブラリを利用すると…

queue = Q.all([
  Q.nfcall(d3.json, '/res.txt')
  Q.nfcall(d3.json, '/pathway.entrez.txt')
  Q.nfcall(d3.tsv, '/p200.txt')
  Q.nfcall(d3.tsv, '/mock.txt')
  Q.nfcall(d3.tsv, '/fold.txt')
])

queue.then ([ref, pathway, treatment, ctrl, data]) ->
  # render chart

queue.fail (error) ->
  # error handling

清潔でメンテナンスしやすいコードに成ります。