2D Force-Directed Graph — Live Spring Physics & Editable Network

Graph

Click empty canvas to add a node. Right-click a node to delete it (and its edges); right-click near an edge to delete just that edge.

Forces

Repulsion (Coulomb) 2600

Spring stiffness (Hooke) 0.06

Spring rest length 90

Centering pull 0.010

Damping 0.86

settling…

Nodes

Edges

Avg degree

Kinetic energy

How it works

This is a real force-directed layout, the same family of algorithm behind d3-force and Fruchterman-Reingold, run entirely in 2D with an explicit Euler integrator:

every pair of nodes  i, j:
    repel with F = repulsion / d²   (Coulomb's law)
every edge (a, b):
    spring with F = stiffness * (d - restLength)   (Hooke's law)
every node:
    pull gently toward the canvas centre
each frame:
    v = (v + F/m * dt) * damping
    x = x + v * dt

Repulsion pushes every node away from every other node with a force that falls off as the square of the distance, so far-apart nodes barely feel each other while crowded ones spring apart fast. Each edge behaves like a spring: it pulls its two endpoints together if they are farther than the rest length, and pushes them apart if they are closer, always trying to settle at exactly the rest length. The weak centering force stops disconnected components from drifting off to infinity. Velocity damping bleeds off kinetic energy every frame so the system doesn't oscillate forever — watch the kinetic-energy stat fall toward zero as the layout settles into mechanical equilibrium.

Link Mode — click one node then another to add a spring edge between them; click the same node twice or empty space to cancel.
Add / remove — clicking empty canvas drops a new node exactly where forces will start acting on it; right-click removes a node (and its edges) or, near a line, just that edge.
Drag — grabbing a node pins it to the pointer while every other node keeps reacting live; release it and it rejoins the simulation with zero velocity.
Force sliders — turning repulsion up spreads the whole graph out; raising stiffness or shortening rest length pulls connected clusters tighter; damping controls how quickly oscillation dies out.
Real-world use: this is the same class of layout used to draw dependency graphs, social networks and knowledge graphs so that structurally related nodes end up visually close together.

Node = draggable point mass Edge = Hooke's-law spring

click empty space: add node · drag: move node · right-click: delete