# simple-venn

0.2.3 • Public • Published

# simple-venn

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:

## API

### Constructor

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.

### 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
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

### Methods

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:

## Contributing

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.

MIT

## Package Sidebar

### Install

`npm i simple-venn`

### Repository

github.com/matthewbryancurtis/simple-venn

1

0.2.3

MIT

35.9 kB

17