Search code examples
javascriptd3.jsdata-visualizationgraphing

Relationship Graph with D3

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

Solution

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