
Drawing Venn Diagrams - luu
http://yuri.is/scribbles/venn-diagrams/
======
vinchuco
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....](https://78.media.tumblr.com/tumblr_m74i4eR9Ym1qa0uujo1_1280.jpg)

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.

------
benfrederickson
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
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.

~~~
benfrederickson
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.

------
saagarjha
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.

------
tejtm
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

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

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

------
jessriedel
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?)

------
askvictor
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
If humans are bad at comparing areas, more the reason to have an algorithm for
drawing equal sizes.

~~~
askvictor
But if most people don't perceive the actually equal sizes as equal, then
what's the point?

~~~
vinchuco
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.

------
alok-g
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/)

------
dghf
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
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.

------
ape4
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
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/v...](https://github.com/ft-interactive/chart-
doctor/tree/master/visual-vocabulary)

~~~
felixhandte
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
You are right

