11

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)
Simple Venn diagram

4

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:

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.

3

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

  • Your plugin seems very nice. I would be interested in errors and inaccuracies concerning the distribution of the areas. Are there cases where your algorithm fails? – ComFreek Nov 17 '14 at 13:30
  • So far, the plugin expects a "venn model" that is correct and complete (no missing values or region). It would definitely be an added value to have this type validation, as the visualisation rely on this. On the other hand, business validation (e.g. the total of each region should be equal to the universe) is not the responsibility of the plugin. In regards to the areas, I never had any errors or inaccuracies. I am glad you like it. – lafarer Nov 18 '14 at 14:19
  • links are dead. – Franck Dernoncourt Oct 13 '15 at 16:26
  • Lafarer, did you move the repository to somewhere else? Or did you delete it (if so, please delete this answer too)? Thanks! – Nicolas Raoul Oct 14 at 23:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.