Posted on December 12, 2014

Using “Data Storytelling” with a chord diagram

It’s been way too long since my last post. I wanted to create something to post, but a few rather busy projects at work and moving to a new home had a big impact on my creativity, as in, I was left with none…

Exceptionally happy and honored that this piece was chosen for the shortlist of the Data Journalism category in the 2015 Kantar Information is Beautiful Awards.

Strata conference

And then I visited the Strata conference in Barcelona last November where I listened to a lot of interesting Design related talks. A theme that stood out this year was Storytelling with Data. Especially the talk from Michael Freeman called “From Confusing to Convincing: A Framework for Using Animation and Storytelling to Bolster the Effectiveness of Interactive Visualizations” really helped me discover a new method to structure complex visualizations in such a way as not to intimidate, but to intrigue your audience.

Zoom in of the full chord diagram showing phone brand switching

Chord diagram

One of my biggest pitfalls in terms of complex visualizations is that I keep trying to use chord diagrams whenever I work with a suitable dataset. However, trying to explain a chord diagram to a typical client I am working for always poses a challenge. In the past I usually just put a lot of text around it trying to explain it with a few examples. Like this.

The article I wrote about last year's data where I try to explain a chord diagram

But I think most people didn’t even bother to try and understand it (╥_╥)

After the Strata Conference, I really wanted to try the Storytelling with Data approach to improve a data visualization I had made in the past. Since I had just created a chord diagram for the yearly Deloitte Global Mobile Consumer Survey report with data I am allowed to share, it wasn’t a difficult choice.

Storytelling with data

I broke the chord diagram, based on phone brand switching data from the Global Mobile Consumer Survey, down into small pieces and slowly build it up again. I tried to hold onto what I learned from Michael’s talk:

Two screenshots of the 'donut arc' explanation phase

You can find a version on its own website here.

It took me more hours that I’d like to admit, and learned a lot more about d3.js and JavaScript, but the visual at the top of this post is my final result at using animation and storytelling to explain a chord diagram to engage my audience.

Other insights from the Dutch GMCS 2014

For those interested, some of the insights that were published in the (full) official Global Mobile Consumer Survey report are:

Two screenshots of the 'inner chord' explanation phase

This is actually the 2nd year I have done this analysis. By comparing the results of 2013, found here, with 2014 we can see that:

I hope I’ll be getting more chances in the future to use the storytelling approach, since I rather enjoyed restructuring the chord diagram.

Two screenshots of the final 'group of chords' explanation phase

See also