Skip to main content
SimilarExport ZIP
100%

Beeswarm comparison

✓ Published0🌍 Public
KKcnarf
Last edited Apr 11, 2017
Created on Jul 20, 2016

This example compares two beeswarm techniques for plotting the flare.csv dataset, in which dots are offset vertically to avoid overlap without changing their x-position. A force-based arrangement uses d3.forceSimulation with x, y, and collision forces, while a second arrangement uses the d3-beeswarm plugin. Red coloring and connecting lines highlight deviations from the exact encoded x-value, showing that the force method shifts dots horizontally more than the beeswarm method. Both use SVG rendering and Voronoi cells for interaction.

AI-generated description

This <a href='http://bl.ocks.org/Kcnarf/5f9491610aa5a5c085d48d66164de36a'>block</a> compares 2 techniques that both produces a static beeswarm.

The top most beeswarm is the one from mbostock's beeswarm block. It is implemented using d3-force’s collision constraint. The bottom most beeswarm is produced with the d3-beeswarm plugin I made (see the Github project).

This block aims to understand the differences, advantages and drawbacks of the 2 techniques. I'm focusing this comparison on the capability of the beeswarm to exactly reflect the encoded data (ie. the x-coordinate should exactly reflects the encoded data): the more it's red, the less it represents the encoded data. That's the main reason why the d3.force technique doesn't suit my needs, and why I made the d3-beeswarm plugin.

Here are some thoughts:

  • exactly encoded data: this block allows to vizualize the main drawback of a force-based beeswarm, that allows to re-arrange horizontally each dot; note that this behaviour could be considered marginal and not so important, but this is a high-level constraint for my usecase ... One can notice that most of the deviations come when there is some accumulation (see around 600 or around 3200)
  • computation time: force-based beeswarm takes more time to be computed, as the d3.force is a generic algorithm that does a lot more than just producing a beeswarm arrangment
  • aesthetic: the 2 beeswarms look great; the second beeswarm is less compact because it exactly encodes data; note that the easthetic of the second beeswarm seems 'to go to the right' because data are sorted from max to min before computing the arrangement
  • live arrangement: one can decide to vizualize the live arrangement of the force-based beeswarm ... adding the waouhhh effect
  • rearrangement: (not experimented) I guess one can easily add/remove/drag a node on the force-based beeswarm, which will in response rearrange itself automatically ... adding the waouhhh effect once again

Acknowledgments to:

  • <a href='https://d3js.org/'>D3.js</a> (v4)
  • <a href='http://blockbuilder.org'>blockbuilder.org</a>
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Beeswarm (With Flying Bees)

A beeswarm chart plots the Flare data set's hierarchical node values on a logarithmic x-axis. The visualization uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to arrange individual points. Each point is rendered as a bee emoji via an SVG `image` element, and after a delay, the bees animate to a new position. A Voronoi overlay, created with `d3.voronoi`, improves hover interaction by expanding the clickable area for tooltips that show the node's ID and value.

BBBischof
85% match
Loading thumbnail…

Beeswarm

A beeswarm plot displays the distribution of numeric values from a CSV dataset, with each circle representing a data point positioned along a logarithmic x-axis. The circles are arranged using d3.forceSimulation with forceX, forceY, and forceCollide to prevent overlap. A Voronoi overlay via d3.voronoi improves hover interaction: hovering over any cell highlights the corresponding circle in red, and a tooltip shows the data point’s ID and value. The visualization renders in SVG with an axis label and tick formatting.

FFrissAnalytics
84% match
Loading thumbnail…

Beeswarm

This beeswarm plot displays the hierarchical structure of the Flare data set, encoding each node’s value as a logarithmically positioned point along the horizontal axis. The visualization employs a force-directed layout via `d3.forceSimulation`, using `d3.forceX` and `d3.forceY` to align points, while `d3.forceCollide` prevents overlap, creating a dense, non-overlapping distribution. To support hover interactions, it overlays a Voronoi diagram (constructed with `d3.voronoi`), rendering transparent cell paths that highlight the nearest circle in red on mouseover. The SVG output includes a logarithmic axis and tooltips showing each item’s name and value.

Mmbostock
84% match
Loading thumbnail…

30.Beeswarm

A beeswarm plot distributes circular marks along a logarithmic x-axis to show the distribution of file sizes from the flare dataset, with a force simulation stacking points vertically to prevent overlap. A Voronoi overlay expands the hover target for each point, displaying a tooltip with the file’s ID and value. The visualization uses d3.forceSimulation with d3.forceX, d3.forceY, and d3.forceCollide, rendered as SVG, with a d3.axisBottom log scale and d3.voronoi polygons for interaction.

深深度碎片
83% match
Loading thumbnail…

d3-beeswarm plugin

This example demonstrates the d3-beeswarm plugin, which arranges one-dimensional scatter plots into closely-packed, non-overlapping points. It uses a dedicated one-pass algorithm rather than d3.force layout to avoid disrupting data ordering or requiring iterative equilibrium. The visualization shows word-stem trends from a CSV dataset, rendered as SVG circles with color encoding by rank, and includes interactive controls for sorting, orientation, radius, and extreme-value handling strategies. The plugin’s `d3.beeswarm()` API distributes points along an axis while freeing the perpendicular coordinate to meet the non-overlapping constraint.

KKcnarf
83% match
Loading thumbnail…

profbeeswarm1

This example uses the D3.js force simulation to create a beeswarm plot from hierarchical flare data, where each circle’s horizontal position encodes a numeric value. The x-axis is scaled linearly to the `Overall` field from `simple1.csv` (though the provided data appears to be from flare.csv with an id and value). The visualization positions circles using a force-directed layout with an x-force anchored to the value, a y-force centering vertically, and collision detection to prevent overlap, producing a compact distribution of points along the horizontal axis. Rendered in SVG, the plot includes axes and hover interactions that highlight circles in goldenrod.

335degrees
83% match
Loading thumbnail…

Beeswarm (Broken)

This example visualizes the hierarchical structure of the Flare data set as a beeswarm plot. It uses a custom emoji, a honeybee, to represent each data point, with a voronoi overlay that highlights the nearest bee in red when hovered. The visualization is built with D3 v4, employing `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to position the points, and `d3.voronoi` to generate the interactive cells. The x-axis uses a log scale to display the data values from the provided CSV file.

BBBischof
82% match
Loading thumbnail…

Beeswarm + maintain x-position of nodes

A beeswarm chart displays French word stems ranked by frequency and trend score, with each circle colored by rank from light green to pink. The visualization uses D3 v4's `d3.forceSimulation` to separate overlapping nodes while maintaining each circle’s original x-position based on its trend value. To achieve this, the tick function resets x coordinates each frame while progressively increasing the `d3.forceCollide` radius to reduce jitter. Hovering reveals a tooltip showing the stem, rank, and trend value.

KKcnarf
82% match