Venny

Venny is a set of components used to show Venn/Euler Diagrams on a web page.

It is implemented as framework independent custom-elements, and the layout algorithm is based on venn.js.

For full documentation visit this project on Github

Venny on Github

Let's dive in

You can import the project in your JavaScript from NPM or just source it directly in your HTML.

Let's define two sets Apples and Oranges.

<script type="module" src="https://unpkg.com/venny?module"></script>

<venn-diagram>
  <venn-set name="A" label="Apples"></venn-set>
  <venn-set name="B" label="Oranges"></venn-set>
</venn-diagram>

Now let's create an intersection of these two Sets.

<venn-diagram>
  <venn-set name="A" label="Apples"></venn-set>
  <venn-set name="B" label="Oranges"></venn-set>
  <venn-n sets="A B">
</venn-diagram>

But the quantity of Apples is double than those of Oranges. You can configure the size of each set.

<venn-diagram>
  <venn-set name="A" label="Apples" size="20"></venn-set>
  <venn-set name="B" label="Oranges" size="10"></venn-set>
  <venn-n sets="A B"></venn-n>
</venn-diagram>

You can also size the intersections

<venn-diagram width="300" height="200">
  <venn-set name="A"></venn-set>
  <venn-set name="B"></venn-set>
  <venn-set name="C"></venn-set>
  <venn-n sets="A B C" size="1"></venn-n>
  <venn-n sets="A B" size="5"></venn-n>
  <venn-n sets="A C" size="3"></venn-n>
</venn-diagram>

You can also style them using CSS

venn-diagram {
  --venn-circle-stroke: red;
  --venn-circle-stroke-width: 3;
  --venn-circle-grapes-fill-opacity: 0;
  --venn-intersection-a-b-grapes-stroke: white;
  --venn-intersection-a-b-grapes-stroke-width: 5px;
}

Or, Add Hover effects

Since custom-elements are just like any other node on your page, you can add event listeners like click handlers. Try clicking on this diagram.

document.querySelectorAll('venn-set').forEach((d) => {
  d.addEventListener('click', () => {
    console.log(`Clicked on ${d.name}`);
  });
});

document.querySelectorAll('venn-n').forEach((d) => {
  d.addEventListener('click', () => {
    console.log(`Clicked intersection for ${d.sets}`);
  });
});

While we are at it, you can configure nested sets

<venn-diagram width="300" height="200">
  <venn-set name="A" label="Apples"></venn-set>
  <venn-set name="B" label="Oranges">
    <venn-set name="C" label="Lemons">
      <venn-set name="D" label="Limes"></venn-set>
    </venn-set>
  </venn-set>
  <venn-n sets="A B" size="1" label="A+O"></venn-n>
</venn-diagram>

License

MIT License (c) Preet Shihn