d3.js advent calendar 18日目

d3 advent calendar 18日目
d3.layout.pie

d3.layout.pieとは

最初は簡単かつ使い勝手の良いlayoutであるPieからです
これは、文字通り、ぶっちゃけダルい円弧のPathを生成するための開始角と終端角の2つを計算してくれます

入出力

このlayoutは

入力: key - value の配列
出力: data(入力のオブジェクト) - {startAngle, endAngle, value} の配列

の変換を行います

valueの設定

終端角から開始角を引いた、実際の面積を決定する角度が何に依存するかを指定するメソッドが.value()です

d3.layout.pie().value(function(d){ return d.values; })

という使い方をします

表示順序について

0度から時計回りにどのような順で表示するかを指定するのが.sort()です

d3.layout.pie().code(function(d){ return d.key; })

デフォルトではvalueで指定した値になりますが、ラベルを指定したい場合はこれを利用します

17日目のデータを利用

実際によく得られるデータをもとにして円グラフを書くまでの手順です

データの配列を取得
データのnestにより指定した区分けで入れ子にする(今回は2つkeyを指定)
pieを作成
円グラフを書くためのarcを作成
グラフを描画

データの取得/pie/arcの準備

$(function(){
 var W = 1200, H = 600, M = 50;
 d3.csv("/order.csv", function(csv){
 // Pie
 (function(){
 var pie = d3.layout.pie().value(function(d){
 return d3.sum(d.values.map(function(dd){ return dd.values; }));
 }).sort(function(d){ return - d.key;});
 var arc = d3.svg.arc().innerRadius(0).outerRadius(200);
 var pieDetail = d3.layout.pie().value(function(d){ return d.values; })
 .sort(function(d){ return - d.key;});
 var arcDetail = d3.svg.arc().innerRadius(0).outerRadius(50);
 var colors = d3.scale.category20();

データの作成/svg要素の準備

 var data = d3.nest()
 .key(function(d){ return d.itemId; })
 .key(function(d){ return d.userAge; })
 .rollup(function(d){ return d.length;})
 .entries(csv);

 var svg = d3.select('body').append('svg').attr('width', W + M * 2).attr('height', H + M * 2);
 var g = svg.append('g').attr('width', W).attr('height', H).attr('transform', 'translate('+(M + 0|W/2)+','+(M+0|H/2)+')');

円弧の作成

 var path = g.selectAll('g').data(pie(data)).enter() // pieの利用
 .append('g');
 path.append('path').attr('d', arc) // pieで作成したstart/endAngleからarcでpathを作成
 .attr('fill', function(d){ return colors(d.data.key);})
 .on('click', function(d){
 var base = d;
 g.append('g').attr('transform', function(d){ return 'translate('+(arc.centroid(base)[0])+','+(arc.centroid(base)[1])+')'; })
 .selectAll('g').data(pieDetail(d.data.values)).enter().append('g').append('path')
 .attr('d', arcDetail).attr('fill', function(d){ return colors(d.data.key);});
 });
 path.append('text').text(function(d){ return d.data.key;})
 .attr('x', function(d){ return arc.centroid(d)[0];})
 .attr('y', function(d){ return arc.centroid(d)[1];});

このようにすることで

簡単に配列形式から、keyを指定し、入れ子のデータを作成することができます
また、それぞれの割合をざっくり眺めるだけではなく、クリックすることで更に購入者の年齢層(userAge)をドリルダウンで閲覧することが可能になります

d3 advent calendar 18日目d3.layout.pie