JavaScript library to display Venn diagrams

Question

I am looking for a JavaScript library which is able to produce Venn diagrams.

Requirements

The ability to

• specify and draw sets
• colorize sets (and results of operations between them)
• label sets (the example below would have the additional labels "A" and "B")

Bonus

The ability to

• display data inside the sets (e.g. let A = {1;5;10} and B = {5;20}, the diagram would include the numbers from A in the first "circle" (the same goes for B) and also display A ∩ B = {5} in the intersection area)

Example

• Set A and B
• Colorize A ∩ B in red

^{(Image taken from here, Public Domain)}

Answer 1

venn.js

GitHub: https://github.com/benfred/venn.js

It uses D3.js as the underlying graphics library.

1. Specify and draw sets

→ View online

// Code taken from the GitHub repository, the license specified there applies.

// define sets and set set intersections
var sets = [{label: "A", size: 10}, {label: "B", size: 10}],
    overlaps = [{sets: [0,1], size: 2}];

// get positions for each set
sets = venn.venn(sets, overlaps);

// draw the diagram in the 'simple_example' div
venn.drawD3Diagram(d3.select(".simple_example"), sets, 300, 300);

2. Colorize sets

I haven't tried choosing custom colors, but it's likely that it's possible.

You can also arbitrarily style intersection areas: http://benfred.github.io/venn.js/examples/intersection_tooltip.html

3. Label sets

See the first example.

Bonus 4. Label intersection areas

Not possible as far as I know. (I must admit that I haven't fully read the documentation and the code.)

Note 1

There are some cases where the circles cannot be layouted correctly. Switching to the multidimensional scaling algorithm might solve these problems in some cases: http://benfred.github.io/venn.js/examples/mds.html

However, I've also encountered ohter edge cases where the layout failure is due the proportional scaling of the circles. You might want to read the blog articles of the author concerning the problems you face with drawing Venn diagrams:

• http://www.benfrederickson.com/venn-diagrams-with-d3.js/
• http://www.benfrederickson.com/multidimensional-scaling/
• http://www.benfrederickson.com/calculating-the-intersection-of-3-or-more-circles/

Note 2

Venn.js requires you to build the overlaps and sets yourself. If anyone is interested in the ability to input {1;2;3} ∩ {2;3}, I've written a small library to do this. Maybe I put the code on GitHub somewhen in the future.

Answer 2

Github: https://github.com/lafarer/d3-venn
Demo: http://bl.ocks.org/lafarer/0f7677bdfa6c3ab7f6c3

You can specify sets and regions (intersections), color scheme; it supports mouse events and selection. It works up to 7 sets.

Disclaimer: I am the author of this d3 plugin