UpSet gallery

Show setup script

<script lang="ts">
	import { UpSet } from '../../../lib/index.js';
	import { genres, makeData } from '../../demo-data.js';

	const data = makeData();
	const customOrder = ['Sci-Fi', 'Romance', 'Drama', 'Action', 'Comedy', 'Thriller'];
	const setPalette = {
		Drama: '#4e79a7',
		Comedy: '#f28e2b',
		Action: '#e15759',
		Thriller: '#76b7b2',
		Romance: '#b07aa1',
		'Sci-Fi': '#59a14f'
	};
	const degreeColor = (d: { degree: number }) =>
		['#2b6cb0', '#dd6b20', '#c53030', '#6b46c1', '#2f855a', '#975a16'][d.degree - 1];
</script>

Default

Show code

<UpSet {data} sets={genres} minSize={5} />

Mode: intersect (inclusive)

Items count in every combination they fully contain.

Show code

<UpSet {data} sets={genres} mode="intersect" minSize={20} />

Mode: union

Items count in every combination they touch at least one set of.

Show code

<UpSet {data} sets={genres} mode="union" minDegree={2} maxDegree={3} limit={12} />

Sort by degree, ascending

Show code

<UpSet
	{data}
	sets={genres}
	sortIntersectionsBy="degree"
	sortIntersectionsOrder="ascending"
	minSize={8}
/>

Filtering: minSize, maxDegree, limit

Show code

<UpSet {data} sets={genres} minSize={10} maxDegree={2} limit={10} />

Fixed set order

Sets keep the order you pass in.

Show code

<UpSet {data} sets={customOrder} sortSetsBy="none" minSize={15} />

Color by degree (function)

Show code

<UpSet {data} sets={genres} color={degreeColor} minSize={8} />

Per-set colors

Show code

<UpSet {data} sets={genres} setColors={setPalette} minSize={8} />