Newton's cradle

100%

Newton's cradle

✓ Published0🌍 Public

Last edited Feb 5, 2022

Created on Jan 30, 2012

Newton's Cradle demonstrates a seven-strand pendulum simulation using D3.js v3’s force layout (`d3.layout.force`) with custom collision handling via the `d3.z.collide` plugin. Each strand contains five linked nodes, with the top node fixed and the bottom ball given mass and radius for elastic collisions. The `d3.geom.quadtree` accelerates collision checks, while `d3.svg.line` with cardinal interpolation renders the wires. The animation runs continuously, with the force layout’s `tick` event triggering redraws that update ball positions and wire paths.

AI-generated description

Similar vizzes

Loading thumbnail…

Newton's balls

The visualization shows hundreds of randomly sized and positioned circles bouncing off one another in elastic collisions, constrained by the window boundaries. Using D3's force layout, each circle behaves as a particle with mass proportional to its radius, and collisions are resolved through Newtonian physics implemented in a custom `d3.z.collide` module. The code leverages d3.v3, SVG rendering, and quadtree-based collision detection to animate the motion.

ZZJONSSON

78% match

Loading thumbnail…

D3 Force Simulation

A force-directed network of 100 nodes and 300 randomly generated links settles into a stable layout under a centering force, many-body repulsion, link distance constraints, and collision avoidance. The visualization uses D3 v4's `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide` to animate the physics, while nodes are draggable via D3's drag interaction. The simulation updates an SVG canvas on each tick, redrawing lines and circles as positions change. The random data is generated programmatically, creating an abstract, interactive demonstration of force-based layout.

CCarlosACalvo

70% match

Loading thumbnail…

Multi-Foci Force Layout

Five fixed nodes serve as force foci that attract and repel moving nodes in a 2D space. As the mouse moves, the user spawns new nodes with random radii and colors; these nodes are pulled toward a focus matching their type while colliding with each other via a quadtree. The simulation runs on D3 v3’s force layout with custom attraction and collision logic, rendering everything as SVG circles with animated transitions that remove nodes after three seconds. The `d3.layout.force` API drives the physics, and `d3.geom.quadtree` accelerates collision detection.

Mmbostock

69% match

Loading thumbnail…

strange dancing behaviour

This example shows a moving chain of 120 colored points arranged in a circle, whose nodes link sequentially and appear to “dance” unpredictably as the simulation runs. The user can drag the first node with the mouse, which perturbs the whole chain. The code uses `d3.forceSimulation` with custom forces, including a “dance” force that pushes each node away from its predecessor, plus `d3.forceManyBody`, `d3.forceX`, `d3.forceY`, and `d3.forceCenter`. Rendering is done on a Canvas via `getContext("2d")`, drawing arcs for points and line segments for links. The data is generated procedurally from 360 degrees divided by a sample rate of 3.

KKcnarf

68% match

Loading thumbnail…

N-Body Problem

Two hundred colored circles gravitate and collide, their motion traced by white velocity streaks, in an N-body simulation rendered on an HTML5 Canvas. The piece uses the D3 v3 APIs `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for efficient collision detection, and `d3.scale.linear` to map speed to a steelblue-to-brown stroke. Each tick pauses the simulation, redraws the scene, and resumes, with circle positions and velocities updated from prior frames.

Mmbostock

68% match

Loading thumbnail…

Force with Springy Links

A network of one hundred nodes linked in a branching tree structure renders with wavy, spring-like curved edges instead of straight lines. Dragging nodes with the mouse repositions them while the force simulation dynamically updates the paths. Using d3.forceSimulation for layout and d3.drag for interaction, the `wave` function computes each link path by sampling sine-wave offsets along the straight line between connected nodes, with the wave frequency scaled to the link’s length. Node radii and colors are randomly assigned from a categorical scale, and the d3-marcon library provides the full viewport canvas.

FFrissAnalytics

68% match

Loading thumbnail…

D3 Force Simulation

A force-directed network layout visualizes 100 nodes and 300 random links, rendered as circles and lines in an SVG canvas. The example uses D3 v4’s `d3.forceSimulation` with `forceCenter`, `forceManyBody`, `forceLink`, and `forceCollide` forces to compute positions. Nodes are draggable via `d3.drag`, which updates fixed positions (`fx`, `fy`) during interaction. The animation updates node coordinates and link endpoints on each simulation tick.

CCarlosACalvo

68% match

Loading thumbnail…

Gist 257543a98ae32a2d951e5f3cd5a06979

This interactive visualization simulates a dynamic network of nodes and edges, showing how force-directed layouts settle into a stable configuration. The scene renders a clustered graph where nodes repel and links constrain movement, with subtle visual feedback as positions update in real time. Built with D3.js, the example uses `d3.forceSimulation` and `d3.forceManyBody` to compute physics, while a canvas element draws the animated paths and circles. The code loads a Gist-sourced dataset via a JSON request, and the simulation updates each frame, demonstrating how forces like charge and link distance shape the final network structure.

MMbrownshoes

68% match