Gist 73e5cb2c456084a9c356f9c3f89f8803

100%

Gist 73e5cb2c456084a9c356f9c3f89f8803

✓ Published0🌍 Public

Last edited Jun 3, 2017

Created on Jun 3, 2017

An interactive particle field visualizes the gravitational attraction between a cursor and thousands of moving points. The code uses D3's quadtree for spatial indexing and d3.forceSimulation with custom force functions to compute particle velocities and positions, while a Vue component manages the animation loop and canvas rendering. The display updates in real time, with particles flowing toward and around the pointer position based on distance-based force calculations, creating a dynamic, organic swarm effect on a dark background.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

This example shows an interactive particle system that responds to mouse movement, with particles drifting and congregating around the cursor's position. Built with D3.js, it uses `d3.forceSimulation` with forces like `d3.forceX` and `d3.forceY` to steer particles toward the pointer, while `d3.forceCollide` keeps them from overlapping. The visualization renders on an HTML5 Canvas via the Canvas 2D API, with particle positions updated each frame from the simulation’s tick events. The README notes the code is authored by louatgithub and uses a simple color palette based on particle speed.

LLouis

77% 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…

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

76% match

Loading thumbnail…

Connected Particles

A field of one thousand particles drifts vertically on a dark canvas, with each particle’s size varying according to its speed to suggest depth. Thin curved lines connect nearby particles, with opacity fading as the distance between pairs grows beyond a minimum threshold. This animated piece uses D3.js for its timer and the Canvas API for all drawing, implementing a custom algorithm that updates vertical positions and wraps particles around the screen edges.

BBrideau

73% match

Loading thumbnail…

Gist a7d5ced57721ac3f7075bbbbaee32a49

This interactive visualization uses a force-directed simulation to animate a network of nodes and links, showing how connected elements cluster and repel. The code relies on D3’s `d3.forceSimulation` with custom forces for charge, centering, and collision, while link positions update via the simulation’s tick handler. Node rendering uses SVG circles, and the visualization reads its data from an embedded array of node and link objects, with no external data source. The interaction includes drag-and-drop support via D3’s drag behavior, letting viewers move nodes while the simulation continuously recalculates positions.

11wheel

73% match

Loading thumbnail…

Untitled

A force-directed particle system in SVG uses D3 v3’s `d3.layout.force` to simulate 200 circles with random radii, while a fixed center node applies a strong negative charge to repel others. A quadtree (`d3.geom.quadtree`) accelerates collision detection, and the layout’s `on("tick")` event updates circle positions. Mouse movement drives the root node’s velocity via `d3.mouse`, resuming the simulation. The visualization runs in React, though the rendering logic is pure D3.

Bbasskur

72% match

Loading thumbnail…

Untitled

This example demonstrates a force-directed graph rendered as a dynamic particle system. It shows interconnected nodes and links that are simulated using `d3.forceSimulation`, with each node represented as a small circle. The visualization updates the positions of these circles in real time based on the ongoing force calculations. The scene is drawn onto an HTML canvas element, with the code iterating through the simulation's tick events to redraw the particles and their connecting lines.

Qquintonio1000

72% match

Loading thumbnail…

Connected Particles II

A field of 100 small particles drifts vertically on a dark canvas, with translucent gray circles drawn between any pair that comes within 100 pixels of each other. As particles move, their connecting arcs fade in and out based on proximity, creating a shifting network of temporary links. The animation runs via a custom d3-timer loop, using Canvas arc and fill operations per frame. Each particle’s horizontal position is fixed, while vertical velocity varies randomly, causing them to wrap around the edges.

Mmbostock

72% match