How to create a beeswarm plot with variable radius in d3js v5?

Question

For reference, a beeswarm plot with variable radius looks like this:

Mike created an example of a beeswarm plot with d3 version 5. However, the radius of all the data points must be the same:

Is it easy to make a beeswarm plot with variable point radius in d3 v5? I did this years ago in d3 version 3 and curious if there's any updated examples.

Answer 1

The ObservableHQ plot in d3 v5 is built conceptually differently than the d3 v3 example. Specifically, it replaced the D3 force layout simulation with a custom dodge function. The code was much simpler because it could assume that all the particles had a fixed radius, which made simulating considerably easier. In other words, I don't think there's a short way to port the new code sample to work with variable radii.

However, the easier path is taking the v3 code you've written and making it work with D3 v5, which I've done in this block to work using D3 v5 functions. The primary changes were to

• Compose library d3-force functions instead of using the custom functions collide and gravity to detect collision and apply particle effects. This eliminated the need to read the event.alpha variable, which is no longer available as a callback to the tick function in v5.
• Renamed several functions from v3 to their v5 equivalents, such as scaleLinear and axisBottom.

I used blockbuilder to build this modified code sample.