Skip to content

Instantly share code, notes, and snippets.

@smzn

smzn/bubble.js

Created Oct 23, 2016
Embed
What would you like to do?
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("");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.