Skip to main content
100%

beeswarm plot

✓ Published0🌍 Public
Aaaizemberg
Last edited Jul 10, 2018
Created on Jul 10, 2018

A static beeswarm plot shows the distribution of values from the flare.csv dataset, with each circle positioned along a logarithmic x-axis and vertically jittered to avoid overlap. The visualization uses d3.forceSimulation with d3.forceX, d3.forceY, and d3.forceCollide to compute non-overlapping positions, then renders SVG circles and a Voronoi overlay via d3.voronoi to improve hover interaction. An axis generated with d3.axisBottom labels the scale, and hovering a cell highlights the circle while a tooltip displays the item’s ID and value.

AI-generated description

A static beeswarm plot implemented using d3-force’s collision constraint. A Voronoi overlay improves hover interaction.

forked from: https://bl.ocks.org/mbostock/6526445e2b44303eebf21da3b6627320

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.

深深度碎片
91% 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
91% 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
90% match
Loading thumbnail…

Beeswarm plot

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.

PPragyagarg
89% 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
88% 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
87% 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
86% match