Relationship Graph with D3

Question

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

Answer 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.

Answer 2

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