Skip to main content
SimilarExport ZIP
100%

Flocking

✓ Published0🌍 Public
TThanaporn-sk
Last edited Nov 1, 2019
Created on Nov 1, 2019

This interactive visualization demonstrates a flocking simulation where 30 agents move according to repulsion, orientation, and attraction zones, with colors indicating the current influence (red for repulsion, blue for attraction-only, green for orientation-only, turquoise for both). Users can adjust the three zone radii via number inputs, play, pause, or step through time using d3.interval, and click or drag points to inspect their radii and direction lines. The code uses d3.v4 with SVG rendering, d3.zoom for panning, and d3.transition for smooth radius changes.

AI-generated description

Flocking

This example is an implementation of a simple flocking algorithm that uses the dynamics of repulsion, attraction, and orientation zones. This example is based off of the algorithm described by Couzin.

The basic principle is that each agent has three regions in a growing radius around it: a zone of repulsion, a zone of orientation, and a zone of attraction respectively. By editing the sizes of these zones you can expect to experience different behaviour.

Color Key:

  • Black: point is not being influenced by any other points (no points in any zones)
  • Red: point is being repulsed (contains points in its zone of repulsion)
  • Blue: point is being influenced by attraction forces only (contains points only in its zone of attraction)
  • Lawn Green: point is being influenced by orientation forces only (contains points only in its zone of orientation)
  • Turquoise: point is being influenced by both attraction and orientation forces (cointains points in both its zone of attraction and zone of orientation)

Controls:

  • Use the Play button to start animation
  • Use the Pause button to stop animation
  • Use the Next button to do one time step of the algorithm.
  • Clicking a point toggles display of its zone radii and direction line.
  • While paused, points can also be dragged around and positioned.

Dragging/Zooming behavior forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084'>Drag & Zoom II</a>

forked from <a href='http://bl.ocks.org/lwthatcher/'>lwthatcher</a>'s block: <a href='http://bl.ocks.org/lwthatcher/0414d5891a2ff084d48c1619e9a26d1c'>Directional Forces</a>

forked from <a href='http://bl.ocks.org/lwthatcher/'>lwthatcher</a>'s block: <a href='http://bl.ocks.org/lwthatcher/f03996c7a5efcde54b9bb6928a4ed901'>Flocking</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Flocking boids

A canvas-based flocking simulation that animates hundreds of boids following Craig Reynolds’ classic behavioral rules of alignment, cohesion, and separation. Clicking on the canvas adds new boids. The default “By Movement” coloring shades each boid via d3.interpolateWarm based on a moving average of its acceleration magnitude, while an alternative “Rainbow” mode assigns colors via d3.interpolateRainbow. A dat.GUI panel adjusts parameters like flockmate radius, velocities, and starting formations, with each frame rerendering trails on two stacked canvas elements.

TThanaporn-sk
77% match
Loading thumbnail…

Flocking faces

Hundreds of hand-drawn face sketches, loaded from a JSON file of stroke coordinates, swarm across a canvas as a boids-style flocking simulation. Clicking adds more boids. Each face is drawn with a `d3.line` and `curveBasis` call. The color of each face indicates its movement speed, mapped via `d3.interpolateWarm` to a moving average of acceleration magnitude. The simulation uses the `Vec2` library for vector math, and renders to two layered Canvas elements to create motion trails. Adjustable parameters for flocking forces and starting positions are exposed through a `dat.GUI` control panel.

TThanaporn-sk
76% match
Loading thumbnail…

d3-force-cluster and d3-force-attract

A network of colored circles groups into ten distinct clusters while a dynamic attract force pulls them toward the mouse position. The visualization uses `d3.forceSimulation` with custom `d3.forceAttract` and `d3.forceCluster` plugins to combine attraction and clustering forces, while `d3.forceCollide` applies collision avoidance. Nodes are rendered as SVG circles, and their radius and color encode cluster membership and size. The attract target updates on mouse movement, and collision strength ramps up over a three-second transition to create a smooth settling effect.

TThanaporn-sk
72% match
Loading thumbnail…

Spiraling Birds

A swarm of 130 triangular birds spirals toward the mouse cursor against a dark background, with each bird’s color shifting from yellow to red based on its distance from the pointer. The simulation uses d3.forceSimulation with custom forces: forceSpiral steers the flock toward a logarithmic spiral pattern, while forceB applies local cohesion and alignment based on nearby birds within 30 pixels. A forceCollide prevents overlap, and mouse movement resets the simulation’s alpha to 1, restarting the motion. The birds are rendered as SVG paths, with their rotation and fill color updated on each tick.

TThanaporn-sk
71% match
Loading thumbnail…

Multi-Foci Force Layout

A multi-foci force layout clusters 100 circles into four groups using D3’s d3.layout.force with position Verlet integration. Custom forces push nodes up, down, and sideways based on their index, while d3.event and force.drag enable mouse interaction. Clicking the page perturbs node positions with random offsets, and the simulation resumes. SVG circles render with a categorical color scale and animate smoothly via the tick event.

Mmbostock
70% match
Loading thumbnail…

d3-force-cluster and d3-force-attract

Two hundred circles, shaded by cluster with a sequential rainbow scale, are positioned by a force simulation that combines `d3.forceAttract` to pull nodes toward the screen center and `d3.forceCluster` to group them into ten distinct clusters. The layout uses `d3.forceSimulation` with a custom `d3.forceCollide` whose strength ramps up over three seconds for a smooth transition. Each node is an SVG circle, rendered with `d3.drag` for interactive repositioning, while the tick handler updates the `cx`, `cy`, and `r` attributes. The data is generated randomly, with radii varying by cluster, and the example runs in the browser using D3 v4 and the `d3-force-attract` and `d3-force-cluster` plugins.

AAlainRo
69% match
Loading thumbnail…

d3-force-attract: mouse attract II

Fifty circles with randomized positions and radii are rendered as an SVG. The visualization demonstrates a multi-force physics simulation where a force-based layout continuously attracts the circles toward the current mouse location while a separate collision force keeps them from overlapping. The example uses `d3.forceSimulation()` and `d3.forceAttract()` from the d3-force-attract library, with per-node attract strength defined via the `inertia` property. A mouse-move event updates the attract target and restarts the simulation, updating circle positions on each tick.

FFrissAnalytics
69% match
Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock
69% match