This block experiments a way to vizualise the distribution of things (whatever it is) in a horizontal way (ie. along the x-axis), where constraints/objectives are:
- to maintain the exact position of each datum (represented by a circle) along the x-axis
- to be able to hover each circle to show related datum (handle overlapping)
In previous blocks (1, 2), I tried the Force Layout.
Now I try to implement my own arrangement algorithm (with the secret objective that it will be faster than using the Force O_° … and, hopefully, it is).
The resulting arrangement can be used as-is (shown in this example), or can be a good starting point before applying the Force. In this later case, final arrangement with the Force will be obtained faster than with the random default arrangment.
The algorithm is:
- (hyp) circles to draw are ordered (from right to left in this example)
- (init) already arranged circles AAC = [], used for (windowed) collision detection
- loop1 - for each new circle to place Ci:
- retain in AAC only already drawn circles susceptible to overlap (close enought to Ci, distance from Ci <= 2*r)
- if AAC is empty, place Ci on the x-axis (Ci.y = 0), push Ci in AAC, continue loop1
- loop2 - for each Ca in AAC:
- place Ci above Ca
- if Ci does not overlap others circles in AAC, retain y-position if it is the best till now(best = closest to x-axis, consider absolute value)
- place Ci below Ca
- if Ci does not overlap others circles in AAC, retain y-position if it is the best till now
- place Ci at best y-position, add Ci to AAC
Acknowledgments to: