benfred / venn.js

Area proportional Venn and Euler diagrams in JavaScript
MIT License
1.04k stars 216 forks source link

Allow "flexible" scaling to correct union/intersection relationships? #113

Open DrMeers opened 6 years ago

DrMeers commented 6 years ago

I'd like to be able to model data such as this:

screen shot 2018-01-11 at 3 04 55 pm

-- whilst the sizes of the circles may be spot on there, the union/intersections relationships are way out of whack. I'd prefer to sacrifice the correctly scaled size data to obtain something like this:

screen shot 2018-01-11 at 3 16 16 pm

(which I achieved by over-inflating |C| to 6 btw)

Is there any option built in to allow that (if not, do you know how difficult is it to achieve)?

benfred commented 6 years ago

The circle positions are calculated by an optimization process right now - trying to minimize the sum of squared errors of desired sizes vs actual sizes. However the circle radius is calculated directly: its set to be exactly proportional to the set sizes. With your code, its impossible to get the desired diagram without shrinking the radius of the a/b circles relative to the c circle.

To get what you're looking at we'd need to add the radius to the optimization procedure, which isn't conceptually difficult to do for at least the nelder-mead optimizer which might be enough.

DrMeers commented 6 years ago

Makes sense, thanks Ben

bwlang commented 6 years ago

Perhaps related... When i run like this:

var sets = [ {sets: ['WGBS'], size: 200000}, {sets: ['OTHER'], size: 17900000}, {sets: ['WGBS','OTHER'], size: 35800000}];

image

Unless I've misunderstood this rendering is just totally wrong... WGBS should be much larger and there should be tiny area about 200k i size outside of the large overlap.

I I scale down by a factor for 10^6 i can hover and see var sets = [ {sets: ['WGBS'], size: .2}, {sets: ['OTHER'], size: 17.9}, {sets: ['WGBS','OTHER'], size: 35.8}];

image

for reference: here's what Eulerape produces (had to add the 3rd class with tiny values for intersections)

image

Which is approximately the correct rendering I thinnk.

benfred commented 6 years ago

@bwlang I think the size for venn.js is correct, it's just that the input format isn't what you are expecting.

When you specify this:

var sets = [ {sets: ['WGBS'], size: 200000},
{sets: ['OTHER'], size: 17900000},

Venn.js interprets this as being |WGBS| = 20000, |OTHER| = 17900000. The set sizes passed to venn.js are not disjoint sizes, whereas with eulerape I'm guessing they are. (like |WGBS| = 200000 + 35800000 )?

Try going

var sets = [ {sets: ['WGBS'], size: 200000 + 35800000},
{sets: ['OTHER'], size: 17900000 + 35800000},
{sets: ['WGBS','OTHER'], size: 35800000}];
bwlang commented 6 years ago

Hi Ben: Thanks for your reply and sorry to hijack this issue - since it seems that maybe I'm just using the tool wrong ... but it still might be related. I tried the full set values and got this:

var sets = [ {sets: ['WGBS'], size: 36}, {sets: ['OTHER'], size: 53.7}, {sets: ['WGBS','OTHER'], size: 53.9}];\ image

I don't think it makes sense... the difference between OTHER and WGBS OTHER is 200k but the blue circle does not extend outside of the orange one enough (at all?) image

another example... we observe 12.5M OTHER 4.1M BOTH 2.5M WGBS which corresponds to: var sets = [ {sets: ['WGBS'], size: 6.6}, {sets: ['OTHER'], size: 16.6}, {sets: ['WGBS','OTHER'], size: 19.1}]; the circles are about the right size, but the blue one does not extend outside of the orange as it should (by ~2.5M) image

I ended up using http://eulerr.co/ to make the figures, so no need to reply unless you want more clarification from me.

benfred commented 6 years ago

@bwlang - you are still passing in incorrect parameters =). The intersection size shouldn't ever be larger than the set sizes.

If you pass in the parameters like I suggested:

var sets = [ {sets: ['WGBS'], size: 200000 + 35800000},
{sets: ['OTHER'], size: 17900000 + 35800000},
{sets: ['WGBS','OTHER'], size: 35800000}];

You get this output which I think is what you want:

screen shot 2018-09-18 at 9 55 09 am
bwlang commented 6 years ago

Ahhh - thanks for clarifying! I think I've got it now.