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?

donaldh · Accepted Answer · 2015-04-21 08:36:25Z

8

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

edited Apr 21, 2015 at 8:36

answered May 25, 2012 at 22:34

donaldh

8331 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AcroYogi Over a year ago

that, @donaldh, is definitely a push in the right directions... now only if i were a coder... i am a designer, could you suggest some more specific integration examples

donaldh Over a year ago

I wanted to experiment with this myself so have hacked the force-multi-foci example to add a convex hull. http://bl.ocks.org/2918073. When I get a chance I will extend the example to create a path around each category of nodes.

donaldh Over a year ago

Okay, here is v2 with a convex hull for each cluster of nodes. bl.ocks.org/2920551. bl.ocks.org seems to be down just now so here is the gist gist.github.com/2920551

AcroYogi Over a year ago

Wow, Donald! That is PERFECT! amazing! awesome! THANK YOU!

mbostock · Accepted Answer · 2012-05-24 06:23:22Z

4

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

answered May 24, 2012 at 6:23

mbostock

51.8k13 gold badges178 silver badges130 bronze badges

3 Comments

AcroYogi Over a year ago

Thanks Mike. I looked at that... that one has expandable circles representing the clusters. Is the code available to render the actual dynamic polygons as shown in the illustration?

bluesmoon Over a year ago

link is now a 404. Could you fix it?

dotcomXY Over a year ago

Here is a cluster force layout example

analyticalpicasso · Accepted Answer · 2014-04-16 16:54:46Z

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);

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Linked

Related