読者です 読者をやめる 読者になる 読者になる

d3.js advent calendar 10日目

d3 javascript adventcalendar

これは、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などできちんとエラー処理を書いて、と使い分けるのが良いかと思います。