0.2.3 • Public • Published


View the examples

simple-venn is a tiny JavaScript library for area-proportional, two-ringed Venn diagrams. A lot of the math in this library is pulled from benfred's Venn.js library - a great library for Venn diagrams with 3+ sets, but overkill for what I needed.

simple-venn was created with the end goal of giving developers access to the underlying dimensions of the Venn diagram. In the /examples directory, you'll see that simple-venn can be used with canvas or regular divs. I personally made it to be used with regl. It should give you all the math to position the sets as you see fit.

However I wanted simple-venn to be...simple. So it has some built-in drawing functionality using canvas. This way it's super easy to get drawing Venn diagrams:

<!DOCTYPE html>
<script src="simple-venn.dist.js"></script>
  var aSet = 120000;
  var bSet = 120000;
  var uSet = 60000;
  var scale = 0.5;
  // Appends canvas element to body and draws Venn
  new SimpleVenn(aSet, bSet, uSet, scale).draw();



new SimpleVenn(aSetCount, bSetCount, uSetCount, scale)
parameter type details
aSetCount Number Value for set A
bSetCount Number Value for set B
uSetCount Number Value for set intersection
scale (optional) Number Set area is determined by count and scaled up or down by this scale factor (default: 1)

Each parameter can be accessed and updated directly from the returned SimpleVenn object.

let venn = new SimpleVenn(4, 4, 2);
console.log(venn.scale); // 1
venn.scale = 2;
console.log(venn.scale); // 2

Computed Properties

Besides the four initial properties, all other properties are computed when accessed.

property description
aSetArea The area of set A
bSetArea The area of set B
uSetArea The area of set intersection
aSetRadius The radius of set A
bSetRadius The radius of set B
aSetDiameter The diameter of set A
bSetDiameter The diameter of set B
setDistance The approximate distance between the center of set A and the center of set B so the overlap area is proportional to the overlap value
aSetIntersectDist The distance from the center of set A to the point of intersection between the two sets
bSetIntersectDist The distance from the center of set B to the point of intersection between the two sets


SimpleVenn.draw(selector, options);

While this library is more about the math of Venn diagrams (so you can do what you want with the results), this is a method that will just draw it for you.

parameter type details
selector (optional) String Selector for the element the Venn diagram will be appended to or the canvas object the diagram will be drawn on
options (optional) Object An object specifying styles for the Venn diagram

If a selector is not provided, simple-venn will append a canvas element to the body of the document, sized to the full viewport size. If the selected element is a canvas element, simple-venn will draw the diagram on the canvas element. Otherwise simple-venn will append a canvas element to the selected element that is the full size of the element. Under the hood, simple-venn uses querySelectorAll and will try to draw to all matches.

The options object will look for these properties:

property Type description
aSetColor (optional) String The color of set A (default: '#00F')
bSetColor (optional) String The color of set B (default: '#0F0')
opacity (optional) Number The opacity of each set (default: 0.5)

Recommended use:

<div id="venn" style="width: 500px; height: 500px;"></div>
const venn = new SimpleVenn(60000, 60000, 30000);


Please do! As long as you're cool about it (no jerks). Feel free to file an issue for bugs and feature requests. Before working on a PR, it might be good to check if it's needed in the library. It could certainly use some math review, optimizations, and testing.



Package Sidebar


npm i simple-venn

Weekly Downloads






Unpacked Size

35.9 kB

Total Files


Last publish


  • matthewbryancurtis