4 ms·

Drawing Venn Diagrams

56 points by luu 9y ago

benfrederickson 9y ago
Neat demonstration! A while back I wrote a small package in Javascript for computing area proportional Venn and Euler diagrams: https://github.com/benfred/venn.js https://github.com/benfred/venn.js . The 2 circle case here is relatively easy, but the problem gets tricky when you have 3+ sets. I wrote up my approach here https://www.benfrederickson.com/venn-diagrams-with-d3.js/ https://www.benfrederickson.com/venn-diagrams-with-d3.js/ and https://www.benfrederickson.com/better-venn-diagrams/ https://www.benfrederickson.com/better-venn-diagrams/
- mappu 9y ago
  I really like this project. I have some high-dimension data (object deduplication) that would really benefit from a visualization like this. In the music example, it has to give up on rendering all intersections since the layout isn't feasible with area-proportional circles - is there anything else that could be done? Is it possible to use ellipses or curved-shapes instead? But then I guess searching for a solution could become too computationally expensive for client-side JS.
  - jamessb 9y ago
    You could give up on trying to represent the sets with overlapping circles, and use a different approach, such as UpSet: http://caleydo.org/tools/upset/ http://caleydo.org/tools/upset/
  - benfrederickson 9y ago
    There is a pretty good breakdown of a bunch of different options for visualizing sets here: http://www.cvast.tuwien.ac.at/SetViz http://www.cvast.tuwien.ac.at/SetViz Venn/Euler diagrams don't work all that well past 3 sets, not all areas will be shown if using circles - so unless some of the sets are disjoint it will be a misleading diagram (like in the music example). However, I think it works well for 3 set diagams, I have an interactive example on last.fm data here https://www.benfrederickson.com/distance-metrics/ https://www.benfrederickson.com/distance-metrics/ in the context of explaining some simple distance metrics.
- sackintor 9y ago
  I wanted to do this for three circles a while ago and found this aS well. http://www.eulerdiagrams.com/Euler3.html http://www.eulerdiagrams.com/Euler3.html I thought it was pretty neat
saagarjha 9y ago
I find it interesting that the function doesn't have a closed form solution, given how easy it is to compute it. I wouldn't have thought, at first glance, that the function wasn't invertible.
jessriedel 9y ago
Non-programmer here. Isn't numerically inverting an analytic function something that should be done with a math library rather than coded from scratch? (Or is the point of this demonstration how to do that inversion rather than anything about Venn diagrams?)
vinchuco 9y ago
Correction to title: Drawing Proportional-Intersection Venn Diagrams This seems to be only for two circles. I was hoping for an algorithm for drawing any Venn Diagram. Here's n=7 https://78.media.tumblr.com/tumblr_m74i4eR9Ym1qa0uujo1_1280.jpg https://78.media.tumblr.com/tumblr_m74i4eR9Ym1qa0uujo1_1280.... Might not be the most efficient way to get proportionality, but it would seem that making the set boundaries elastic and putting a proportional amount of non-overlapping particles within the corresponding regions may draw a 'good enough' picture. Sort of like in the type of graph layout algorithm https://youtu.be/_Oidv5M-fuw https://youtu.be/_Oidv5M-fuw I find this kind of physical approach to 'optimization' entertaining. With quotes because it need not converge/terminate. In the book "The Mathematical Mechanic" by Levi, there's even more examples like a physical model for solving an optimal location problem in 2D (minimize sum of distance from a source to fixed locations, choosing where to place the source) by setting up weights connected by strings to a ring denoting the optimal location of the source. It also claims to prove the Pythagorean theorem by a prism-shaped water tank construction.
askvictor 9y ago
The code is neat, but given how terrible humans are at comparing areas[1] (particularly odd shapes like this), is there any point to making Venn diagrams proportional (other than filling your own deep OCD desires)? 1: See also: Pie charts
- vinchuco 9y ago
  If humans are bad at comparing areas, more the reason to have an algorithm for drawing equal sizes.
  - askvictor 9y ago
    But if most people don't perceive the actually equal sizes as equal, then what's the point?
    - vinchuco 9y ago
      A pie chart may be a bad design choice, but at least I'd expect it to be accurate. When I wrote the comment, my thinking was that maybe color would be a better choice than area then, in which case unequal areas may confound that approach further.
