• Stars
    star
    133
  • Rank 272,600 (Top 6 %)
  • Language
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
HTML
4,252
star
2

react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
HTML
1,861
star
3

globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
HTML
1,809
star
4

force-graph

Force-directed graph rendered on HTML5 canvas
JavaScript
1,409
star
5

three-globe

WebGL Globe Data Visualization as a ThreeJS reusable 3D object
JavaScript
1,071
star
6

react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL
HTML
775
star
7

timelines-chart

Timelines Chart
JavaScript
527
star
8

three-spritetext

A sprite based text component for ThreeJS
JavaScript
306
star
9

sunburst-chart

A sunburst interactive chart web component for visualizing hierarchical data
JavaScript
273
star
10

three-forcegraph

Force-directed graph as a ThreeJS 3d object
JavaScript
219
star
11

3d-force-graph-vr

3D force-directed graph component in VR
HTML
208
star
12

3d-force-graph-ar

3D force-directed graph component in AR
HTML
87
star
13

aframe-forcegraph-component

Force-directed graph component for A-Frame
JavaScript
77
star
14

three-fatline

A ThreeJS Line object with variable width
JavaScript
68
star
15

circlepack-chart

A circle packing interactive chart web component for visualizing hierarchical data
JavaScript
55
star
16

kapsule

Kapsule - A closure based Web Component library
JavaScript
54
star
17

treemap-chart

A treemap interactive chart web component for visualizing hierarchical data
JavaScript
54
star
18

three-geojson-geometry

ThreeJS geometry to stroke GeoJSON objects on a sphere
JavaScript
52
star
19

globe-ar

3D Globe data visualization component in AR
HTML
51
star
20

three-render-objects

Easy way to render ThreeJS objects with built-in interaction defaults
JavaScript
45
star
21

horizon-timeseries-chart

A chart to represent time-series data using multiple vertically layered horizon area plots
JavaScript
44
star
22

three-conic-polygon-geometry

ThreeJS geometry for drawing polygons on a sphere
JavaScript
36
star
23

canvas-color-tracker

A utility to track objects on a canvas by unique px color
HTML
34
star
24

icicle-chart

A partition / icicle interactive chart web component for visualizing hierarchical data
JavaScript
33
star
25

d3-geo-zoom

Zoom and pan D3 geo projections
JavaScript
30
star
26

aframe-globe-component

3D Globe data visualization component for A-Frame
JavaScript
30
star
27

d3-force-magnetic

A natural attraction/repulsion force type for the d3-force simulation engine
JavaScript
27
star
28

hilbert-chart

Hilbert space-filling curve chart
JavaScript
27
star
29

d3-radial-axis

A radial implementation of the D3 axis component
JavaScript
25
star
30

ip.js

A JS library for manipulating IP addresses, prefixes and ranges
JavaScript
23
star
31

d3-hilbert

D3 layout to visualize distance variables using a continuous Hilbert space-filling curve.
JavaScript
22
star
32

d3-force-surface

A multi-surface elastic collision force type for the d3-force simulation engine
JavaScript
21
star
33

cartogram-chart

A cartogram chart web component for visualizing geographical data by distorting a TopoJson topology
JavaScript
19
star
34

d3-force-bounce

An elastic collision force type for the d3-force simulation engine
JavaScript
16
star
35

d3-morton-order

D3 layout to visualize distance variables using a continuous Morton (Z-order) space-filling curve.
JavaScript
11
star
36

d3-force-cluster-3d

A clustering force type for the d3-force-3d simulation engine
JavaScript
10
star
37

d3-binarytree

One-dimensional recursive spatial subdivision.
JavaScript
9
star
38

d3-horizon

Horizon area chart D3 component
JavaScript
8
star
39

proportions-chart

A one-dimensional proportional chart web component for visualizing categorical data
JavaScript
8
star
40

d3-force-limit

A positioning hard limit force type for the d3-force simulation engine
JavaScript
8
star
41

react-kapsule

React wrapper for kapsule-style web components
JavaScript
8
star
42

index-array-by

A utility function to index arrays by any criteria
JavaScript
8
star
43

Intermap

Internet Interactive Map
JavaScript
7
star
44

multilateration

Locate points according to distributed beacon signals with consistent propagation speeds
JavaScript
6
star
45

d3-zoomable

Easy way to apply d3-zoom functionality to DOM elements
JavaScript
6
star
46

data-joint

Perform data joins with any type of JS objects
JavaScript
6
star
47

d3-force-pod

Component to automatically draw nodes/links in a D3 force simulation according to a set of forces
JavaScript
5
star
48

accessor-fn

A wrapper function for object accessor properties
JavaScript
5
star
49

svg-text-fit

SVG utility for fitting text inside a box by resizing or ellipsis
JavaScript
3
star
50

d3-color-legend

SVG color legends for continuous or discrete D3 scales
JavaScript
3
star
51

jerrypick

Pluck and omit properties from a JS object
JavaScript
3
star
52

d3-force-constant

A constant acceleration force type for the d3-force simulation engine
JavaScript
3
star
53

ui-module

Template repo for UI modules
JavaScript
2
star
54

three-trackballcontrols-web

A browser friendly wrapper of https://github.com/JonLim/three-trackballcontrols
JavaScript
2
star
55

svg-utils

Miscellaneous utility components for manipulating SVG
JavaScript
2
star
56

forcelayout3d-web

A browser friendly wrapper of https://github.com/anvaka/ngraph.forcelayout3d
JavaScript
1
star
57

js-module

Template repo for JS modules
JavaScript
1
star
58

ris-live-viz

A quick RIS live viz prototype
JavaScript
1
star
59

flatten

Recursively flatten nested arrays with arbitrary levels
JavaScript
1
star
60

scroll-zoom-clamp

Prevent page scrolling interference by zooming components
JavaScript
1
star