D3.js pack layout with pie charts

D3.js pack layout with pie charts instead of circles

In response to: http://stackoverflow.com/questions/26830386/how-to-insert-pie-charts-in-pack-layout-in-d3-js

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
  body {
    font-family: sans-serif;
  }
  g.arc path {
    stroke: #828282;
    stroke-width: 0.5;
  }
  g.arc text {
    font-size: 10px;
  }
</style>
<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.scale.ordinal().range(["#f1eef6","#bdc9e1","#74a9cf","#0570b0"]),
    diameter = 500;

var bubble = d3.layout.pack()
      .value(function(d) { return d3.sum(d[1]); })
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5),
    arc = d3.svg.arc().innerRadius(0),
    pie = d3.layout.pie();

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var arcGs = nodes.selectAll("g.arc")
    .data(function(d) {
      return pie(d[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]; },
      y: function(d) { arc.outerRadius(d.r); return arc.centroid(d)[1]; },
      dy: "0.35em"
    })
    .style("text-anchor", "middle")
    .text(function(d) { return d.value; });

var labels = nodes.selectAll("text.label")
    .data(function(d) { console.log(d); return [d[0]]; });
labels.enter().append("text")
    .attr({
      "class": "label",
      dy: "0.35em"
    })
    .style("text-anchor", "middle")
    .text(String);

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js