# simple-venn

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:

SimpleVenn

## API

### Constructor

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); // 1venn.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 |

### Methods

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:

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

## License

MIT