Venn diagram layout with d3.js

Question

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

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.

I don't think anybody has built a reusable venn diagram chart yet. Are you going to be putting data in the chart (labels or other information), or you literally are just looking for a bunch of overlapping circles? — Bill, Sep 22 '12 at 17:05

score 12 · Answer 1 · edited Jan 19 '14 at 15:24

12

Venn Diagrams with D3.js

enter image description here

It is working fine.

edited Jan 19 '14 at 15:24

VividD

10,456
6
64
111

answered Oct 10 '13 at 20:39

fgborja

269
3
3

score 7 · Accepted Answer · answered Sep 23 '12 at 01:18

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.

Venn diagram layout with d3.js

2 Answers2