【D3.js】パックチャートで選手の総出場時間を可視化してみた。

パックチャートで選手の総出場時間を可視化してみたら、やはり本間勲は偉大だったという感じの記事を新潟日報のモアブログで書きました。

記事内で表示させてもらうことが難しかったから、画像表示だけどｗ
ブラウザ表示は、こちらから。

このブログは、D3jsの記録版です。
ツリーマップを作ったら不評だったので、急遽、パックチャートで出場時間順に並べてみました。

さて、pack layoutの中身ですが、
JSONの階層をフラットにしてから、バインドしていきます。
bubble.nodes()で、全体の大きさとvalue（今回はtimeの中身）の大きさを見て自動でセットしてくれています。

var bubble = d3.layout.pack()
 .size([diameter, diameter])
 .padding(10);

var grp = svg.selectAll("g")
 .data(bubble.nodes(classes(root)))
 .enter()
 .append("g")
 .attr("transform", function(d) {
 return "translate(" + d.x + "," + d.y + ")";
})

function classes(root) {
 var classes = [];
  function recurse(name, node) {
   if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
   else classes.push({packageName: name, className: node.name, value: node.time});
}
  recurse(null, root);
  return {children: classes};
}

var bubble = d3.layout.pack()

.size([diameter, diameter])

.padding(10);

var grp = svg.selectAll("g")

.data(bubble.nodes(classes(root)))

.enter()

.append("g")

.attr("transform", function(d) {

return "translate(" + d.x + "," + d.y + ")";

})

function classes(root) {

var classes = [];

function recurse(name, node) {

if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });

else classes.push({packageName: name, className: node.name, value: node.time});

}

recurse(null, root);

return {children: classes};

}

jsonの構造は、ツリーマップと同様ですね。

色分けは、ツリーマップ同様、switch文です。

var colorSelect = function(d){
var color = '#fff';
 switch(d){
 case 'player1':color = '#7e8cff';break;
 case 'player2':color = '#ffb17e';break;
 case 'player_3':color = '#7efff2';break;
 }
 return color;
}

var colorSelect = function(d){

var color = '#fff';

switch(d){

case 'player1':color = '#7e8cff';break;

case 'player2':color = '#ffb17e';break;

case 'player_3':color = '#7efff2';break;

}

return color;

}

また、円が小さくなると文字が潰れるため、円の半径によって文字の大きさを変えています。

.attr("font-size",function(d){return d.r>20 ? "10px" : "0px"})

1	.attr("font-size",function(d){return d.r>20 ? "10px" : "0px"})

一旦、viewBoxを使ってホイールで拡大縮小をできるようにしましたが、、、スマホで操作すると、感度が良すぎてうまくいかないようです。今回は見送り。
ズームによって文字の大きさも変動させるような仕組みを考えないとかなと。

ズームについては、この辺とかよく調べたいところ。
– http://bl.ocks.org/mbostock/3680999

今回の全コードは、こちらから。

yuta_0

【D3.js】パックチャートで選手の総出場時間を可視化してみた。