Creating multi-ribbon-chord diagrams in D3

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.


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

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: (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.

This piece was devised and written by Starcount’s Lead Innovation Engineer, Paul Jensen.


7 Steps to Data Transformation

Data transformation demands clearly pronounced goals, strong engagement strategies and a willingness to move quickly and risk failure. These require solid, visionary leadership in order to inspire buy-in across an organisation. This Whitepaper, authored by data pioneer Edwina Dunn details the 7 success factors needed for data transformation.

Read More

Leading high street bank onboarding SMEs

Starcount mined a High Street bank’s business data, third party data and Starcount Observatory data to better understand the SME market, their needs and wants.

Read More

Something for the weekend

Automotive partnerships, predictions about the … Continued

Read More

Unravelling the urban myths of the pensions industry

Starcount has delved into the state of the UK pensions industry, examining how disruption in the space is causing many providers to reassess how they communicate with their customers.

Read More

Retirement & Investments business

Starcount created actionable insight and a data-focused strategy for a leading retirement & investment business, developing a deep understanding of their customers and collating data to identify significant savings in their business.

Read More

The key to understanding emotional loyalty

This Whitepaper examines our revolutionary new approach to data science using emotional analytics, revealing how peoples' passions predict purchase.

Read More

Your Life: A revolution in approaching education

Starcount worked with community interest company Your Life to create deep insight into how schools are performing based on how highly they perform in STEM subjects.

Read More

Boosting test drives by personalising communication

Starcount worked with this automotive brand to maximise engagement and increase sales of their new model.

Read More

Customer centricity and the future of banking

Starcount has delved into the future of the banking industry, looking at how different forms of disruption, such as the Open Banking Initiative, will affect the industry.

Read More