Ripl

Appearance

Arc Diagram ​

The Arc Diagram is a cartesian axis whose points are nodes, connected by semicircular arcs whose thickness encodes the strength of each relationship. Keeping nodes on one axis makes it easy to spot clusters and bridges — a clean way to show connections in an ordered set (character co-occurrence, module dependencies, adjacency). The axis can run horizontally or vertically, and nodes can be sized by their connection count.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

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

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

Data Format ​

Provide nodes (each with a unique id, optional label, group, color) laid out in order along the axis, and links (source/target node ids with an optional value controlling arc thickness). Nodes in the same group share a color.

Options ​

  • nodes — Array of { id, label?, group?, color? }, laid out along the axis in order
  • links — Array of { source, target, value? }
  • nodeRadius — Node dot radius, or the maximum radius when sizeByConnections is on (default 6)
  • orientation — 'horizontal' (default) or 'vertical' (a Y axis with arcs bulging right)
  • sizeByConnections — Scale each node's dot by its connection count, like a bubble chart (default false)
  • format — Value formatter for tooltips
  • padding, title, animation — Standard chart options