5

How would I create the following graph with D3? I don't know the name for this type of visualization, and the closest I could find were "force-directed" graphs.

Legend: Filled nodes are people, non-filled nodes are attributes (e.g. favorite color).

Intended graph

Jonathan K
  • 651
  • 6
  • 15
  • Shameless self-promotion: You might want to try my library, [JSNetworkX](http://felix-kling.de/JSNetworkX/) (a port of the NetworkX graph library). It lets you model and visualize graphs (using D3). – Felix Kling Jun 16 '13 at 18:51
  • 1
    Looks like a force layout. If you have certain constraints on node positions (e.g. the colored nodes in the "centres"), you'll have to implement them yourself. – Lars Kotthoff Jun 16 '13 at 19:40
  • @LarsKotthoff any chance you have examples of how to do that, or perhaps resources I could look at to figure it out? – Jonathan K Jun 16 '13 at 20:03
  • I'm not aware of any examples that have such complex constraints. – Lars Kotthoff Jun 16 '13 at 20:11

2 Answers2

3

This is my version: http://jsfiddle.net/doraeimo/JEcdS/embedded/result/ which is easy to show system performance and network flow.

code is not here
Anderson
  • 2,496
  • 1
  • 27
  • 41
1

Hacked together a gross but working version: http://bl.ocks.org/hijonathan/5793014

Basically, I started with an array of people nodes that had some properties on them. I then loop through that and generate new nodes for each property, adding a target to it to link it back to the original node.

From there, you can use properties set on those two node types to style them and create corresponding nodes.

Jonathan K
  • 651
  • 6
  • 15