Skip to content

Force directed graph

A force directed graph is a simulation of what happens when objects are attracted to and repelled from each other. It is particularly used to convey the results of a multidimensional scaling. The force directed graph scales well, from small:

to much larger:

Parameters

The force directed graph takes the standard parameters where the data defining the graph has the form:

datadict
json
{
  "nodes": [
    { "id": "A", "group": 1 },
    { "id": "B", "group": 2 },
    { "id": "C", "group": 1 },
    { "id": "D", "group": 2 }
  ],
  "links": [
    { "source": "A", "target": "B" },
    { "source": "A", "target": "C" },
    { "source": "B", "target": "D" },
    { "source": "C", "target": "D" }
  ]
}

The definition of nodes and links is described below..

Nodes

A node is represented by a circle in the chart. Nodes that are in the same group have the same color. You should ensure that the color palette that you supply has enough distinct colors to cover the number of groups. The (required) id field in the node identifies the node and is displayed when you mouse over the circle representing the node. It also identifies the node when defining links between nodes.

A link represents a force of attraction between two nodes. The nodes are identified by their ID. The link itself is represented visually by a line connecting the two nodes, with the thickness of the line representing the optional value field.

Animation

Clicking on a node selects it. Dragging a selected node exerts a force on all of the nodes to which it is connected, offering an intuitive mechanism for exploring the structure of the collection of nodes and links.

Released under the MIT License. | Privacy Policy