Ripl

Appearance

Packed Circle Chart ​

The Packed Circle Chart gives each datum a circle whose area encodes its value and packs those circles tightly, without overlap, inside one containing circle. Prefer it to a treemap when the parts of a whole are many and unordered, and a rigid grid of rectangles would imply structure the data does not have. key, value and label bind the circles, colorBy groups their colors, and format sets how values read; larger circles are labeled automatically and the pack re-solves with an animation when the data changes. The target can be a Canvas, an SVG context or a terminal.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

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

const chart = createPackedCircleChart('#container', {
    data: [
        {
            name: 'Alpha',
            size: 82,
        },
        {
            name: 'Bravo',
            size: 45,
        },
        {
            name: 'Charlie',
            size: 26,
        },
    ],
    key: 'name',
    value: 'size',
    label: 'name',
});

Data Format ​

Each item provides a unique key, a numeric value (encoded as the circle's area), and optionally a label:

ts
const data = [
    {
        name: 'Alpha',
        size: 82,
    },
    {
        name: 'Bravo',
        size: 45,
    },
];

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.

ts
createPackedCircleChart('#container', {
    data,
    key: 'id',
    value: 'size',
    label: 'name',
    colorBy: 'group',
    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.

ts
// Emitted when a circle is clicked.
chart.on('nodeclick', event => console.log(event.data)); // event.data: PackedCircleChartNodeEvent
// Emitted when the pointer enters a circle.
chart.on('nodeenter', event => console.log(event.data)); // event.data: PackedCircleChartNodeEvent
// Emitted when the pointer leaves a circle.
chart.on('nodeleave', event => console.log(event.data)); // event.data: PackedCircleChartNodeEvent