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 faster, because of:

- less collision checks (use a direct-access doubly-linked list of possible already arranged colliding circles, so that collision checks are restricted to a small area (square with side of 2*radius))

The more data to arrange, the more it is faster. The more circles are big (more possible collisions), the more it is faster.

The algorithm is:

- (hyp) circles to draw are ordered (from right to left in this example)
- (hyp) datum must have an identifier named ‘id’ (used for direct-access in the doubly-linked list)
- (init) cf. function ‘initArrangement’
- 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