variable-height-beeswarm

100%

variable-height-beeswarm

✓ Published0🌍 Public

Last edited Nov 10, 2021

Created on Nov 10, 2021

Ten small multiples show a variable-height beeswarm, where each panel displays a normal distribution sampled with `d3.randomNormal`. Animated via SVG, the beeswarms settle through a force simulation using `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide`. The code iterates over reversed ranges to generate a series of jittered dot plots, using D3's selection and translation APIs to render the circles.

AI-generated description

Similar vizzes

Loading thumbnail…

flying-beeswarm

A swarm of 600 colored circles flies along a looping cubic Bézier path that morphs in time. Each circle’s position along the path is fixed by a random value, but `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` jitters the circles apart each frame, creating a dense, collision-free cluster that stretches and warps as the path undulates. The path is drawn as a thick yellow stroke, and circles are rendered in SVG with positions updated via `translate`. Data is procedurally generated using `Math.random()`.

11wheel

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

80% match

Loading thumbnail…

beeswarm-path

A swarm of 300 circles is arranged along a curved path. Each circle is positioned near a random point on the path using a force simulation with `d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide`, then animated for 120 ticks. The SVG path is rendered in magenta with 40px stroke and low opacity. Tooltips appear on hover via `d3.attachTooltip`, and the visualization uses SVG for graphics.

11wheel

80% match

Loading thumbnail…

Bees

This example presents an animated SVG scene where 20 bee-like figures move randomly across an 800×600 canvas. Each bee consists of a yellow circular body and two gray wings that continuously flap using `d3.interpolateString` within a recursive `transition.attrTween` loop. The bees’ positions are updated every 10 seconds via chained `transition` calls with `easeLinear`, selecting random coordinates from the viewport. The scene uses D3 v6 to build and animate the SVG elements directly within HTML, with no external data source.

AAsrar Al Qassem

79% match

Loading thumbnail…

Bees with Random Colors

Four hundred randomly colored bees—small circles sporting rainbow fill and white, semi-transparent wings—drift through an endless black SVG canvas. Each bee flutters with an individual timing, using `transition.attrTween` to scale wing paths in a sine-like flapping cycle and `interpolateRainbow` to pick its color. Random durations and delays in movement and flapping prevent synchronized loops, producing a natural, chaotic swarm. The animation is built with D3.js v6, rendering SVG elements and orchestrating infinite, staggered motion.

CCurran Kelleher

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

79% match

Loading thumbnail…

beeswarm on square and circle path

A swarm of 300 colored circles, sized and colored by random values, arranges itself along a square path that smoothly morphs into a circular path. A button toggles the shape transition, during which the swarm repositions itself to follow the changing path geometry. The visualization uses D3 v4’s `d3.forceSimulation` with `d3.forceCollide`, `d3.forceX`, and `d3.forceY` to pack the circles, and Flubber’s `toCircle` and `fromCircle` functions to interpolate the path shapes via `transition.attrTween`. The renderer is SVG, with a `path` element providing the guide and circle elements for the bees.

KKcnarf

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

79% match