COEUS | COEUS : Semantic Web Application Framework | Frontend Framework library

I think a lot of what you did, specifically around data wrangling, was not necessary, especially since you called d3.hierarchy() and d3.cluster() afterwards. I've replaced this with d3.stratify (which deals with hierarchical data that is not yet in the right format).

I've also replaced d3.cluster with d3.tree() because it was unclear to me why you'd want to use d3.cluster here. Your data has multiple parents, multiple roots and even floating nodes, and d3 is not meant to deal with that. My workaround has been to attach pseudonodes to every level, so as to make sure that there is only one node and that all nodes are at the right level at all times. To make sure the links were drawn correctly, I've written a custom getLinks function, that can deal with multiple parents.

I've also written a custom link generator that draws the links somewhat in the way that you want them. d3 doesn't offer much of flexibility here, but you can use the source code for inspiration.

Edit

I've changed the logic to be more focused on which "partners" got a child, so both links to the same child are on the same level - like in your picture. I've also drawn the nodes based on how many partners they have, and have given every link an offset so the lines are more distinct.

I've sorted the nodes so that the real pro-creators are at the top (Zeus), which gives a more balanced and less crowded view.