Venns

Venn & Ribbon Diagrams

Areas are proportionate to the numeric values below.

A
B
C

AB
AC
BC

ABC

Circular Venn diagrams are perhaps the most familar way to express proportion and overlap, with wide application in data presentation. Perhaps surprisingly they are difficult to draw: there is no guaranteed solution and most methods are iterative or approximate. In this implementation the triple-intersection value is ignored, what you see is the best fit of three circle-pairs (pairs do have an exact solution).

For these reasons I devised the "ribbon diagram". The left side shows the labels and color scheme and each category's proportion as if fully separate. The right side shows how the categories actually overlap; the heights of the edges are proportionate the input data. It is exact, there's no approximation necessary.

It's quite possible to come up with data that break the diagrams, for example by forcing a triangle inequality. If you have a serious use-case where this is a problem, contact me.

All the drawing is done in canvas, so it won't work in non-compliant browsers (i.e., IE). The animation is just for fun, unlikely to be used in a business application. Safari and Chrome do the animation very smoothly, while Firefox's canvas engine must be considerably slower since it's choppy (Mac 3.6.3).

Ribbon Diagram	Venn Diagram