Using Data Storytelling with a Chord Diagram

How to explain a chord diagram to someone who's never seen one before

Posted: December 13, 2014-Likes: 0-Comments: 22-Categories: D3.js, Data Visualization, Storytelling-Tags: D3.js, Interactive, Storytelling
You are here: ...
Home / Blog / D3.js / Using Data Storytelling with a Chord Diagram
November 2015 edit: Exceptionally happy that this piece was chosen for the shortlist of the Data Journalism category in the 2015 Kantar Information is Beautiful Awards
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… 

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 a talk from Michael Freeman entitled “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
Storytelling with Data Chord Diagram Header

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:
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 try and 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 Global Mobile Consumer Survey Chord Diagram down into small pieces and slowly build it up again. I tried to hold onto what I learned from Michael’s talk: 
  • Set the stage: Provide and introduction, give context
  • Introduce your characters: Explain what each visual encoding (e.g. color) and variable means
  • Create tension: Reveal your data as needed, not all at once
  • Provide resolution: Give the audience the chance to investigate for themselves (or provide a solid conclusion)
It took me more hours that I’d like to admit, 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 (if you want a clutter free version without this blog around it, see here)

And if you’re wondering why I might be doing something in a non-efficient way, it’s probably because that’s how far my current D3.js, JavaScript and/or CSS knowledge could take me (although I’d love to hear how I can make further improvements)

Other insights from the Dutch GMCS 2014

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

  • Apple and Samsung are capturing users from mainly Nokia and Other
  • Apple is losing few users, except to Samsung; even so, the number gained is twice the number lost
  • HTC is acquiring users from Nokia and LG, yet losing users to Samsung and Huawei
  • Nokia is still acquiring more users from Other than it loses
  • Huawei stands out as a new brand that is gaining small numbers of users from all brands, particularly Samsung. Huawei reported 120% growth in handset shipments in Europe and has become the 3rd brand in worldwide shipments, leaving Nokia, HTC and LG behind
This is actually the 2nd year I have done this analysis. By comparing the results of 2013 (which can be found in an earlier blog post) with 2014 we can see that:
  • Blackberry has decreased its share to only 1.5% and is now added to the “Other” category, while Huawei has grown significantly (from 0.2% last year to 2.4% in 2014) to take its place
  • Apple has grown its share of being the main phone of the respondents from 13% to almost 20%. More so, its share of people remaining loyal to the iPhone is also increasing
  • Nokia keeps losing share, from 20% last year to 15% this year (of which 12% is a non-smartphone Nokia), thus losing its place as 2nd biggest brand to Apple
  • Nokia, Samsung, Sony and HTC have all lost share since last year, while Apple, Huawei and more smaller brands in Other have grown
  • Very interestingly, although shares among brands have shifted, the most interesting flows from last year show less difference. Apple is still taking more clients from every other brand than losing to them. Nokia is still losing its biggest share by far to Samsung and only winning a bit from the “Other” category. However, in 2014 Samsung is taking more clients from HTC while HTC had a net win last year
I hope I’ll be getting more chances in the future to use the Storytelling approach, since I rather enjoyed restructuring the Chord Diagram. And again if you have any suggestions for improvements, please let me know
Prev / Next Post
Comments (22)
  • asif mehedi - December 15, 2014 - Reply

    Fantastic explanation. I may use a brief version of this if I ever do a chord diagram.

  • Patrick Tehubijuluw - December 18, 2014 - Reply

    Nice post. I like the storytelling method. Although it might take a while before it gets to the most interesting points in the story. Did you ever consider these vizzes to be interactive for your readers based on the data you put in? If you are interested, let me know.

    • Nadieh Bremer - December 18, 2014 - Reply

      Thank you! Yes the build up takes quite a while indeed. The issue is that not only are you explaining the data and context, because a Chord diagram is not an everyday visualization, you also have to explain how to read it.
      An excellent example of using Storytelling is “Out of Sight, out of Mind”. Since this is in essence a bar chart, the story can focus primarily on the data:

      Making it interactive to different datasets did cross my mind, but I’m no JavaScript expert so I felt that if I tried, the coding would become unwieldy

  • mike - December 25, 2014 - Reply

    This rocks, I’m trying to learn D3. I want to tell a story about customers moving among products at a company and this will help me with this task. Is there a github for the source code? Cheers!

  • Adam - December 30, 2014 - Reply

    The graphic is nice, but I have a few criticisms though. You probably did not design the graphic with mobile screens in mind, still it is annoying that the whole thing does not even fit on my laptop screen. I had to scroll up to view and down to click. Imagine the frustration of someone who could not scroll (just open the source and resize the window). For your info, my screen is the size of the typical laptop (1366 x 768) but actual height for content is around 650px, so any more than that doesn’t fit. Besides, designing for pixels is bad practice anyway.

    Also, the interactivity of the story telling part is not very well done. You cannot pause or go back, so if you miss anything, you have to reset and start all over. A system with back and forward buttons that go one step at a time would have led to a much better user experience.
    I hope you would take these criticisms as such–feedback to improve upon next time you do a visualization. Thanks

    • Nadieh Bremer - December 30, 2014 - Reply

      Thank you very much for your reply. Both of your points are very valid and they have been in my mind.
      The reason that I haven’t implemented both is that my D3/JavaScript knowledge isn’t on a high enough level. For the back button I had to add so much code in each step to go back to the previous state (and again maybe not, but how I would have to do it now) that it became unmanageable
      For the screen size, same reason. In my next post about exoplanets I am already trying to work with centering the visual regrdless of window size. I’ll try rescaling in my next visual as well :)

  • Ryan Vincent - January 8, 2015 - Reply

    This comment has been removed by the author.

  • Denes Csala - March 2, 2015 - Reply

    Awesome. Congratulations.

  • k - April 22, 2015 - Reply

    This illustration rocks!

  • Cylia - May 21, 2015 - Reply

    This illustration is awesome!
    I just want to know how did you add HTML code to the D3 code in wordpress?

    • Nadieh
      (Author) Nadieh - September 10, 2015 - Reply

      Thank you!
      I used an iframe :) (not perfect but it works)

  • Sergio - November 22, 2015 - Reply

    This is superb work. Congratulations!

  • Joe Bell - February 16, 2017 - Reply

    Still awesome in 2017

    • Nadieh
      (Author) Nadieh - February 26, 2017 - Reply

      Thank you very much! ^^

  • g - April 27, 2017 - Reply

    Wonderful. Can the source code ( be used under a MIT based license?

    • Nadieh
      (Author) Nadieh - April 27, 2017 - Reply

      Thank you! Well, the code in itself is fine, but the data it uses not, that belongs to Deloitte. However, the visual story in itself falls apart without the data :S You can build your own “intro to a chord diagram” version if you want to, with your own data, based on this perhaps?

Add comment

two × five =