block by Kcnarf 277bf4ac0c5a91a0be08be5dc23115c7

Linked *strict* Beeswarm

Full Screen

This block is a remake of HarryStevens‘s block: Linked Beeswarm, where the position of circle strictly encode dates, because I’m always confused when a beeswarm does not the job it was dedicated for.

To fix the y-coordinate for a strict encoding of the data-based value (here, the date), 1 line of code is required (before starting the force-based simulation):

data.forEach(function(d){ d.fy = y(d.book_year); });

Another option would have been to use the d3_beeswarm plugin, which computes the final arrangement thanks to a one-pass algorithm, which is much more faster than using a force-based simultation.


This is the code for the “linked beeswarm” chart I made for a story on the history of Hercule Poirot.

I added a checkbox to let you see the Voronoi diagram, which optimizes the size of the mouseover / tap area of each circle.