I'm interested in combining the concepts of Hierarchical Edge Bundling and Radial Reingold–Tilford Tree. The end result would resemble this rough sketch:
The visualization I have created showing simple data in HEB can be found here: https://fiddle.jshell.net/d1766z4r/2/
I have already started combining the two types of data, as shown in the code snippet below. Feel free to suggest a better way to merge the data if needed.
var classes = [
{"name":"test.cluster1.item1","children": [
{"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]},
{"name": "test.cluster1.item5"}
]},
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]},
{"name":"test.cluster1.item3"}
];
As a beginner in d3.js and javascript, I am unsure how to proceed further, especially when it comes to linking specific subitems. Any guidance on implementing interactive features like collapsible elements similar to the Collapsible Tree example would be appreciated.
In the next steps, I plan to work on toggling the visibility of children nodes on click and potentially expanding upon the hierarchy with additional levels of children nodes.
Please feel free to provide partial solutions or advice as every bit counts towards achieving the desired outcome!