Hierarchy & flow

Two data shapes cover this whole family: parent-linked nodes for hierarchies and { from, to, value } links for flows. Both live in a regular series’ data array.

Treemap

Flat { name, value } points tile the plane; add parent to nest:

live

import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { name: 'Compute', value: 42 }, { name: 'Storage', value: 26 },
    { name: 'Network', value: 14 }, { name: 'Support', value: 10 },
    { name: 'Other', value: 8 },
] }];

const App = () => html`<${Charts} type="treemap" series="${series}" labels />`;

Sunburst and icicle

The same parent-linked shape renders as concentric rings (sunburst) or horizontal slabs (icicle). Branch nodes take value: 0, so their size is the sum of their children:

live

import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { name: 'Web', value: 0 }, { name: 'API', value: 0 },
    { name: 'Pages', parent: 'Web', value: 30 },
    { name: 'Assets', parent: 'Web', value: 18 },
    { name: 'Auth', parent: 'API', value: 12 },
    { name: 'Data', parent: 'API', value: 24 },
    { name: 'Cache', parent: 'Data', value: 9 },
] }];

const App = () => html`<div>
    <${Charts} type="sunburst" series="${series}" labels />
    <${Charts} type="icicle" series="${series}" labels />
</div>`;

Deeper levels lighten automatically from the root color, so the hierarchy reads at a glance with any palette.

Sankey

Links are { from, to, value }. Nodes are inferred from the link ends, laid out in columns, with flow widths proportional to value:

live

import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { from: 'Coal', to: 'Power', value: 25 },
    { from: 'Gas', to: 'Power', value: 20 },
    { from: 'Solar', to: 'Power', value: 10 },
    { from: 'Power', to: 'Homes', value: 30 },
    { from: 'Power', to: 'Industry', value: 25 },
    { from: 'Gas', to: 'Homes', value: 8 },
] }];

const App = () => html`<${Charts} type="sankey" series="${series}" labels />`;

Chord and arc diagram

The same link shape, different layouts:

chord is a dependency wheel: nodes around a circle, ribbons between them sized by value. Good for trade/traffic matrices.
arcdiagram: nodes on a line, arcs above it. Good when node order matters (timelines, sequences).

const series = [{ data: [
    { from: 'US', to: 'EU', value: 30 }, { from: 'US', to: 'Asia', value: 20 },
    { from: 'EU', to: 'Asia', value: 25 }, { from: 'Asia', to: 'US', value: 35 },
] }];
html`<${Charts} type="chord" series="${series}" labels />`