bubble.js

bubble.js

var svgWidth = 2080; // SVG領域の横幅
var svgHeight =1080;    // SVG領域の縦幅
var diameter = 1080; // 一番大きい円のサイズ

var color = new Array(100);
color[0] = "none";
for(var index = 1; index <= 100; index++){
        color[index] = rgbTo16("rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
}
//var color = ["none", "#ff0000", "#", "orange", "#ffe090", "#a0ff90", "cyan", "#ccc", "#ff8080", "#c0ffc0", "#4090ff"];
var svg = d3.select("#myGraph").append("svg")
    .attr("width", svgWidth).attr("height", svgHeight)
var bubble = d3.layout.pack()
    .size([diameter, diameter]) // 表示サイズを指定
var grp = svg.selectAll("g")    // グループを対象にする
    .data(bubble.nodes(classes(list)))  // データを読み込む
    .enter()
    .append("g")
    .attr("transform", function(d) {    // 円のX,Y座標を設定
        return "translate(" + d.x + "," + d.y + ")";
    })
    grp.append("circle")    // 円を生成する
    .attr("r", function(d){ // 円を指定した半径にする
        return d.r;
    })
    .attr("fill", function(d,i){    // 塗りの色を指定
        return color[i];
        //return rgbTo16("rgb(Math.floor(Math.random()*256), 0, 255)");
    })
grp.append("text")  // 文字を生成する
    .attr("font-size", "9pt")   // 文字のサイズを指定する
    .attr("fill", "black")  // 文字の塗りの色を指定する
    .style("text-anchor", "middle") // 円の座標の中央から表示するようにする
    .text(function(d) { return d.className; } ) // データの中のclassNameが地区名なので、それを出力

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.households});
    }
    recurse(null, root);
    return {children: classes};
}
function rgbTo16(col){ //color配列を作成
  return "#" + col.match(/\d+/g).map(function(a){return ("0" + parseInt(a).toString(16)).slice(-2)}).join("");
}