Interactive 3 circle venn diagram in JS?

Question

Does anyone know of a library for interactive (hoverable) 3 circle venn diagrams in JS? I need the areas to scale.

Things I tried: https://www.highcharts.com/demo/venn-diagram/brand-light - Doesn't scale area

I am also going to try: Venn Diagram in React JS

Answer 1

There is a venn.js library, based on d3.js by Ben Frederickson. He describes the approach in his blog post.

Haven't used it myself, but looks interesting.

Here is a simple example (link to github):

// define sets and set set intersections
var sets = [ {sets: ['A'], size: 12},
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];

var chart = venn.VennDiagram();
d3.select("#venn").datum(sets).call(chart);

He also has example for interactive diagram: https://github.com/benfred/venn.js/blob/master/examples/interactive.html