pack layout(総出場時間)

d3.js

var svgWidth = 800; 
var svgHeight = 800;
var diameter = 800; 

var svg = d3.select("#myGraph").append("svg")
    .attr("width", svgWidth).attr("height", svgHeight);

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

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



d3.json("data.json", function(error, root) {


var grp = svg.selectAll("g") 
    .data(bubble.nodes(classes(root)))
    .enter()
    .append("g")
    .attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")";})
    grp.append("circle") 
    .attr("r", function(d){return d.r;})
    .attr("fill",function(d){return d.children ? "#fff" : colorSelect(d.packageName)});

grp.append("text")
    .attr("font-size",function(d){return d.r>20 ? "10px" : "0px"})
    .attr("fill", "#333")
    .style("text-anchor", "middle") 
    .text(function(d) { return d.className; } ) 

grp.append("text")
    .attr("font-size",function(d){return d.r>20 ? "10px" : "0px"})
    .attr("fill", "#333")
    .attr("dy", "1.2em")
    .style("text-anchor", "middle") 
    .text(function(d) { return d.value==584911 ? null : d.value}) 
});


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};
}

data.json

{
"name": "al",
"children": [
    {
    "name": "player",
    "children": [
        {
        "name": "player_1",
        "children": [
		  {
		    "name":"本間 勲",
		    "time":25510
		  },
		  {
		    "name":"矢野 貴章",
		    "time":16658
		  },
		  {
		    "name":"田中 亜土夢",
		    "time":15593
		  },
		  {
		    "name":"寺川 能人",
		    "time":15051
		  },
		  {
		    "name":"千葉 和彦",
		    "time":14839
		  },
		  {
		    "name":"野澤 洋輔",
		    "time":14484
		  },
		  {
		    "name":"内田 潤",
		    "time":13784
		  },
		  {
		    "name":"北野 貴之",
		    "time":13650
		  },
		  {
		    "name":"永田 充",
		    "time":12769
		  },
		  {
		    "name":"三門 雄大",
		    "time":12180
		  },
		  {
		    "name":"エジミウソン",
		    "time":11816
		  },
		  {
		    "name":"マルシオ リシャルデス",
		    "time":11600
		  },
		  {
		    "name":"大井 健太郎",
		    "time":10896
		  },
		  {
		    "name":"千代反田 充",
		    "time":10696
		  },
		  {
		    "name":"丸山 良明",
		    "time":10325
		  },
		  {
		    "name":"鈴木 慎吾",
		    "time":10275
		  },
		  {
		    "name":"ファビーニョ",
		    "time":9135
		  },
		  {
		    "name":"東口 順昭",
		    "time":8685
		  },
		  {
		    "name":"松下 年宏",
		    "time":8302
		  },
		  {
		    "name":"三田 光",
		    "time":7813
		  },
		  {
		    "name":"秋葉 忠宏",
		    "time":7638
		  },
		  {
		    "name":"山口 素弘",
		    "time":7617
		  },
		  {
		    "name":"アン ヨンハ",
		    "time":7555
		  },
		  {
		    "name":"ミシェウ",
		    "time":7366
		  },
		  {
		    "name":"ブルーノ ロペス",
		    "time":7150
		  },
		  {
		    "name":"上野 優作",
		    "time":7052
		  },
		  {
		    "name":"キム ジンス",
		    "time":6820
		  },
		  {
		    "name":"マルクス",
		    "time":6800
		  },
		  {
		    "name":"松尾 直人",
		    "time":6534
		  },
		  {
		    "name":"チョ ヨンチョル",
		    "time":6274
		  },
		  {
		    "name":"酒井 高徳",
		    "time":6265
		  },
		  {
		    "name":"川口 尚紀",
		    "time":5978
		  },
		  {
		    "name":"中野 洋司",
		    "time":5882
		  },
		  {
		    "name":"大島 秀夫",
		    "time":5823
		  },
		  {
		    "name":"海本 慶治",
		    "time":5668
		  },
		  {
		    "name":"シルビーニョ",
		    "time":5566
		  },
		  {
		    "name":"川又 堅碁",
		    "time":5536
		  },
		  {
		    "name":"菊地 直哉",
		    "time":5497
		  },
		  {
		    "name":"石川 直樹",
		    "time":5382
		  },
		  {
		    "name":"鈴木 大輔",
		    "time":5355
		  },
		  {
		    "name":"山本 康裕",
		    "time":5038
		  },
		  {
		    "name":"アンデルソン",
		    "time":4685
		  },
		  {
		    "name":"深澤 仁博",
		    "time":4675
		  },
		  {
		    "name":"宮沢 克行",
		    "time":4675
		  },
		  {
		    "name":"藤田 征也",
		    "time":4521
		  },
		  {
		    "name":"村上 佑介",
		    "time":4459
		  },
		  {
		    "name":"岡本 英也",
		    "time":4296
		  },
		  {
		    "name":"高橋 直樹",
		    "time":4145
		  },
		  {
		    "name":"桑原 裕義",
		    "time":4095
		  },
		  {
		    "name":"喜多 靖",
		    "time":3904
		  },
		  {
		    "name":"船越 優蔵",
		    "time":3902
		  },
		  {
		    "name":"梅山 修",
		    "time":3669
		  },
		  {
		    "name":"小林 慶行",
		    "time":3643
		  },
		  {
		    "name":"神田 勝夫",
		    "time":3626
		  },
		  {
		    "name":"坂本 將貴",
		    "time":3385
		  },
		  {
		    "name":"松原 健",
		    "time":3361
		  },
		  {
		    "name":"セルジオ",
		    "time":3350
		  },
		  {
		    "name":"鈴木 健太郎",
		    "time":3183
		  },
		  {
		    "name":"小林 悟",
		    "time":3086
		  },
		  {
		    "name":"西 大伍",
		    "time":3086
		  },
		  {
		    "name":"アレッサンドロ",
		    "time":3011
		  },
		  {
		    "name":"萩村 滋則",
		    "time":2718
		  },
		  {
		    "name":"アンデルソン リマ",
		    "time":2674
		  },
		  {
		    "name":"木暮 郁哉",
		    "time":2565
		  },
		  {
		    "name":"ジウトン",
		    "time":2502
		  },
		  {
		    "name":"ベット",
		    "time":2330
		  },
		  {
		    "name":"小澤 英明",
		    "time":2281
		  },
		  {
		    "name":"キム クナン",
		    "time":2204
		  },
		  {
		    "name":"ペドロ ジュニオール",
		    "time":2068
		  },
		  {
		    "name":"木寺 浩一",
		    "time":1921
		  },
		  {
		    "name":"アラン ミネイロ",
		    "time":1789
		  },
		  {
		    "name":"海本 幸治郎",
		    "time":1461
		  },
		  {
		    "name":"河原 和寿",
		    "time":1381
		  },
		  {
		    "name":"坪内 秀介",
		    "time":1327
		  },
		  {
		    "name":"氏原 良二",
		    "time":1312
		  },
		  {
		    "name":"尾崎 瑛一郎",
		    "time":1128
		  },
		  {
		    "name":"平井 将生",
		    "time":1057
		  },
		  {
		    "name":"岡山 哲也",
		    "time":1053
		  },
		  {
		    "name":"濱田 水輝",
		    "time":990
		  },
		  {
		    "name":"ダヴィ",
		    "time":980
		  },
		  {
		    "name":"栗原 圭介",
		    "time":963
		  },
		  {
		    "name":"深井 正樹",
		    "time":898
		  },
		  {
		    "name":"中原 貴之",
		    "time":796
		  },
		  {
		    "name":"小谷野 顕治",
		    "time":790
		  },
		  {
		    "name":"佐藤 優平",
		    "time":768
		  },
		  {
		    "name":"森田 浩史",
		    "time":744
		  },
		  {
		    "name":"オゼアス",
		    "time":697
		  },
		  {
		    "name":"アンデルソン",
		    "time":658
		  },
		  {
		    "name":"武田 洋平",
		    "time":570
		  },
		  {
		    "name":"青野 大介",
		    "time":532
		  },
		  {
		    "name":"山形 辰徳",
		    "time":519
		  },
		  {
		    "name":"藤井 大輔",
		    "time":485
		  },
		  {
		    "name":"エヴェルトン サントス",
		    "time":484
		  },
		  {
		    "name":"イ ミョンジェ",
		    "time":377
		  },
		  {
		    "name":"ホージェル ガウーショ",
		    "time":374
		  },
		  {
		    "name":"末岡 龍二",
		    "time":364
		  },
		  {
		    "name":"ソン ジュフン",
		    "time":339
		  },
		  {
		    "name":"竹重 安希彦",
		    "time":270
		  },
		  {
		    "name":"新井 健二",
		    "time":263
		  },
		  {
		    "name":"ジョン パウロ",
		    "time":260
		  },
		  {
		    "name":"大橋 正博",
		    "time":222
		  },
		  {
		    "name":"長谷川 太郎",
		    "time":219
		  },
		  {
		    "name":"長谷川 巧",
		    "time":180
		  },
		  {
		    "name":"ファグネル",
		    "time":178
		  },
		  {
		    "name":"ディビッドソン 純マーカス",
		    "time":177
		  },
		  {
		    "name":"キム ヨングン",
		    "time":165
		  },
		  {
		    "name":"杉山 弘一",
		    "time":161
		  },
		  {
		    "name":"明堂 和也",
		    "time":143
		  },
		  {
		    "name":"アウグスト",
		    "time":130
		  },
		  {
		    "name":"六車 拓也",
		    "time":100
		  },
		  {
		    "name":"阿部 敏之",
		    "time":88
		  },
		  {
		    "name":"鏑木 享",
		    "time":73
		  },
		  {
		    "name":"長谷部 彩翔",
		    "time":72
		  },
		  {
		    "name":"ホベルト",
		    "time":60
		  },
		  {
		    "name":"熱田 眞",
		    "time":58
		  },
		  {
		    "name":"ジェイウソン",
		    "time":39
		  },
		  {
		    "name":"小塚 和季",
		    "time":25
		  },
		  {
		    "name":"片渕 浩一郎",
		    "time":18
		  },
		  {
		    "name":"ラファエル ハットン",
		    "time":15
		  },
		  {
		    "name":"ネット",
		    "time":14
		  },
		  {
		    "name":"千葉 真也",
		    "time":12
		  },
		  {
		    "name":"ハファエル",
		    "time":12
		  },
		  {
		    "name":"城定 信次",
		    "time":10
		  },
		  {
		    "name":"平間 智和",
		    "time":1
		  }
		]
        },
        {
        "name": "player_2",
        "children": [
		  {
		    "name":"レオ シルバ",
		    "time":9890
		  },
		  {
		    "name":"舞行龍 ジェームズ",
		    "time":7783
		  },
		  {
		    "name":"守田 達弥",
		    "time":7590
		  },
		  {
		    "name":"成岡 翔",
		    "time":5822
		  },
		  {
		    "name":"大野 和成",
		    "time":5508
		  },
		  {
		    "name":"小林 裕紀",
		    "time":4583
		  },
		  {
		    "name":"指宿 洋史",
		    "time":3934
		  },
		  {
		    "name":"田中 達也",
		    "time":3865
		  },
		  {
		    "name":"黒河 貴矢",
		    "time":3824
		  },
		  {
		    "name":"小泉 慶",
		    "time":3705
		  },
		  {
		    "name":"鈴木 武蔵",
		    "time":3199
		  },
		  {
		    "name":"コルテース",
		    "time":2861
		  },
		  {
		    "name":"山崎 亮平",
		    "time":2580
		  },
		  {
		    "name":"加藤 大",
		    "time":2510
		  },
		  {
		    "name":"ラファエル シルバ",
		    "time":1942
		  },
		  {
		    "name":"前野 貴徳",
		    "time":1596
		  },
		  {
		    "name":"平松 宗",
		    "time":1101
		  },
		  {
		    "name":"酒井 宣福",
		    "time":674
		  },
		  {
		    "name":"端山 豪",
		    "time":586
		  },
		  {
		    "name":"イム ユファン",
		    "time":270
		  },
		  {
		    "name":"酒井 高聖",
		    "time":140
		  },
		  {
		    "name":"増田 繁人",
		    "time":86
		  }
		]
        },
        {
        "name": "player_3",
        "children": [
            { 
              "name": "宮崎 幾笑",
              "time": 156
            },
            {
              "name": "斎藤 宏太",
              "time": 28
            }
        ]
        }
    ]
    }
]
}
	

index.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div id="myGraph"></div>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script src="d3.js" charset="utf-8"></script>
    
</body>
</html>

main.css

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body{
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 700;
	border : solid 1px #eee;
}

thumbnail.png