Bees with Random Colors

100%

Bees with Random Colors

✓ Published0🌍 Public

Last edited Feb 26, 2024

Created on Feb 25, 2024

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.

AI-generated description

A variation on Bees by Asrar Al Qassem that introduces randomness in the timings so that the animations feel more natural and are not looping at the same time.

MIT Licensed

Similar vizzes

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

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

88% match

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

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

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

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

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

74% match