Logic to strategically place items in a container with minimum overlapping connections

Question

This is more of a algorithmic question. I have a page which using javaScript displays items and items relationship to other item by drawing arrow connection from source to t

Answer 1

It looks like simple closed polygon extraction to me. try this:

1. forget about direction of connections remove all redundant connections (bidirectional ones are duplicate)

2. find all closed loops

   start point is always container with more than 2 connections (or just with 1) so loop through unused neighboring containers until get back to the start point (set this path as used) or until reach endpoint (1 connection only, also set this path as used) or until reach crossroad (connections > 2, also set this path as used).

3. repeat until there are no unused line between containers left.

after this you have your graph decomposed to non intersecting parts.

now join them back together so no connection is intersecting. Shared connections are inside and non shared connections are on the outside. Open loop (with endpoints) can be anywhere.

I hope this helps