We use Venn diagrams to show relationships between sets. Draw a couple of overlapping circles, what’s in the overlap region belongs to both sets. The problems are:

- the relative sizes of sets are hard to represent accurately
- if you have more than two or three sets the diagram gets messy very quickly.

Here I show an alternative way to display intersections of lists using the so called “chord diagram”. The visualization I am advocating here is packaged as a d3 plugin I am calling “chord2″, which provides a convenient API for the chord diagram specifically devised to represent intersections.

# How to read a chord intersection diagram

A chord diagram is composed by arcs, which lie on the perimeter of a circle, and chords (or ribbons) that connect arcs together. Each arc represents a set or collection of things: the width of an arc’s angle is proportional to the size of the set it represents. A chord represents common elements between two sets (the arcs it connects); the wider the chord, the more elements we find in the intersection of the sets. Let’s consider this example of three lists of people:

nice people := [Charline, Martin, Benedikt, Camilla] rich people := [Sebastian, Camilla] smart people := [Larry, Camilla, Charline, Gustavo, Audrey]

Here the chord and venn diagrams side by side for the lists above.

Each overlap region of the Venn diagram is mapped to one or more chords. The region corresponding to Camilla, which belongs to all sets, is represented by three chords:

Charline, who is nice and smart but not rich, is in a two-sets intersection, hence is represented by a single chord (if you want, a chord with two ends, as opposed to a three-ended triangular chord as for Camilla):

All other people lies in one and only one list, so there is no chord for them.

# The need for exploding intersections

To draw the chord diagram above you’ll need to split your lists into the atomic components of their intersection as depicted in the figure. And I have you covered: in a previous post I illustrate how that is done.

# A visual optimization: polygons of chords

As the number of sets increases, the naive approach to join arcs is to connect each side with all other sides that have elements in common. But is much better to economize on chords, as that approach would lead to lots of chords happily running around the diagram for each “nth order” overlap (group of elements common to n sets). What we can do instead is to draw only n chords so that they form a chain: where a chord “arrives”, another one “leaves”, and all regions in the overlap are touched by exactly two chords, no matter what the order of the overlap is. I call these constructs “polygons”, as if each chord is a “side” in a polygon.

The following figure explains how much clutter can be saved: on the left, the naive “connect everything” solution. On the right, the cleaner strategy. My chord2 d3 plugin uses the latter.

# Use fading to make polygons stand out

The optimization discussed above has a price: given an arc, now it takes a little more effort to recognize all the other arcs it connects to. We need to follow polygons around, instead of just getting the answer from multiple chords all springing out of a single source.

To get back the desired readability, when you mouse over an arc the chord2 plugin will make all unrelated chords fade out. Try it for yourself in the diagram below; all other images in this post are static PNGs, but this one is a real chord diagram powered by d3.