Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2
Area proportional Venn and Euler diagrams in JavaScript
License
upsetjs/venn.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This is a maintained fork ofhttps://github.com/benfred/venn.js.
A javascript library for laying out area proportional venn and euler diagrams.
Details of how this library works can be found on theblogpostthe original author wrote about this. A follow up postdiscusses testing strategy andalgorithmic improvements.
npm install --save @upsetjs/venn.js
There are two modes in which this library can be used.First, in a managed case by using theVennDiagram function that will render the data using D3.Second, in a manual case as a layout library that is just preparing the data for you.
In the following, these set data are used:
constsets=[{sets:['A'],size:12},{sets:['B'],size:12},{sets:['A','B'],size:2},];
This library depends ond3.js to display the venndiagrams.
To lay out a simple diagram, just define the sets and their sizes along with the sizesof all the set intersections.
The VennDiagram object will calculate a layout that is proportional to theinput sizes, and display it in the appropriate selection when called:
constchart=venn.VennDiagram();d3.select('#venn').datum(sets).call(chart);
The style of the Venn Diagram can be customized by using D3 after the diagramhas been drawn. For instance to draw a Venn Diagram with white text and a darker fill:
constchart=venn.VennDiagram();d3.select('#inverted').datum(sets).call(chart);d3.selectAll('#inverted .venn-circle path').style('fill-opacity',0.8);d3.selectAll('#inverted text').style('fill','white');
View this example, along with other possible styles
The position of text within each circle of the diagram may also be modified via thesymmetricalTextCentre property (defaults tofalse):
// draw a diagram with text symmetrically positioned in each circle's centreconstchart=venn.VennDiagram({symmetricalTextCentre:true});
To have a layout that reacts to a change in input, all that you need to do isupdate the dataset and call the chart again:
// draw the initial diagramconstchart=venn.VennDiagram();d3.select('#venn').datum(getSetIntersections()).call(chart);// redraw the diagram on any change in inputd3.selectAll('input').on('change',function(){d3.select('#venn').datum(getSetIntersections()).call(chart);});
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 mouseenter:
d3.selectAll('#rings .venn-circle').on('mouseenter',function(){constnode=d3.select(this).transition();node.select('path').style('fill-opacity',0.2);node.select('text').style('font-weight','100').style('font-size','36px');}).on('mouseleave',function(){constnode=d3.select(this).transition();node.select('path').style('fill-opacity',0);node.select('text').style('font-weight','100').style('font-size','24px');});
The colour scheme for the diagram's circles may also be modified via thecolorScheme option, and the text within each circle can have its fill modified via thetextFill option:
constchart=venn.VennDiagram({colorScheme:['rgb(235, 237, 238)','#F26250'],textFill:'#FFF',});
Another common case is adding a tooltip when hovering over the elements in the diagram. The onlytricky thing here is maintaining the correct Z-order so that the smallest intersection areasare on top, while still making the area that is being hovered over appear on top of the others:
// draw venn diagramconstdiv=d3.select('#venn');div.datum(sets).call(venn.VennDiagram());// add a tooltipconsttooltip=d3.select('body').append('div').attr('class','venntooltip');// add listeners to all the groups to display tooltip on mouseenterdiv.selectAll('g').on('mouseenter',function(d){// sort all the areas relative to the current itemvenn.sortAreas(div,d);// Display a tooltip with the current sizetooltip.transition().duration(400).style('opacity',0.9);tooltip.text(d.size+' users');// highlight the current pathconstselection=d3.select(this).transition('tooltip').duration(400);selection.select('path').style('stroke-width',3).style('fill-opacity',d.sets.length==1 ?0.4 :0.1).style('stroke-opacity',1);}).on('mousemove',function(){tooltip.style('left',d3.event.pageX+'px').style('top',d3.event.pageY-28+'px');}).on('mouseleave',function(d){tooltip.transition().duration(400).style('opacity',0);constselection=d3.select(this).transition('tooltip').duration(400);selection.select('path').style('stroke-width',0).style('fill-opacity',d.sets.length==1 ?0.25 :0.0).style('stroke-opacity',0);});
Besides the handyVennDiagram wrapper, the library can used as a pure layout function using thelayout method.One can render the result manually in D3 or even in HTML Canvas.
The signature of the function can be found as part of the TypeScript typings atindex.ds.ts
// compute layout dataconstdata=venn.layout(sets);// custom data binding and renderingconstg=d3.select('#venn').selectAll('g').data(data).join((enter)=>{constg=enter.append('g');g.append('title');g.append('path');g.append('text');returng;});g.select('title').text((d)=>d.data.sets.toString());g.select('text').text((d)=>d.data.sets.toString()).attr('x',(d)=>d.text.x).attr('y',(d)=>d.text.y);g.select('path').attr('d',(d)=>d.path).style('fill',(d,i)=>(d.circles.length===1 ?d3.schemeCategory10[i] :undefined));
constdata=venn.layout(sets,{width:600,height:350});constctx=document.querySelector('canvas').getContext('2d');data.forEach((d,i)=>{ctx.fillStyle=`hsla(${(360*i)/data.length},80%,50%,0.6)`;ctx.fill(newPath2D(d.path));});ctx.font='16px Helvetica Neue, Helvetica, Arial, sans-serif';ctx.textAlign='center';ctx.textBaseline='central';ctx.fillStyle='white';data.forEach((d,i)=>{ctx.fillText(d.data.sets.toString(),d.text.x,d.text.y);});
Released under the MIT License.
npm i -g yarnyarn installyarn sdks vscode
yarntestyarn lintyarn formatyarn buildyarn releaseyarn release:preAbout
Area proportional Venn and Euler diagrams in JavaScript
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Languages
- JavaScript85.2%
- HTML13.5%
- Java1.2%
- TypeScript0.1%