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

I think the simulation-based algorithm would be the bbest choice, however, since your goal is to minimize overlapping arcs and not to optimize the distribution of nodes you should apply a repelling force between arcs (not between nodes) and use the nodes as springs.

Iteration:

1. For each arc in the graph compute its central point (averaging the starting point with the ending point)
2. for each couple of arcs apply a repulsion between their centres (both extremes of the arc move accordingly)
3. for each node in the graph compute its new position as the average of the connected arcs and update the related endpoint of the arc

You can also add a contraction phase with the nodes attracted to the middle of the graph (average of the coordinates of all the nodes).

Stop iterating when some stability threshold is reached.