Monocomb

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 4, 2015

Monocomb is an animated canvas visualization of a bee-like form, built with the d3-timer and d3-color libraries. It continuously draws a stochastic, particle-based structure that resembles a honeycomb or swarm, using a custom physics simulation driven by requestAnimationFrame. The piece renders directly on a black background, with colors generated procedurally through the d3-color API. Its motion and form emerge from timer-driven updates, creating an evolving, abstract biological pattern.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Colorcomb

Four hundred particles drift and bounce across a full-screen canvas, their paths perturbed by random forces and velocity damping. A Voronoi tessellation of their positions is drawn twice: first as a thick black stroke for contrast, then each cell is stroked with a color derived from its centroid’s screen coordinates, converted through `d3.lab` and `d3.hcl` with a hue that rotates over time. The animation uses `d3-timer`, `d3-voronoi`, and Canvas 2D rendering.

Mmbostock

73% match

Loading thumbnail…

Colorcomb II

A Voronoi diagram of hundreds of colored cells animates on a black canvas, with each cell’s color shifting over time toward a shared palette. The visualization is rendered using the `d3-voronoi` library, which computes the tessellation, while a Canvas drawing loop continuously updates the cell fills. The animation derives from per-cell color interpolation, creating a slowly morphing mosaic of polygons. The code is a single self-contained HTML file using JavaScript and the Canvas API, with no external data source beyond the procedurally generated initial cell positions and colors.

Mmbostock

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

68% match

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Mmbostock

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

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

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

67% match

Loading thumbnail…

Swarmalator

A swarm of colored circles self-organizes into dynamic patterns, with each particle's hue representing its internal phase. The simulation uses `d3.forceSimulation` to integrate pairwise interactions that combine spatial attraction with phase coupling, controlled by adjustable parameters J and K. Colors transition smoothly via an HSL mapping, while an optional temperature mode recolorings particles based on their kinetic energy using an Inferno colormap. The visualization runs on a Canvas element, rendered in real time as the swarm evolves and responds to mouse interaction.

FFrissAnalytics

66% match