0

I'm creating a Venn diagram with d3js

I know I should paste code when inserting links, but there are many code and my question is very simple.

So, here is a running example

http://codepen.io/ghiden/pen/bGAIg

All documentation is here

https://github.com/benfred/venn.js/tree/master

My question: when changing the sets and overlaps to these data

"sets" : [
         {"label": "CSS", "size": 10},
         {"label": "JQuery", "size": 10},
         {"label": "PHP", "size": 10},
         {"label": "SQL", "size": 10}
], 
"overlaps" : [

        {"sets": [0,1], "size": 1},
        {"sets": [0,2], "size": 0},
        {"sets": [0,3], "size": 0},
        {"sets": [1,2], "size": 1},
        {"sets": [1,3], "size": 0},
        {"sets": [2,3], "size": 0}
]

Shouldn't there be a overlap between JQuery and PHP? Is someone familiar with this? Also, if you change size 1 to 2, it change the diagram. It's really weird and I'm lost

John Slegers
  • 45,213
  • 22
  • 199
  • 169
gbvisconti
  • 412
  • 1
  • 4
  • 19

1 Answers1

1

There was a bug with the initial greedy layout - I've applied a fix here https://github.com/benfred/venn.js/commit/5b38382797df34449e86b803cdd29ea830b54c78 Getting this code should fix your issue.

Ben Frederickson
  • 161
  • 5
  • Yes, it got correct now. But what can I do to solve when I want to represent sets that are not overlap with any other? Like these var sets = [ {"label":"CSS","size":"1"}, {"label":"JQuery","size":"1"}, {"label":"PHP","size":"6"}, {"label":"SQL","size":"1"} ], overlaps = [ {"sets":[2,1],"size":"1"} ]; – gbvisconti Jan 19 '15 at 12:54
  • Maybe if I explicit all combinations of all sets setting zero when there is no overlap? – gbvisconti Jan 19 '15 at 12:57
  • Yeah - right now you need to add the zero sizes for all the set combinations where there is no overlap =( – Ben Frederickson Jan 20 '15 at 02:12
  • Yeah, I did that, now works fine. Just to you to know what I'm trying to do is display the diagram counting people who knows php, sql, jquery and their intersections. One more question, in this cenario sets = [ {"label":"JQuery","size":"1"}, {"label":"PHP","size":"5"}, ], overlaps = [ {"sets":[0,1],"size":"1"}, ]; .... Jquery is inside PHP because the same (and unique) person that knows jquery also knows php. When the mouse is on Jquery show 1 instead of 5? How could I change the code to do that? – gbvisconti Jan 20 '15 at 11:34
  • Is it possible to add multiple sets like for example set1={"a1","a2","a3"} and set2={"a2","a3","a4"} @gbvisconti I have my python sets in this way for which I want to render on react page – Sample Test Nov 14 '20 at 09:10