Ripl

Appearance

Packed Circle Chart ​

The Packed Circle Chart renders each datum as a circle whose area encodes its value, packed tightly and non-overlapping inside one large containing circle. It's a softer alternative to the treemap for showing many parts of a whole — proportions read at a glance without a rigid grid. Larger circles are labelled automatically.

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 ​

  • data — The data array
  • key — Unique key accessor for each circle
  • value — Numeric value accessor; encoded as the circle's area
  • label — Optional label accessor (defaults to key)
  • color — Optional per-circle color accessor
  • format — Value formatter for tooltips
  • padding, title, animation — Standard chart options