A curated compilation of plugins and all-things related to d3-force.
Please get in touch for any additions/corrections to this list. And as always, use the force!
| Plugin | Description | Code | Examples |
|---|---|---|---|
| d3.bboxCollide | Repelling force that prevents rectangular nodes from overlapping with each other. Great for avoiding label overlaps. | d3-bboxCollide | |
| d3.forceAttract | Spring-like force to attract nodes to a particular <x,y> point. | d3-force-attract | |
| d3.forceBounce | Elastic collision force between nodes. Useful to simulate natural collisions between circular objects that conserve energy and momentum. | d3-force-bounce | |
| d3.forceBoundary | Spring-like force to keep nodes within a rectangular container. | d3-force-boundary | |
| d3.forceCenter | Translate all nodes as a group towards the center of the canvas. Manipulates nodes coordinates directly, instead of their velocity. | d3-force (core) | |
| d3.forceConstant | Constant acceleration force. Useful to simulate permanent influences like weight and wind. | d3-force-constant | |
| d3.forceCluster | Spring-like force to attract nodes towards a set of cluster focus points. | d3-force-cluster | |
| d3.forceCluster-3d | Spring-like force to attract nodes towards a set of cluster focus points, working in three dimensions. | d3-force-cluster-3d | |
| d3.forceCollide | Repelling force that prevents circular nodes from overlapping with each other. | d3-force (core) | |
| d3.forceContainer | Constrain nodes to a bounding box. | d3-force-container | |
| d3.forceGravity | Gravity-like (inverse-square distance) force to attract nodes to a particular <x,y> point. | d3-force-gravity | |
| d3.forceLimit | Hard limit nodes positions to a specified range, with optionally a cushioning effect. | d3-force-limit | |
| d3.forceLink | Spring-like attraction/repulsion force applied to node-pairs. | d3-force (core) | |
| d3.forceMagnetic | Inverse-square (distance) attraction/repulsion force applied to all nodes or dedicated node-pair edges. Useful to simulate natural occurring forces such as gravity or electrostatic. | d3-force-magnetic | |
| d3.forceManyBody | Inverse-linear (distance) attraction/repulsion force applied to all nodes. Typically used as node repulsion in force-directed graphs for a distributed spread. | d3-force (core) | |
| d3.forceManyBodyReuse | Faster inverse-linear (distance) attraction/repulsion force applied to all nodes. Typically used as node repulsion in force-directed graphs for a distributed spread. Runs faster than d3.forceManyBody by reusing approximations. | d3-force-reuse | |
| d3.forceManyBodySampled | Linear-time inverse-linear (distance) attraction/repulsion force applied to all nodes. Typically used as node repulsion in force-directed graphs for a distributed spread. Runs faster than d3.forceManyBody and d3.forceManyBodyReuse by using the Random Vertex Sampling algorithm. | d3-force-sampled | |
| d3.forceRadial | Spring-like force to attract nodes towards the closest point on a circle or sphere surface. | d3-force (core) | |
| d3.forceSurface | Elastic collision force between nodes and surfaces, defined as line-segments. | d3-force-surface | |
| d3.forceX | Horizontal spring-like attraction force. | d3-force (core) | |
| d3.forceY | Vertical spring-like attraction force. | d3-force (core) | |
| d3.forceZ | Spring-like attraction force in the Z dimension for 3D representations. | d3-force-3d | - |
| forceInABox | Force implementation of the group-in-a-box layout algorithm. | forceInABox |
| Name | Description | Code | Example |
|---|---|---|---|
| d3-force-3d | Extended version of d3-force to run simulations in 3D or 1D. | d3-force-3d | |
| d3.forceEdgeBundling | Force-directed edge bundling algorithm. Self-organise edges on thick mesh graphs to decrease visual clutter. | d3.forceBundle | |
| d3-force-pod | Scaffolding component that automatically draws nodes/links according to a set of forces, for easy prototyping of force simulations. | d3-force-pod |
| Name | Description | Example |
|---|---|---|
| Brownian motion | Random particles hit the nodes and change their speeds. | Brownian Motion Urquhart |
| K-Means | K-means clusters can be computed as a force that colors nodes. | K-Means as a force |
| tSNE | tSNE computes positions in a webworker, and those positions are used as a force (allowing nodes to converge to their tSNE position while negotiating collisions etc.) | tSNE applied as a force |