Swarmalator

100%

✓ Published0🌍 Public

Last edited Jul 2, 2018

Created on Nov 19, 2017

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.

AI-generated description

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

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

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

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

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

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

70% match

Loading thumbnail…

Untitled

This example visualizes a dynamic, two-dimensional particle system where thousands of glowing points drift and collide within a bounded rectangular field. It shows the emergent patterns of clustering and dispersion as forces of attraction and repulsion act on the particles over time. The code uses `d3.forceSimulation` with custom force functions to manage particle velocities and positions, rendering each frame to an HTML5 Canvas. Particle trails are created by semi-transparent redraws, and the interaction of the forces produces a fluid, organic motion across the display.

Ssnowswirlin

69% match