dghf 9y ago
In the extremes (0% and 100% overlap), don't these cease to be Venn diagrams? I thought a Venn diagram had to show every possible intersection and non-intersection, even if some of these were empty.
- libria 9y ago
  In answer to a code-review critique I once posted a Venn diagram of two completely non-overlapping circles labeled "What you're asking about" and "Scope of this feature". It got the point across, albeit with a little snark.
alok-g 9y ago
See also: Matplotlib Venn [1, 2] which draws area-accurate Venn diagrams. [1] https://pypi.python.org/pypi/matplotlib-venn https://pypi.python.org/pypi/matplotlib-venn [2] https://python-graph-gallery.com/venn-diagram/ https://python-graph-gallery.com/venn-diagram/
nayuki 9y ago
You don't need 100 iterations of binary search. Double-precision floating-point numbers only have 52 bits of precision.
- yurivish 9y ago
  Hey, thank you -- this is a good point. I'll update the code to 52 iterations in the upcoming iteration to the site.
ape4 9y ago
Off topic a bit... what about those pie charts that are missing the middle. Are they proportional? Edit: seem to be called donut charts.
- callumlocke 9y ago
  With both pie charts and donut charts, the size of a segment is based on its arc length. With a pie, that's the same thing as area, but for donuts it's not. So I guess that's one argument against donut charts. Neither chart is great for comparing sizes imo. Check out https://github.com/ft-interactive/chart-doctor/tree/master/visual-vocabulary https://github.com/ft-interactive/chart-doctor/tree/master/v...
  - felixhandte 9y ago
    A donut chart is also area<->arc length proportional. Intuition: a donut chart is what remains of a pie chart when a smaller version of the same pie chart is removed from the center. If the two pie charts are proportionally correct, their difference must be proportionally correct.
    - callumlocke 9y ago
      You are right
tejtm 9y ago
I used "Area Proportional Ellipses" several years back which allowed up to three quantities to be represented. http://www.eulerdiagrams.org/eulerAPE/ http://www.eulerdiagrams.org/eulerAPE/ I made multiple highly precise comparison figures... In the end someone (else) went into a paint program slapped a few ovals together as a cartoon of my precision which went into the final product because it did made a better illustration and conveyed to point of my figures without any accuracy beyond that of the mark-1 eyeball

56 points by luu 9y ago

Neat demonstration! A while back I wrote a small package in Javascript for computing area proportional Venn and Euler diagrams: https://github.com/benfred/venn.js https://github.com/benfred/venn.js . The 2 circle case here is relatively easy, but the problem gets tricky when you have 3+ sets. I wrote up my approach here https://www.benfrederickson.com/venn-diagrams-with-d3.js/ https://www.benfrederickson.com/venn-diagrams-with-d3.js/ and https://www.benfrederickson.com/better-venn-diagrams/ https://www.benfrederickson.com/better-venn-diagrams/

mappu 9y ago
I really like this project. I have some high-dimension data (object deduplication) that would really benefit from a visualization like this. In the music example, it has to give up on rendering all intersections since the layout isn't feasible with area-proportional circles - is there anything else that could be done? Is it possible to use ellipses or curved-shapes instead? But then I guess searching for a solution could become too computationally expensive for client-side JS.
- jamessb 9y ago
  You could give up on trying to represent the sets with overlapping circles, and use a different approach, such as UpSet: http://caleydo.org/tools/upset/ http://caleydo.org/tools/upset/
- benfrederickson 9y ago
  There is a pretty good breakdown of a bunch of different options for visualizing sets here: http://www.cvast.tuwien.ac.at/SetViz http://www.cvast.tuwien.ac.at/SetViz Venn/Euler diagrams don't work all that well past 3 sets, not all areas will be shown if using circles - so unless some of the sets are disjoint it will be a misleading diagram (like in the music example). However, I think it works well for 3 set diagams, I have an interactive example on last.fm data here https://www.benfrederickson.com/distance-metrics/ https://www.benfrederickson.com/distance-metrics/ in the context of explaining some simple distance metrics.
sackintor 9y ago
I wanted to do this for three circles a while ago and found this aS well. http://www.eulerdiagrams.com/Euler3.html http://www.eulerdiagrams.com/Euler3.html I thought it was pretty neat

saagarjha 9y ago

I find it interesting that the function doesn't have a closed form solution, given how easy it is to compute it. I wouldn't have thought, at first glance, that the function wasn't invertible.

