About Force Plugin

The Force plugin renders nodes and links from a Data item as a graph with dots and arcs automatically positioned by a force relaxation algorithm built into the d3.js visualization package.

Hover over dots to discover node names.

Drag dots to rearrange the graph.

Double-click dotes to open a corresponding page, if any.


The data item is expected to be formatted as an object with two parts, "nodes" and "links", both arrays.

A node is an object that has a "name", a string, and a "group", an integer. Group determines the dot color.

{ "name": "Chicago", "group": 2 }

A link is an object that a "source", "target", and "value", all integers. Value determines the arc stroke width.

{ "source": 10, "target": 59, "value": 6 }

See GitHub for plugin source.

The plugin is adapted from the Les Misérables example from the d3.js documentation.