Quick Start

Install Upset.js#

UpSet.js comes with an React based version @upsetjs/react and a pure Vanilla JavaScript version @upsetjs/bundle. In addition, there is a Vue.js wrapper at @upsetjs/vue. All of them have the same feature set and interface. The bundle version has no framework dependencies and can be used in general cases. In the followign the React version is shown, later also the bundled version.

npm install @upsetjs/react react react-dom

yarn add @upsetjs/react react react-dom

Defining your elements#

const elems = useMemo(
  () => [
    { name: 'A', sets: ['S1', 'S2'] },
    { name: 'B', sets: ['S1'] },
    { name: 'C', sets: ['S2'] },
    { name: 'D', sets: ['S1', 'S3'] },
  ],
  []
);

Extract the sets#

// import { extractCombinations } from '@upsetjs/react';
const { sets, combinations } = useMemo(() => extractCombinations(elems), [elems]);

Result#

Live Editor

Result

Interactivity#

By specifying onHover and selection UpSet.js is fully interactive. As an alternative there is also the onClick property.

Live Editor

Result

Queries#

Similar to the original UpSetR, UpSet.js allows to specify queries by a set of elements which are then highlighted in the plot. The first query is shown in full detail while others are shown using small indicators.

Live Editor

Result

Bundle version#

npm install @upsetjs/bundle

yarn add @upsetjs/bundle

import { extractCombinations, renderUpSetJS } from '@upsetjs/bundle';

const elems = [
  { name: 'A', sets: ['S1', 'S2'] },
  { name: 'B', sets: ['S1'] },
  { name: 'C', sets: ['S2'] },
  { name: 'D', sets: ['S1', 'S3'] },
];
const { sets, combinations } = useMemo(() => extractCombinations(elems), [elems]);

let selection = null;

function onHover(set) {
  selection = set;
  rerender();
}

function rerender() {
  const props = { sets, combinations, width: 780, height: 400, selection, onHover };
  renderUpSetJS(document.body, props);
}

rerender();