Comments (13)
So - there are a bunch of issues here, one of which is that maybe we should be hiding these areas.
Another issue is that the second '1 opinions' label is in the wrong location. 0490141 fixes so that the extra labels go into the appropriate place, which looks ok:
There is another bug here with computing text centres that is triggered with only slightly different input though =( Also, I think that the inner circle here should be centred. Will keep you posted.
from venn.js.
It makes sense to me to hide them. Let me know what you'd like to me to do, I'm pretty familiar with the library at this point.
from venn.js.
If you want to make the change to hide the areas that would be great! I could also get it done on the weekend maybe - lmk=)
from venn.js.
Actually, 0490141 is working perfectly for me. I don't know if there are any other problems that hiding the unnecessary intersections would fix, but I'll wait until those manifest themselves to fix it.
Thanks for the fix!
from venn.js.
Woops – one more problem – so when it's full size it looks great:
However, when I make it smaller (in this case by bringing up the console), one of the 1 opinions
sublabels (there are 3 of them) go to the side:
This may be an additional instance of what you fixed in 0490141 – not sure.
Either way, hiding unnecessary g
elements would fix both, so I'll see if I have time to do that soon.
from venn.js.
Yeah - thats the other case I was talking about.
The problem here is the fallback code in computeTextCentres is kinda dumb for intersection areas. Especially this line.
So, that areaStats structure has the intersection points and arcs for each area (as explained in the 'exact solution' section of this post ).
With your example here there are two points returned that have almost 0 distance between them, right on top of where the label is being drawn. I averaged those points and ignored the arcs - even though one arc is basically the entire circle.
Hiding the unnecessary elements will hide the error obviously =)
from venn.js.
This should be fixed with that last commit (at least the textCentre will be set appropiately - there will still be 3 identical overlapping elements here).
from venn.js.
For some reason the triple overlap is not all the same sublabel, so it looks weird. I'll investigate more. Either way, hiding should still fix it.
from venn.js.
It's a 3 on top of a 1 – the real count is 1.
from venn.js.
I'm guessing that 'test platform 3' and 'test platform 1' has size '3' - and the label for that is placed on top of the 1 there. Its the best location probably for that label, I think hiding it is really the only possible thing to do here.
from venn.js.
Bug was on my end in calculating the size of the intersections – I gave A U B U C a size of 3 and A U B a size of 1.
Still no need to implement hiding, but maybe it'll pop up again in the future.
Thanks for all your help!
from venn.js.
So it's so close, but the labels are just slightly off position. 1 label is the intersection between 1, 2, 3, and 4
, and another is the intersection of 2, 3, and 4
.
I'm going to go ahead and implement hiding since it seems like it's a good thing to do, but am not quite sure which method is best.
I know what I need to do is:
1: a,b are intersection areas where a.sets.length < b.sets.length
2: if a's path is completely contained within b's path:
3: hide a
The question is how to evaluate 2.
Option One:
a's area + b's area == b's area
but I know from reading your blog posts that intersection areas are hard to calculate.
Option Two:
for some boundary points used to draw a's area:
if boundary point is in not in b:
a extends beyond b, return false
if there was never a boundary point, return true
Option Three:
return (a.size < b.size) and (a.sets is a proper subset of b.sets)
Not quite sure if this one excludes sets that I want to keep, but if it doesn't it seems to be the preferred solution for ease / speed.
What do you think is best?
from venn.js.
This did it! Option Three was fine.
hideUselessCircles () {
var intersections = d3.selectAll('.venn-intersection');
intersections.each(a => {
intersections.each(b => {
var selector = '[data-venn-sets="' + a.sets.join('_') + '"]';
if ((a != b) && (a.sets.isSubsetOf(b.sets)) && (a.size <= b.size)) {
d3.select(selector).classed('hide', true);
}
});
});
}
from venn.js.
Related Issues (20)
- Default loss function should use log ratio, not subtraction
- Proper subset not displaying correctly
- Removing and readding a set quickly uninentionally hides the set
- Invisible triple intersection HOT 1
- Minimum circle size HOT 2
- Static size of circles HOT 2
- Label is displayed on other label
- Abandoned? Lots of good PRs out there. HOT 2
- could not find a declaration file for module 'venn.js' in React HOT 1
- Dependent d3 version5 for venn.js HOT 2
- Parsing a heading with each set of data
- Compatibility with d3-selection HOT 1
- url question about snowpack HOT 3
- could you publish the npm for the latest git code? HOT 3
- Uncaught initial bisect points must have opposite signs HOT 1
- How to fix circle same position on every refresh time in venn.js
- Custom circle colors HOT 1
- jsnext:main es6 problem HOT 1
- The calculation accuracy of function circleCircleIntersection problem
- Is there a way to programmatically get a list of intersections not shown. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from venn.js.