Ripl

Appearance

Force-Directed Network ​

The Force-Directed Network lays out a graph of nodes and links using a physics simulation — repulsion pushes nodes apart, link springs pull connected nodes together, and a gentle centering force keeps the whole thing on screen. It's ideal for relationship data: social graphs, dependency trees, topic maps. The layout is deterministic, so the same data always settles the same way. On entry the graph springs out from its root node in cascading waves, and reweighting relaxes the simulation from its current positions so nodes glide smoothly to their new places.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createForceDirectedChart,
} from '@ripl/charts';

const chart = createForceDirectedChart('#container', {
    nodes: [
        { id: 'a',
            label: 'A',
            group: 'x' },
        { id: 'b',
            label: 'B',
            group: 'x' },
        { id: 'c',
            label: 'C',
            group: 'y' },
    ],
    links: [
        { source: 'a',
            target: 'b',
            value: 4 },
        { source: 'b',
            target: 'c',
            value: 2 },
    ],
});

Data Format ​

Provide nodes (each with a unique id, optional label, group, value, color) and links (each with source/target node ids and an optional value). Node size defaults to its link degree when no value is given; nodes in the same group share a color.

Options ​

  • nodes — Array of { id, label?, value?, group?, color? }
  • links — Array of { source, target, value? }
  • nodeRadius — Base node radius (nodes scale around this by value/degree, default 8)
  • charge — Repulsion strength (negative, default -240)
  • linkDistance — Target distance for link springs (default 60)
  • linkStrength — Link spring strength (default 0.5)
  • centerStrength — Centering pull (default 0.05)
  • iterations — Simulation iterations (default 300)
  • root — Id of the node the entry animation springs out from (defaults to the highest-degree node)
  • format — Value formatter for tooltips
  • padding, title, animation — Standard chart options