d3.js advent calendar 3日目

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

d3.js Advent Calendar 3日目
Array API (1/2)

Array API

JavaScript の Arrayのおさらい
d3のArray API (この部分2回に分けます)

Array API はいくつもあります

ですが、mike bostockはこうおっしゃっています

まず、JSのArrayで実装されてる奴よく読め

Array.

Array.reverse
Array.shift
Array.sort
Array.splice
Array.unshift
Array.concat
Array.join
Array.slice
Array.indexOf
Array.lastIndexOf

Array. (続き)

Array.filter
Array.forEach
Array.every
Array.map
Array.some
Array.reduce
Array.reduceRight

slice / splice

Dan氏もかく語りきspliceとsliceはすごく便利です

実例：slice

var data = getLargeData(); // more than 1M records
createChart(data); // x spent much time!!
var limit = ENV === "develope" ? 1000 : data.length - 1;
createChart(data.slice(0, limit)); // in developement use small size thus spent less time!

d3で追加されたArray API (1)

d3.ascending(a, b)
d3.descending(a, b)

よくあるsortと同じ

d3で追加されたArray API (2)

d3.min(a[, accessor])
d3.max(a[, accessor])

Math.min / Math.maxと同じだけど、accessorを使うことで、オブジェクトの要素とかで比較できます

実例: d3.min

var a = [{v:3, s:4},{v:2, s:1},{v:1, s:5},{v:2, s:2}];
d3.min(a, function(d){ return d.v}) // → 1 ({v:1,s:5}ではない)

d3で追加されたArray API (3)

d3.extent(a[, accessor])
d3.first(a[, comparator])
d3.last(a[, comparator])

最小/最大を2要素の配列で返却する
表示範囲を求めるときなどに便利！

実例: d3.extent

var a = [{v:3, s:4},{v:2, s:1},{v:1, s:5},{v:2, s:2}];
d3.extent(a, function(d){ return d.v}) // → [1, 3] 
d3.extent(a, function(d){ return d.s;}) // → [1,5]

d3で追加されたArray API (4)

d3.sum(a[, accessor])
d3.mean(a[, accessor])
d3.median(a[, accessor])
d3.quantile(numbers, p): 確率pの数値を返す
d3.bisectLeft(a, x[, lo[, hi]]): ソートされた配列aにxを代入するときの位置を返す
d3.bisect(a, x[, lo[, hi]])
d3.bisectRight(a, x[, lo[, hi]])
d3.bisector(accessor)

d3で使えるHash API

d3.keys(object)
d3.values(object)
d3.entries(object)

.keys, .valuesは言わずもがなですが、.entriesはなにげに便利です

実例：d3.entries

var data = {name: "muddydixon", age: 34, job: "web engineer"};
d3.entries(data);
// [{key: "name", value: "muddydixon"}, {key: "age": value: 34}, {key: "job", value: "web engineer"}]

d3で使えるMap API

d3ではmapを使うことができます

d3.map(object): map constructor
map.has(key)
map.get(key)
map.set(key, value)
map.remove(key)
map.keys()
map.values()
map.entries()
map.forEach(function)

d3.js Advent Calendar 3日目Array API (1/2)