d3.js advent calendar 10日目

これは、d3.js API Advent Calendarの10日目の記事です

d3.js advent calendar 10日目
Loading API

d3のLoading API

d3には、チャートを作成するためのデータを取得する方法として、Loading APIを提供しています
header付tsvやcsvをObject Arrayに変換してくれるので、すぐにグラフを描画したり、nestして様々なlayoutを適用したりすることができるのでお勧めです(もちろん、jQueryのを使っても問題無いです)

Loading APIリスト

• d3.xhr
• d3.text
• d3.json
• d3.xml
• d3.html
• d3.csv
• d3.tsv

d3.tsv, d3.csv

上記2つ以外は、そのままなので、特に書きませんが、csv/tsvはheader付で渡すと、取り込み時にObject Arrayでデータを取得することができます

実例

//sample.csv
id,name,age
1,muddydixon,34
2,jack,28
3,mogemogu,35
// javascript
d3.csv("sample.csv", function(data){
 // data : [{id:1,name:"muddydixon",age:34}, {id:2,name:"jack",age:28},{id:3,name:"mogemogu",age:35}]})

注意点

failureなどの時の処理を書くことができないので、チャチャッとしたものはd3で、重要なところはjQueryなどできちんとエラー処理を書いて、と使い分けるのが良いかと思います。