UpSet gallery
Show setup script
<script lang="ts">
import { UpSet } from '../../../lib/index.js';
import { genres, makeData } from '../../demo-data.js';
// Counts spanning four decades, for the log-scale sections.
const decades = ['H3K4me3', 'H3K27ac', 'CTCF'];
const decadeCounts = [
{ id: 'a', sets: ['H3K4me3'], size: 1000 },
{ id: 'b', sets: ['H3K27ac'], size: 100 },
{ id: 'c', sets: ['H3K4me3', 'H3K27ac'], size: 10 },
{ id: 'd', sets: ['CTCF'], size: 1 },
{ id: 'z', sets: ['CTCF', 'H3K27ac'], size: 0 }
];
const decadeSets = { H3K4me3: 1010, H3K27ac: 110, CTCF: 1 };
const films = makeData();
let boundScale = $state<'linear' | 'log' | 'symlog'>('linear');
let controlledScale = $state<'linear' | 'log' | 'symlog'>('linear');
let scaleCalls = $state<string[]>([]);
</script>Size scale (bound)
scaleToggle adds a button; bind:scale follows it. Sizes span four decades and one
combination is empty, so the toggle picks symlog.
Show code
<UpSet
intersections={decadeCounts}
sets={decades}
setSizes={decadeSets}
minSize={0}
scaleToggle
bind:scale={boundScale}
/>Size scale (controlled)
With controlled the toggle only calls onscalechange.
Show code
<UpSet
intersections={decadeCounts.filter((d) => d.size > 0)}
sets={decades}
setSizes={decadeSets}
scale={controlledScale}
controlled
scaleToggle
onscalechange={(next, prev) => (scaleCalls = [...scaleCalls, `${prev}->${next}`])}
/>Size scale (set panel override)
scale="log" on the intersections, setScale="linear" on the set bars.
Show code
<UpSet
intersections={decadeCounts.filter((d) => d.size > 0)}
sets={decades}
setSizes={decadeSets}
scale="log"
setScale="linear"
/>Deviation from independence
sortIntersectionsBy="deviation" puts the combinations that occur more often than chance first; showExpected draws the expected size as a dashed tick on each bar and adds it to the tooltip.
Show code
<UpSet data={films} sets={genres} sortIntersectionsBy="deviation" showExpected limit={12} />