Search code examples
javascriptpositiond3.jsdiagramvenn-diagram

Venn diagram layout with d3.js


Is there a sample on how to do Venn diagram using d3.js? I know about the two samples:

enter image description here

enter image description here

that are provided on D3 website. However they force me to calculate by myself the x.y position of the circles. I am hoping to feed just the data (circle sizes and overlap size) to a function/chart and it should do the layout for me.


Solution

  • To get an understanding of the required algorithm, read Leland Wilkinson's paper, Exact and Approximate Area-proportional Circular Venn and Euler Diagrams, published in IEEE TVCG February 2012. To the best of my knowledge no one has yet implemented a venneuler layout in D3, but that would make a fantastic D3 plugin.