jessriedel 9y ago

Non-programmer here. Isn't numerically inverting an analytic function something that should be done with a math library rather than coded from scratch? (Or is the point of this demonstration how to do that inversion rather than anything about Venn diagrams?)

vinchuco 9y ago

Correction to title: Drawing Proportional-Intersection Venn Diagrams This seems to be only for two circles. I was hoping for an algorithm for drawing any Venn Diagram. Here's n=7 https://78.media.tumblr.com/tumblr_m74i4eR9Ym1qa0uujo1_1280.jpg https://78.media.tumblr.com/tumblr_m74i4eR9Ym1qa0uujo1_1280.... Might not be the most efficient way to get proportionality, but it would seem that making the set boundaries elastic and putting a proportional amount of non-overlapping particles within the corresponding regions may draw a 'good enough' picture. Sort of like in the type of graph layout algorithm https://youtu.be/_Oidv5M-fuw https://youtu.be/_Oidv5M-fuw I find this kind of physical approach to 'optimization' entertaining. With quotes because it need not converge/terminate. In the book "The Mathematical Mechanic" by Levi, there's even more examples like a physical model for solving an optimal location problem in 2D (minimize sum of distance from a source to fixed locations, choosing where to place the source) by setting up weights connected by strings to a ring denoting the optimal location of the source. It also claims to prove the Pythagorean theorem by a prism-shaped water tank construction.

askvictor 9y ago

The code is neat, but given how terrible humans are at comparing areas[1] (particularly odd shapes like this), is there any point to making Venn diagrams proportional (other than filling your own deep OCD desires)? 1: See also: Pie charts

vinchuco 9y ago
If humans are bad at comparing areas, more the reason to have an algorithm for drawing equal sizes.
- askvictor 9y ago
  But if most people don't perceive the actually equal sizes as equal, then what's the point?
  - vinchuco 9y ago
    A pie chart may be a bad design choice, but at least I'd expect it to be accurate. When I wrote the comment, my thinking was that maybe color would be a better choice than area then, in which case unequal areas may confound that approach further.

dghf 9y ago

In the extremes (0% and 100% overlap), don't these cease to be Venn diagrams? I thought a Venn diagram had to show every possible intersection and non-intersection, even if some of these were empty.

libria 9y ago
In answer to a code-review critique I once posted a Venn diagram of two completely non-overlapping circles labeled "What you're asking about" and "Scope of this feature". It got the point across, albeit with a little snark.

alok-g 9y ago

See also: Matplotlib Venn [1, 2] which draws area-accurate Venn diagrams. [1] https://pypi.python.org/pypi/matplotlib-venn https://pypi.python.org/pypi/matplotlib-venn [2] https://python-graph-gallery.com/venn-diagram/ https://python-graph-gallery.com/venn-diagram/

nayuki 9y ago

You don't need 100 iterations of binary search. Double-precision floating-point numbers only have 52 bits of precision.

yurivish 9y ago
Hey, thank you -- this is a good point. I'll update the code to 52 iterations in the upcoming iteration to the site.

ape4 9y ago

Off topic a bit... what about those pie charts that are missing the middle. Are they proportional? Edit: seem to be called donut charts.

callumlocke 9y ago
With both pie charts and donut charts, the size of a segment is based on its arc length. With a pie, that's the same thing as area, but for donuts it's not. So I guess that's one argument against donut charts. Neither chart is great for comparing sizes imo. Check out https://github.com/ft-interactive/chart-doctor/tree/master/visual-vocabulary https://github.com/ft-interactive/chart-doctor/tree/master/v...
- felixhandte 9y ago
  A donut chart is also area<->arc length proportional. Intuition: a donut chart is what remains of a pie chart when a smaller version of the same pie chart is removed from the center. If the two pie charts are proportionally correct, their difference must be proportionally correct.
  - callumlocke 9y ago
    You are right

tejtm 9y ago

I used "Area Proportional Ellipses" several years back which allowed up to three quantities to be represented. http://www.eulerdiagrams.org/eulerAPE/ http://www.eulerdiagrams.org/eulerAPE/ I made multiple highly precise comparison figures... In the end someone (else) went into a paint program slapped a few ovals together as a cartoon of my precision which went into the final product because it did made a better illustration and conveyed to point of my figures without any accuracy beyond that of the mark-1 eyeball