Karnaugh Map

Install Upset.js#

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 { extractSets, generateCombinations } from '@upsetjs/react';
const sets = useMemo(() => extractSets(elems), [elems]);
const combinations = useMemo(() => generateCombinations(sets), [sets]);

Result#

Live Editor

Result

Bundle version#

npm install @upsetjs/bundle

yarn add @upsetjs/bundle

import { extractSets, generateCombinations, renderKarnaughMap } 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 = useMemo(() => extractSets(elems), [elems]);
const combinations = useMemo(() => generateCombinations(sets), [sets]);

let selection = null;

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

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

rerender();