Color by category

Let Pivotick assign colors for you. ColorPaletteMapper hands out a stable color per category value, and color accepts an accessor — so one line maps every node's group to a color. The okabe-ito palette shown here is colorblind-safe; tol-bright, kelly-22, and d3-category10 are built in too.

Options

// import { ColorPaletteMapper } from 'pivotick'

// A colorblind-safe palette; getColor() assigns and remembers a color per value.
const palette = new ColorPaletteMapper('okabe-ito')

const options = {
    render: {
        defaultNodeStyle: {
            size: 16,
            strokeColor: '#ffffff',
            textColor: '#334155',
            text: (node) => node.getData()?.name,
            textVerticalShift: -1.6,
            // `color` accepts (node) => string — map each node's group to a color.
            color: (node) => palette.getColor(node.getData()?.group)
        }
    }
}

Data

const data = {
    nodes: [
        { id: 'web', data: { name: 'Web app', group: 'Frontend' } },
        { id: 'mobile', data: { name: 'Mobile', group: 'Frontend' } },
        { id: 'auth', data: { name: 'Auth API', group: 'Backend' } },
        { id: 'orders', data: { name: 'Orders', group: 'Backend' } },
        { id: 'pg', data: { name: 'Postgres', group: 'Data' } },
        { id: 'cache', data: { name: 'Redis', group: 'Data' } },
        { id: 'queue', data: { name: 'Queue', group: 'Infra' } }
    ],
    edges: [
        { from: 'web', to: 'auth' },
        { from: 'web', to: 'orders' },
        { from: 'mobile', to: 'auth' },
        { from: 'orders', to: 'pg' },
        { from: 'orders', to: 'queue' },
        { from: 'auth', to: 'cache' }
    ]
}