Beeswarm

Dataviz logo representing a Beeswarm2 chart.

A beeswarm plot displays individual data points in a way that avoids overlap, showing the distribution of a numeric variable. This page is a step-by-step guide on how to build a beeswarm chart for the web using React and D3.js.

Useful links
inspirationd3 galleryAbout this chart
gif of a an interactive beeswarm plot

Interactive Beeswarm

Interactive Beeswarm with hover effect, annotation and search bar.

Distribution

Dataviz logo representing a Violin chart.
+

Violin

Dataviz logo representing a Density chart.
+

Density

Dataviz logo representing a Histogram chart.
+

Histogram

Dataviz logo representing a Box1 chart.
+

Boxplot

Dataviz logo representing a Joyplot chart.
+

Ridgeline

Dataviz logo representing a Beeswarm2 chart.
+

Beeswarm

Contact

👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on LinkedIn, or even send me an email pasting yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!