A pie from data

A donut chart fills clockwise, its four slices growing out together. Kinetic has no chart module: each slice's angles come from a running sum of the shares, worked out once beside the scene, and shape('sector') draws the slice. The slices are paths inside an <svg>, so they are a pool, since a data-list draws nothing there.

<div id="stage" data-composition-id="main"     data-start="0" data-duration="4" data-width="1280" data-height="720" data-fps="30">
    <div class="layer" data-component="pie" data-start="0" data-duration="4">
        <svg viewBox="0 0 1280 720" width="1280" height="720">
            <g data-pool="slices" data-key="id"><template><path data-bind-attr="attrs"></path></template></g>
        </svg>
    </div>
</div>
                

const { scene, shape, ramp } = wildflower.kinetic;

const DATA = [
    { label: 'Solar', value: 31, color: '#f2c14e' },
    { label: 'Wind', value: 24, color: '#5fd3c6' },
    { label: 'Hydro', value: 18, color: '#4280a2' },
    { label: 'Other', value: 27, color: '#aa3de6' },
];

// Each slice's start and end in degrees, clockwise from the top.
const TOTAL = DATA.reduce((sum, d) => sum + d.value, 0);
let from = 0;
const SLICES = DATA.map((d, id) => {
    const to = from + (360 * d.value) / TOTAL, slice = { id, from, to, color: d.color };
    from = to;
    return slice;
});

scene('pie', {
    pools: { slices: {} },
    init() { for (const s of SLICES) this.pools.slices.add({ id: s.id, attrs: { d: '', fill: s.color } }); },
    seek(local) {
        const p = ramp(local, 0.3, 1.5, 'power2.inOut');
        for (const s of SLICES) {
            const d = shape('sector', { cx: 640, cy: 360, radius: 220, inner: 120, from: s.from * p, to: s.to * p });
            this.pools.slices.update(s.id, { attrs: { d, fill: s.color } });
        }
    },
});
                

html, body { margin: 0; background: #0a0b10; }

#stage { position: relative; overflow: hidden; background: #0c0c10; }

.layer { position: absolute; inset: 0; }

[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
                

A pie from data

seek(local) multiplies every angle by one ramp(), so the pie fills from the top. At 0 every slice is empty, since a sector whose to equals its from is an empty string, and at 1 the slices meet round the full circle. To grow the slices one after another, give each its own ramp() delayed by stagger().

A pie from data

More in Data and sound