Hey everyone! 👋 I'm currently working on a project and would love some feedback or support from this awesome group. I’ve been working on the requirements to build the graph showing data visualization of this data structure: Test Run (1) |----Test Suite (0..n) |---Test Case (0..n) |---Test Folder (0..n) |---Test Case (0..n) I tried with data on this workspace, you can check it out to see the data and the graph, but my requirement want to locate TestRun node position at the center of the chart container, I have no idea how to handle that, hope everyone here can support me. https://observablehq.com/@thu-workspace/disjoint-force-directed-graph I'm open to any suggestions, ideas, or resources you think might help improve it. Big thanks in advance — really appreciate the help! 🙏 Let me know if you’ve got time to chat or collaborate!

Are your trying to show an undirected graph, a hierarchical tree structure, a timeline, or something else?

Thanks for your response. I'm not sure if I understand it, but with the data structure I mentioned, only edges start from: • TestRun Node to TestSuite Node • TestSuite Node to TestFolder Node • TestSuite Node to TestCase Node • TestFolder Node to TestFolder Node • TestFolder Node to TestCase Node So which graph is best for showing data visualization for that, but make sure the UI design as my attached image in the workspace?

If you don't care about it being especially pretty, GraphViz is easy to work with: https://observablehq.com/@diracshore/algebraic-structures You could make a tree as long as only one path goes to each node: Plot: https://observablehq.com/plot/marks/tree D3: https://observablehq.com/@d3/tree-component Is that what you are looking for?

Thanks for your supports, I check your suggestions, the structure will match my req, but could we customize its layout because I have to make sure to implement the layout as designed

I sent you a suggestion on observable with your design in D3. Let me know if that is what you are looking for. https://observablehq.com/d/1785185c2abc89eb

Consider using my ReusableWidgets.org ForceGraph https://observablehq.com/d/7ba7c6ddcf4cd1a4

Thank you @Lao and @John Alexis Guerra Gomez so much for your suggestions and efforts, I will try and check to see and reply when having any concerns. 💗