Beeswarm plot

100%

✓ Published0🌍 Public

Last edited Jul 19, 2018

Created on Jul 19, 2018

A beeswarm plot visualizes the distribution of 300 sampled values by arranging circles along a horizontal axis, with vertical positions reflecting each value. The code uses d3.forceSimulation with forceX, forceY, and forceCollide to position the circles, while d3.scaleOrdinal assigns categorical colors. The simulation updates circle coordinates via a tick handler, rendering the final layout as SVG elements.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

92% 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.

深深度碎片

86% match

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

86% 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

86% 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

85% match

Loading thumbnail…

Beeswarm (Most Broken)

A beeswarm plot visualizes the date each bumblebee was spotted in a dataset from BeeSpotter, with each bee represented as a small emoji icon. The icons are positioned along a time axis, using d3.forceSimulation with forceX and forceCollide to arrange points without overlap. A Voronoi overlay, generated via d3.voronoi, improves hover interaction by expanding the clickable area around each icon, displaying identifying information in a tooltip. The visualization is rendered as SVG with D3 v4.

BBBischof

84% match

Loading thumbnail…

Beeswarm comparison

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.

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