July 6, 2017
At Starcount we help businesses to better understand their customers through data. We’ve recently worked on finding a way to visualise overlapping segments, and created a fork of D3’s chord diagram where the ribbons can span more than 2 chords. This article explains how we designed and created them.
Background
Traditional customer segmentation has worked on the basis that people can be put into distinct groups, with no overlap between those segments. Though that is a convenient way to present customer segments to clients, it over-simplifies them. If you look at the records in your music collection, you might struggle to say that you are solely into pop, rock, or electronica music, yet customer segmentation does exactly that — pigeon-holing people and hiding the true nature of life as they experience it.
At Starcount, we have been pioneering a new form of customer segmentation where people can belong in multiple segments. This form of customer segmentation allows us to provide a more accurate understanding of who those people are. One of the challenges of this approach though is how to visualize the overlapping segments?
Enter the venn diagram
Venn diagrams have a beautiful simplicity that helps to easily communicate the extent to which a number of things can overlap with each other… so long as there are a small number of things to compare. We initially looked at Venn diagrams as a way to explore visualising overlapping segments, but we soon realised that, given the number of segments and overlaps that can exist in a customer segmentation, this approach would struggle.
For one, we would need to make sure that all segments could be organised in such a way as to capture all of the overlaps that existed, as well as making sure that the areas of the overlaps were true to representing the percentage overlap that was occurring. This particular problem suggested to us that we needed a different approach.
Enter D3-chord
We flipped the problem on its head; rather than try to use the area of segments overlapping each other to represent their percentage overlap, we would treat overlaps as connections between segments, with the percentage overlap of segments being represented by the size of the connection at each segment. This allowed us to look at using another data visualisation to represent overlapping segments — chord diagrams.
Chord diagrams are very useful for showing the relationship between 2 items, via a series of chords and ribbons. The chords on the outer edge can represent an entity, and the ribbon that goes between them can represent a relationship or flow between 2 of those entities. Some good examples of this diagram include graphing Uber’s ribes by neighbourhood in San Francisco and the Euro debt crisis. D3’s chord library provided a good solution for our needs.
We had found a useful way to represent customer segmentation, but we then encountered a new problem. How to represent customer segment overlaps that could span more than 2 segments? We realised that we needed a way to draw ribbons that could span more than 2 chords. This required an approach that no-one had attempted before.
So we rolled up our sleeves and had a go…
Changing D3-chord to draw multi-ribbon chords
We forked the source code for D3’s chord diagram, and started to tinker with it. We knew that we needed to find a way to draw ribbons that could span more than 2 chords, as well as a way to provide the data that could represent links between more than 2 chords. To understand the source code, we had to step through an example chord, such as the example found here: https://bl.ocks.org/mbostock/4062006 (visualised above with slightly different colors).
We realised that there were 2 changes that we had to make to get the diagram to draw ribbons spanning multiple chords:
- We needed to change the way that the data was put into the diagram for calculating the size of the chords and the ribbon edges.
- We also needed to work on how to draw ribbons that could span multiple chords.
With these 2 changes in place, we were able to extend d3-chord to draw diagram like the one shown below:
As you can see, it looks a bit like a wishbone, extending between segments 1, 3 and 5. Now the multiribbon chord diagram can represent segmentation overlaps that span across more than 2 segments, with the ability to ascertain what percentage overlap there is into each segment. We refer to this implementation internally as multi-ribbon chord diagrams.
The next challenge for us is showing how these segmentations and the underlying motivations within those segments change over time. If you are interested in working on challenges like this, we are hiring for a number of roles here at Starcount.
Get in touch by emailing steve.ward@starcount.com.
To hear more from Starcount, please sign up to our newsletter.
