Hello graph

The absolute minimum. Hand Pivotick a data object of nodes and edges and you get an interactive, force-directed graph — pan, zoom, and drag work out of the box. No options required. Hover a node to see its label.

Options

const options = {}

Data

const data = {
    nodes: [
        { id: 'ana', data: { label: 'Ana' } },
        { id: 'ben', data: { label: 'Ben' } },
        { id: 'cleo', data: { label: 'Cleo' } },
        { id: 'dan', data: { label: 'Dan' } }
    ],
    edges: [
        { from: 'ana', to: 'ben' },
        { from: 'ben', to: 'cleo' },
        { from: 'cleo', to: 'dan' },
        { from: 'ana', to: 'cleo' }
    ]
}