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).
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).
Share Improve this question asked Jun 16, 2013 at 18:49 Jonathan KJonathan K 6516 silver badges15 bronze badges 4- Shameless self-promotion: You might want to try my library, JSNetworkX (a port of the NetworkX graph library). It lets you model and visualize graphs (using D3). – Felix Kling Commented Jun 16, 2013 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 Commented Jun 16, 2013 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 Commented Jun 16, 2013 at 20:03
- I'm not aware of any examples that have such plex constraints. – Lars Kotthoff Commented Jun 16, 2013 at 20:11
2 Answers
Reset to default 4This is my version: http://jsfiddle/doraeimo/JEcdS/embedded/result/ which is easy to show system performance and network flow.
code is not here
Hacked together a gross but working version: http://bl.ocks/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.