d3.js: how to create "force-directed graph clusters"

Question

I've been exploring the d3.js library, and especially the force directed graph creation. I perused the paper on it by Bostock et al, and noticed the precise type of graph I'm trying to create, basically a force directed graph with color coded regions surrounding groups of a feather.

It's the illustration on 3rd column, 2nd row, here, labelled "force-directed graph clusters": http://vis.stanford.edu/papers/d3

the code here generates the basic graph: http://mbostock.github.com/d3/ex/force.html

My question is: what is the code to dynamically generate the region polygons?

Answer 1

You could try integrating the example hull code with the force nodes.

Hull: http://bl.ocks.org/mbostock/4341699

Force Layout: http://bl.ocks.org/mbostock/1021841

This is the answer I provided in the comments:

http://bl.ocks.org/donaldh/2920551

Answer 2

If you are referring to the code that creates the circular nodes in the graph:

   var node = svg.selectAll("circle.node")
       .data(json.nodes)
     .enter().append("circle")
       .attr("class", "node")
       .attr("r", 5)
       .style("fill", function(d) { return color(d.group); })
       .call(force.drag);

Answer 3

See the force-cluster example in D3's repository.