Charts > Beeswarm Chart ​

A beeswarm chart is a visualization that displays individual data points along a single axis, avoiding overlap by spreading them out horizontally based on their distribution.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Animation

Style

Usage Example ​

<template>
  <div class="relative">
    <BeeswarmChart :data="data" @hover="hover = $event" @brush="select" />
    <button
      v-show="selected"
      @click="reset"
      :animate-enter="animateEnter"
      class="ot-btn absolute top-0 right-0 px-2 text-xs"
    >
      Return
    </button>
  </div>
</template>

<script setup>
const selected = ref(null);
const animateEnter = ref(true);

const select = (e) => {
  if (e && zoomOnBrush.value) selected.value = e.data;
};
const reset = () => {
  animateEnter.value = false;
  selected.value = null;
};
</script>

Component API ​

The beeswarm is built using SVG and d3. The dots are animated using GSAP on enter, and d3 transition on update.

The components supports hovering individual dots, hovering by region, and brushing (dragging the mouse to select a region).

Data ​

[
  {
    id: "ESP",
    name: "Spain",
    value: 75,
  },
  ...
]

Props ​

Events ​

Dependencies ​

• d3
• GSAP
• accurate-beeswarm-plot

Featured in ​

• Spott