šŸ‘‹ hi, Iā€™m basile

A beeswarm layout in Observable -- on deadline

I recently had to complete a technical test for a role I’m interested in.

The task: from a story out of the Global Witness website, can you come up with an alternative visualisation? You’ve got two hours.

As there were no embed constraints, I figured there was no point in faffing with boilerplate code and scaffolds, so I went down the Observable route to put a chart together.

Here’s what we need scales-wise:

But as donation amounts overlap each other, so do our circles. Here they are, with a small increasing offset to show this banding effect:

Comes the force layout to the rescue, adding some simulated entropy to the x/y coordinates of our circles and allowing us to appreciate the difference in scale between the two columns.

const simulation = d3
  .force('x', d3.forceX(d => x(d.category)).strength(0.2))
  .force('y', d3.forceY(d => y(+d.donationUSD)).strength(1))
  .force('collide', d3.forceCollide(d => size(Math.sqrt(+d.donationUSD))))

We apply three forces to our simulation:

Here they are, showing the influence of x and y’s .strength():

Did I say I had two hours to do this? I had to skimp on the annotations, which I’ve positioned manually and quite roughly as elements.

Read more:

#d3 #observable #viz