Arc Diagram

The Arc Diagram lays nodes out along a single axis and joins them with semicircular arcs whose thickness encodes each link's weight. Reach for it when the order of the nodes carries meaning and you want clusters and bridging links to stand out — character co-occurrence, module dependencies, an adjacency matrix you would rather not read as a grid. orientation runs the axis horizontally or vertically, sizeByConnections scales each node by its degree, and nodeRadius sets the base size. Arcs are hit-tested on their stroke, so a small link nested under a large one is still hoverable. The same options render to Canvas, SVG or a terminal context.

NOTE

For the full API, see the Charts API Reference.

Example

Customize

VerticalSize by connectionsNode radius8

Show legendPositionTopBottomLeftRight

Show titleTitle text

FormatDefaultNumberPercentageDateString

Padding16

ThemeAutoLightDarkColorblind

AnimateDuration (ms)1000

Usage

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

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

createArcDiagramChart('#container', {
    nodes,
    links,
    // `'horizontal'` (the default) runs the node axis along the bottom with arcs bulging up.
    // `'vertical'` runs it down the left, arcs bulging right.
    orientation: 'vertical',
    // The dot radius — and, with `sizeByConnections` on, the radius of the *most* connected
    // node. The rest scale down from it by degree.
    nodeRadius: 8,
    sizeByConnections: true,
    legend: { position: 'bottom' },
    format: 'number',
});

Events

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

// Emitted when a node is clicked.
chart.on('nodeclick', event => console.log(event.data)); // event.data: ArcDiagramNodeEvent<TData>
// Emitted when the pointer enters a node.
chart.on('nodeenter', event => console.log(event.data)); // event.data: ArcDiagramNodeEvent<TData>
// Emitted when the pointer leaves a node.
chart.on('nodeleave', event => console.log(event.data)); // event.data: ArcDiagramNodeEvent<TData>
// Emitted when a link arc is clicked.
chart.on('linkclick', event => console.log(event.data)); // event.data: ArcDiagramLinkEvent
// Emitted when the pointer enters a link arc.
chart.on('linkenter', event => console.log(event.data)); // event.data: ArcDiagramLinkEvent
// Emitted when the pointer leaves a link arc.
chart.on('linkleave', event => console.log(event.data)); // event.data: ArcDiagramLinkEvent