Skip to content

sepro/sepro-venn

Repository files navigation

Built With Stencil

A web component for Venn Diagrams

This javascript library allows you to quickly and effortlessly add venn diagrams to any project. You can add either two set or three set venn diagrams.

Check out our DEMO

<sepro-venn labels='["Left", "Right"]' values='[1,2,3]'></sepro-venn>
<sepro-venn labels='["Left", "Right", "Bottom"]' values='[1,2,3,4,5,6,7]'></sepro-venn>

two set venn three set venn

Usage

Get the latest build from here, add it to your web project (here in the folder js) and load sepro-venn.js in the html page header.

<script src="./js/sepro-venn.js"></script>

Throughout the page you can now include venn diagrams using the sepro-venn tag.

<sepro-venn labels='["Left", "Right"]' values='[1,2,3]'></sepro-venn>
<sepro-venn labels='["Left", "Right", "Bottom"]' values='[1,2,3,4,5,6,7]'></sepro-venn>

Advanced features

Scaling things up (or down)

In case the venn diagrams are two small (or big) the scale attribute can be added to increase (or decrease) the size:

<sepro-venn labels='["Left", "Right"]' values='[1,2,3]' scale=2></sepro-venn>

By adding the scale=2 attribute the venn diagram will be double the size.

Acknowledgements

This library was initiated as a personal, hobby project to learn Stencil.js. Sepro-Venn is now further developed at KULeuven and VIB where it is also included in other (upcoming) software projects.