venn.js
venn.js copied to clipboard
How to fix "area ... not represented on screen"?
I have created a fiddle with such problem - WARNING: area 1,2,3 not represented on screen
. How i can fix it and why it has occurred?
Problem related with big difference in set's size. If transform data using for instance square root procedure the diagram works well. Here is updated jsfiddle, see line 9 of code.
The problem I think is that the circles are positioned via an optimization process (trying to minimize least squares loss between actual size and desired size). in this case its probably that the error with missing the {1,2,3} area entirely is less than it would be having the {1,2} and {1,3} and {2,3} areas bigger than asked for =(
@zeleniy change your set like this
var sets = [ {"sets":["1","2","3"],"size":11,"label":"123"}, {"sets":["1","2"],"size":111,"label":"124"}, {"sets":["1","3"],"size":111,"label":"225"}, {"sets":["2","3"],"size":111,"label":"62"}, {"sets":["1"],"size":222,"label":"12"}, {"sets":["2"],"size":222,"label":"11"}, {"sets":["3"],"size":222,"label":"12"} ];
In place of labels you can pass the values and display it
I think that these type of problems can be solved if ellipse is used instead of circles.
I am also getting this error. My set is[ { "sets": [ "A", "B", "C", "D", "E", "F" ], "size": 2 }, { "sets": [ "A" ], "size": 7 }, { "sets": [ "B" ], "size": 9 }, { "sets": [ "C" ], "size": 22 }, { "sets": [ "D" ], "size": 2 }, { "sets": [ "E" ], "size": 9 }, { "sets": [ "F" ], "size": 5 }, { "sets": [ "A", "B", "C", "E" ], "size": 2 }, { "sets": [ "A", "B", "C", "E", "F" ], "size": 1 }, { "sets": [ "A", "B", "C", "E", "G", "F", "H" ], "size": 1 }, { "sets": [ "G" ], "size": 1 }, { "sets": [ "H" ], "size": 2 }, { "sets": [ "A", "B", "C", "H" ], "size": 1 }, { "sets": [ "B", "C", "F" ], "size": 1 }, { "sets": [ "B", "C", "E" ], "size": 1 }, { "sets": [ "C" ], "size": 11 }, { "sets": [ "C", "E" ], "size": 2 } ]