layerchart-upset

An UpSet plot Svelte 5 component built on LayerChart, with an API modelled on R's ComplexUpset.

Install

npm install layerchart-upset

Requires Svelte 5 (a peer dependency). layerchart and d3-scale come with the package. Then import UpSet, give it data and sets, and size it with the props below.

Use

<script>
  import { UpSet } from 'layerchart-upset';
  // one row per item, one boolean column per set
  const data = [{ A: true, B: false, C: true }, /* ... */];
</script>

<UpSet {data} sets={['A', 'B', 'C']} minSize={2} bind:selected />

Precomputed counts

Already have the counts? Skip the per-item rows:

<UpSet
  sets={['treated vs control', 'KO vs WT']}
  intersections={[
    { id: 'a', sets: ['treated vs control'], size: 42 },
    { id: 'c', sets: ['treated vs control', 'KO vs WT'], size: 9 }
  ]}
  emphasizedSets={['KO vs WT']}
  minSlots={8}
  bind:selected
/>

Order is kept as given (sort with sortIntersectionsBy). Add setSizes to show the set-size panel.

Accessibility and test hooks

Each bar is a role="button" with aria-label, aria-pressed, and is a Tab stop. Enter/Space select, ←/→/Home/End move focus, Esc clears. Hooks: data-upset-bar (+ data-id, data-n, data-tip), data-upset-count, data-upset-row, data-upset-set-bar. Extra attributes on <UpSet> go to the root.

Props

computeUpset(data, sets, options) is exported for use without the component. See the Gallery for every option in action.

Run npm run dev for the demo page.

Controlled selection

If something else owns the selection (a URL hash, a store), pass selected one-way with controlled:

<UpSet {data} {sets} controlled selected={pick} onselect={(i, prev) => requestChange(i?.id ?? null)} />

The component never changes selected itself. It calls onselect(i, previous) (or onselect(null, previous) for a deselect or Esc) and waits for you to update the prop, so the owner can reject or defer the change. Without controlled, bind:selected works as before.

Hidden intersections

limit, minSize, maxSize, minDegree and maxDegree drop intersections silently. Say so with onresult or the footer snippet. total counts intersections before those options apply, so 50 intersections with limit={30} reports { shown: 30, total: 50, hidden: 20 }.

<UpSet {data} {sets} limit={30}>
  {#snippet footer({ shown, total })}the largest {shown} of {total} combinations are drawn{/snippet}
</UpSet>

Wide plots

Set maxWidth to keep 30+ columns from running off the page; the plot scrolls inside its own wrapper and the tooltip still follows the bars. Use fit to shrink the cells to the width of the container instead (never below minCellSize); if it still doesn't fit, it scrolls. Keyboard focus scrolls an off-screen bar into view.

Theming

Colours resolve in this order: the prop (color, inactiveColor, highlightColor, setColors), then a CSS custom property, then the built-in default. Set the properties on any ancestor of the chart. Because they are plain CSS they follow data-theme / prefers-color-scheme changes at runtime without re-rendering. A per-intersection color function, setColors and highlightColor still win for the marks they colour.

--upset-grid and --upset-stripe are the final colour, so include any transparency in the value. The tooltip keeps its own --upset-tooltip-fg / --upset-tooltip-bg.

:root[data-theme='dark'] {
  --upset-bar: #63b3ed;
  --upset-bar-selected: #f6ad55;
  --upset-dot-off: #3b4252;
  --upset-text: #e2e8f0;
  --upset-grid: rgb(226 232 240 / 0.15);
  --upset-stripe: rgb(226 232 240 / 0.06);
}

Development

npm run check, npm test and npm run build run in CI on every push and PR.

License

MIT