Skip to content

Instantly share code, notes, and snippets.

@jsl6906
Created Jan 16, 2018
Embed
What would you like to do?
d3.js v4 pack layout with pie chart
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
font-family: sans-serif;
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
}
g.arc path {
stroke: #828282;
stroke-width: 0.5;
}
g.arc text {
font-size: 10px;
}
</style>
</head>
<body>
<script>
var data = [
["bubble1", [10, 20]],
["bubble2", [5, 7]],
["bubble3", [6, 6, 10]],
["bubble4", [12, 14]],
["bubble5", [14, 4]],
["bubble6", [15, 5, 10]],
["bubble7", [10, 10]],
["bubble8", [25, 10]],
["bubble9", [10, 25, 10, 10]],
["bubble10", [55, 10]],
["bubble11", [10, 80, 10, 10]],
["bubble12", [50, 50]],
];
var color = d3.scaleOrdinal().range(["#f1eef6","#bdc9e1","#74a9cf","#0570b0"]),
diameter = 500;
var bubble = d3.pack()
.size([diameter, diameter])
.padding(1.5),
root = d3.hierarchy({children: data})
.sum(function(d) { return d.children ? 0 : d3.sum(d[1]); }),
arc = d3.arc().innerRadius(0),
pie = d3.pie();
var nodeData = bubble(root).children;
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var nodes = svg.selectAll("g.node")
.data(nodeData);
var nodeEnter = nodes.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var arcGs = nodeEnter.selectAll("g.arc")
.data(function(d) {
return pie(d.data[1]).map(function(m) { m.r = d.r; return m; });
});
var arcEnter = arcGs.enter().append("g").attr("class", "arc");
arcEnter.append("path")
.attr("d", function(d) {
arc.outerRadius(d.r);
return arc(d);
})
.style("fill", function(d, i) { return color(i); });
arcEnter.append("text")
.attr('x', function(d) { arc.outerRadius(d.r); return arc.centroid(d)[0]; })
.attr('y', function(d) { arc.outerRadius(d.r); return arc.centroid(d)[1]; })
.attr('dy', "0.35em")
.style("text-anchor", "middle")
.text(function(d) { console.log(d); return d.value; });
var labels = nodeEnter.selectAll("text.label")
.data(function(d) { return [d.data[0]]; });
labels.enter().append("text")
.attr('class', 'label')
.attr('dy', '0.35em')
.style("text-anchor", "middle")
.text(String);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment