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

- D3.js (v3.5.5)
- blockbuilder.org