Layout of circles goes horizontal when multiple large circles should be positioned next to a small circle

[scottmartinnet]

Here's the code that renders a diagram that demonstrates the problem:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="d3.js"></script>
<script src="venn.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
   var sets = [{"id":1,"label":"0","size":1958,"radius":44.358639953060134,"y":151.78206648466204,"x":296.0772270776158},{"id":2,"label":"1","size":1856,"radius":43.18777840062035,"y":151.78206648466204,"x":208.53080872393528},{"id":3,"label":"2","size":297,"radius":17.27627478492941,"y":151.78206648466204,"x":165.6369749319174},{"id":4,"label":"3","size":17281,"radius":131.78206648466204,"y":151.78206648466204,"x":472.21793351533796},{"id":5,"label":"4","size":4301,"radius":65.744072016603,"y":151.78206648466204,"x":85.744072016603}];
   var overlaps = [{"id":1,"sets":[2,0],"size":123},{"id":2,"sets":[2,1],"size":139},{"id":4,"sets":[2,3],"size":92},{"id":5,"sets":[2,4],"size":12},{"sets":[0,0],"size":0},{"sets":[0,1],"size":0},{"sets":[0,3],"size":0},{"sets":[0,4],"size":0},{"sets":[1,0],"size":0},{"sets":[1,1],"size":0},{"sets":[1,3],"size":0},{"sets":[1,4],"size":0},{"sets":[3,0],"size":0},{"sets":[3,1],"size":0},{"sets":[3,3],"size":0},{"sets":[3,4],"size":0},{"sets":[4,0],"size":0},{"sets":[4,1],"size":0},{"sets":[4,3],"size":0},{"sets":[4,4],"size":0}];
   var combined = venn.venn(sets, overlaps);
   var diagram = venn.drawD3Diagram(d3.select('#overlap-chart'), combined, $('#overlap-chart').width(), 375);});
</script>

<div id="overlap-chart" style="width: 624px; height: 374px;"></div> 

It should be placed in a directory with venn.js and d3.js.

My goal is to display the relationships between one circle (the "pivot"), and all the other circles. In this diagram, the pivot is circle 2. In the overlaps variable, set 2 has non-zero overlaps with all the other circles, and all the other circle circles have zero overlaps with each other (because we only want to see the relationship between the pivot and the others). But when the diagram renders, all the circles are placed in a single horizontal row, instead of grouping them around circle 2.

This appears to happen when the pivot is too small. In this example, if you make the size of set 2 50000 instead of 297, the circles are laid out properly (but of course no longer accurately reflect the size of each set).

Is this intentional behavior? I can see doing this if the circle was so small that you couldn't fit the larger circles around it, but it seems like there's plenty of room here.

[benfred]

Yeah - this is working like its supposed to (just not like you want it to =(.

I'm assuming that the output you want is something like this:

The problem with that diagram is that sets (0, 1, 3, 4) shouldn't be overlapping at all according to the overlap areas you are passing in - making it have a higher loss function than what its producing.

Look at PR #10 for a proposed method to overcome this. If it works for you - I'll merge it to master .

[scottmartinnet]

Heh, that makes total sense. I suspected something like that but didn't know how to express it.

This code works great, except for the fact that the diagram produced is taller than it is wide. In the 625x375 window, it would fit better rotated 90 degrees, and other arrangements lay themselves out that way. I don't know if that's related to this at all; I can create a new issue if you want. Regardless, this is a great improvement for our case.

Here's an example of the code for a diagram that gets laid out horizontally, the way that it intuitively seems the above should be laid out:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="d3.js"></script><script src="venn.js"></script><script type="text/javascript">$(document).ready(function() {    var sets = [{"id":60,"label":"0","size":1960,"radius":53.134792881788606,"y":301.26520711821144,"x":192.04953051060735},{"id":61,"label":"1","size":1858,"radius":51.73373226864182,"y":177.86981869734862,"x":71.73373226864182},{"id":62,"label":"2","size":298,"radius":20.718537149280536,"y":82.18273038458457,"x":192.04953051060735},{"id":63,"label":"3","size":17302,"radius":157.86981869734862,"y":177.86981869734862,"x":404.7991767045968},{"id":64,"label":"4","size":4301,"radius":78.71104488063317,"y":177.86981869734862,"x":192.04953051060735}];    var overlaps = [{"id":60,"sets":[4,0],"size":57},{"id":61,"sets":[4,1],"size":74},{"id":62,"sets":[4,2],"size":12},{"id":63,"sets":[4,3],"size":343},{"sets":[0,0],"size":0,"weight":1e-10},{"sets":[0,1],"size":0,"weight":1e-10},{"sets":[0,2],"size":0,"weight":1e-10},{"sets":[0,3],"size":0,"weight":1e-10},{"sets":[1,0],"size":0,"weight":1e-10},{"sets":[1,1],"size":0,"weight":1e-10},{"sets":[1,2],"size":0,"weight":1e-10},{"sets":[1,3],"size":0,"weight":1e-10},{"sets":[2,0],"size":0,"weight":1e-10},{"sets":[2,1],"size":0,"weight":1e-10},{"sets":[2,2],"size":0,"weight":1e-10},{"sets":[2,3],"size":0,"weight":1e-10},{"sets":[3,0],"size":0,"weight":1e-10},{"sets":[3,1],"size":0,"weight":1e-10},{"sets":[3,2],"size":0,"weight":1e-10},{"sets":[3,3],"size":0,"weight":1e-10}];    var combined = venn.venn(sets, overlaps);    var diagram = venn.drawD3Diagram(d3.select('#overlap-chart'), combined, $('#overlap-chart').width(), 375);});</script><div id="overlap-chart" style="width: 624px; height: 374px;"></div> 

Thanks so much for helping out with this. The implementation of this diagram in our platform has already really impressed people at my company.

[benfred]

fixed by #10