venn.js
A javascript library for laying out area proportional venn and euler diagrams.
Details of how this library works can be found on the blog post I wrote about this. A follow up post discusses testing strategy and algorithmic improvements.
Installing
If you use NPM, npm install venn.js
. Otherwise, download the latest release.
Usage
This library depends on d3.js to display the venn diagrams.
Simple layout
To lay out a simple diagram, just define the sets and their sizes along with the sizes of all the set intersections.
The VennDiagram object will calculate a layout that is proportional to the input sizes, and display it in the appropriate selection when called:
var sets = sets: 'A' size: 12 sets: 'B' size: 12 sets: 'A''B' size: 2; var chart = vennd3;
Changing the Style
The style of the Venn Diagram can be customized by using D3 after the diagram has been drawn. For instance to draw a Venn Diagram with white text and a darker fill:
var chart = vennd3 d3 style"fill-opacity" 8; d3style"fill" "white";
View this example, along with other possible styles
Dynamic layout
To have a layout that reacts to a change in input, all that you need to do is update the dataset and call the chart again:
// draw the initial diagramvar chart = vennd3; // redraw the diagram on any change in inputd3;
Making the diagram interactive
Making the diagram interactive is basically the same idea as changing the style: just add event listeners to the elements in the venn diagram. To change the text size and circle colours on mouseover:
d3 ;
Adding tooltips
Another common case is adding a tooltip when hovering over the elements in the diagram. The only tricky thing here is maintaining the correct Z-order so that the smallest intersection areas are on top, while still making the area that is being hovered over appear on top of the others:
// draw venn diagramvar div = d3div; // add a tooltipvar tooltip = d3 ; // add listeners to all the groups to display tooltip on mouseoverdiv ;
Released under the MIT License.