Skip to main content
SimilarExport ZIP
100%

flying-beeswarm

✓ Published0🌍 Public
11wheel
Last edited Mar 3, 2018
Created on Mar 3, 2018

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()`.

AI-generated description

See beeswarm-path for a tidier implementation of beeswarm along a path.

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

beeswarm on square and circle path

A beeswarm animation arranges 300 colored circles along a square path, then morphs the path into a circle using the Flubber library’s shape interpolation. The code uses d3.forceSimulation with forceCollide, forceX, and forceY to pack the circles onto the path, while transition.attrTween animates the path shape change. A button triggers the switch between square and circular layouts. Data values map to colors via d3.scaleSequential with an interpolateRainbow scale, and each bee’s position is calculated from its path length using node.getPointAtLength.

FFrissAnalytics
83% 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
81% match
Loading thumbnail…

variable-height-beeswarm

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.

11wheel
81% match
Loading thumbnail…

Bees with Random Timing

A field of 200 black bees flutters across an 800-by-600 SVG canvas, each moving independently with randomized timing. The bees’ wings flap via recursive `transition.attrTween` calls that interpolate between scale states, while each bee repositions itself using a linear-eased `transition` that picks new random coordinates on completion. The code uses D3 v6 to append bird groups, circles for bodies, and quadratic paths for wings, with randomized flap speeds and movement durations to avoid synchronized looping. The pink flower styling is defined in CSS but no flowers are drawn.

CCurran Kelleher
78% 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
77% 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
77% match