Skip to main content
SimilarExport ZIP
100%

Swarmalator

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 5, 2018
Created on Oct 5, 2018

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.

AI-generated description

d3.forceSimulation for https://www.nature.com/articles/s41467-017-01190-3

Observable version: https://beta.observablehq.com/@fil/swarmalator

(See also http://usediscretion.blogspot.fi/2017/01/the-swarmalator.html )

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/2cec616f64cda2cdb0e7302c9b1be3a5'>Swarmalator</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Swarmalator

The Swarmalator visualizes the collective dynamics of particles whose pairwise interactions depend on both spatial distance and phase difference, reproducing the mathematical model from a *Nature Communications* paper. Particles are added or removed up to a user-set count, while phase drives each dot’s color via a circular HSL scale. The simulation uses d3.forceSimulation with a custom force that updates velocity and phase according to the swarmalator equations, then redraws circles on a Canvas. Interactive controls via dat.GUI adjust particle count, coupling strengths, and a temperature mode that recolors particles based on their kinetic energy.

PPhilippe Rivière
92% match
Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Mmbostock
80% match
Loading thumbnail…

Untitled

This visualization shows a simulated swarm of glowing particles that respond to mouse movement, creating a dynamic, organic flow across the screen. The particles are governed by a physics system using `d3.forceSimulation` with forces for centering, collision, and velocity, while each particle’s position and trail are drawn on an HTML5 `<canvas>` via `requestAnimationFrame`. The code uses `d3.scaleLinear` to map distance and speed to color and opacity, and the mouse interaction adjusts the simulation’s force strengths in real time. The rendering relies entirely on canvas 2D context methods like `arc` and `fillRect`, with a dark background from `styles.css`.

Eemanuelemurgolo
77% 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
76% match
Loading thumbnail…

Particle collision

A swarm of 1,500 glowing particles falls and collides within shifting circular walls and a planet-like boundary, leaving colorful motion trails on a black canvas. The simulation uses `d3.forceSimulation` with custom collision, gravity, and wall-locking forces, rendered via Canvas 2D. Two particle groups cycle through D3 color interpolators (e.g., `d3.interpolateViridis`, `d3.interpolateMagma`), and randomized settings for radius, gravity, and palette timing make each reload unique.

FFrissAnalytics
76% 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
76% 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
74% 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
73% match