force-graph

Force-directed graph rendered on HTML5 canvas.

A web component to represent a graph data structure in a 2-dimensional canvas using a force-directed iterative layout. Uses HTML5 canvas for rendering and d3-force for the underlying physics engine. Supports zooming/panning and hover/click interaction.

Check out the examples:

• Basic (source)
• Load JSON (source)
• Larger graph (source)
• Dynamic data changes (source)
• Auto-colored nodes/links (source)
• Node collision detection (source)
• Directional links (source)

See also the 3D version.

Quick start

import ForceGraph from 'force-graph';

or

var ForceGraph = require('force-graph');

or even

<script src="//unpkg.com/force-graph"></script>

then

var myGraph = ForceGraph();
myGraph(<myDOMElement>)
    .graphData(<myData>);

API reference

Input JSON syntax

{
    "nodes": [ 
        { 
          "id": "id1",
          "name": "name1",
          "val": 1 
        },
        { 
          "id": "id2",
          "name": "name2",
          "val": 10 
        },
        (...)
    ],
    "links": [
        {
            "source": "id1",
            "target": "id2"
        },
        (...)
    ]
}