Jun 9, 2023
Animated Bee Swarm Chart
Creating an animated bee swarm chart using d3 and force simulation
A bee swarm chart is a type of scatter plot that uses a force simulation to prevent overlapping points. This is a great way to visualize a large number of points in a small space. It also allows for single dimension data to be visualized in a 2D space. By using a force simulation, the points will automatically move to avoid overlapping each other.
The BeeSwarmChart above works with the
forceSimulation from d3. Taking the
data and applying a forces to it, the points will move to avoid overlapping
while clustering around the
timestamp value. The forces include:
- forceX: Moves the points along the x-axis based on the
- forceY: Moves the points towards the center of the chart.
- collide: Prevents overlapping of points by applying a radius to each based
To add some interesting interactions, when you click on a point, it will highlight all points of that type and apply an additional force to move them closer to each other while increasing the forceY towards the center.
Using Leva, I created a GUI to control the forces and the data. This allows you to change the forces and see the interactions in real time. The GUI can be expanded by clicking the dark grey panel in the top right and changing the values to update the chart.