/d3-force-registry

A curated compilation of plugins and all-things related to d3-force

d3-force-registry

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!

Force Plugins

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.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.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

Modules

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

Prototype Ideas

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