Pie Charts as Nodes in Force Layout

Yet Another Dimension! http://stackoverflow.com/questions/14794055/place-pie-charts-on-nodes-of-force-directed-layout-graph-in-d3

HTML

<h2>More Co-Author Dimensions</h2>

CSS

.node {
    stroke: #000000;
    stroke-width: 0.0px;
}
.circle {
  fill: #fad7a0;
}

.link {
    stroke: #808080;
    stroke-opacity: .6;
}

JavaScript

graph = { "nodes":[{"proportions": [{"group": 1, "value": 2}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 1}]},
                   {"proportions": [{"group": 1, "value": 1}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 3}]},
                   {"proportions": [{"group": 1, "value": 6}, 
                                    {"group": 2, "value": 1}, 
                                    {"group": 3, "value": 1}]},
                   {"proportions": [{"group": 1, "value": 4}, 
                                    {"group": 2, "value": 1}, 
                                    {"group": 3, "value": 4}]},
                   {"proportions": [{"group": 1, "value": 2}, 
                                    {"group": 2, "value": 2}, 
                                    {"group": 3, "value": 2}]}],
          "links":[{"source": 0, "target": 1, "length": 500, "width": 1},
                  {"source": 0, "target": 2, "length": 500, "width": 1},
                  {"source": 0, "target": 3, "length": 500, "width": 1},
                  {"source": 0, "target": 4, "length": 500, "width": 1}]
        }

var width = 600,
    height = 500,
    radius = 40;

var color = d3.scale.category10();

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d){return d.value;});

var arc = d3.svg.arc()
    .outerRadius(radius - 5)
    .innerRadius(radius - 10);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
  // wrap graph into container to enable zoom and pan
  var container = svg.append('g');
  // zoom (and accompanying pan)
  var zoom = d3.behavior.zoom()
    .scaleExtent([0.8, 4])
    .on("zoom", function() {
      container.attr("transform",
        "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    });

  svg.call(zoom);    

var force =...