This block is a continuation of a previous one.

This sequel 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)

Compared to the previous block, this algorithm is ~2 times faster, because:

- computing possible colliders is faster
- when placing a new circle, collision detection (which iterates over already drawn circles) is executed if and only if the new tested placement is better than the one already found (gain is ~40%)
- collision detection is faster (now stoping at first collision)

The algorithm is:

- loop1 - for each new circle to place Ci:
- find 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 is a better placement than the already tested (best = closest to x-axis, consider absolute value)
- if Ci does not overlap others circles in AAC
- retain y-position as the best till now

- if Ci does not overlap others circles in AAC
- place Ci below Ca
- if Ci is a better placement than the already tested
- if Ci does not overlap others circles in AAC
- retain y-position as the best till now

- if Ci does not overlap others circles in AAC

- place Ci at best y-position, add Ci to AAC

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