#SWDChallenge - Sept '18

This chart is my contribution to the september 2018 #SWDChallenge.

I wanted the chart to focus on rank shifts so I designed it this way:

• colours focus attention on rank shifts; any other information (such as precentages) gives the reader a deeper understanding, but uses less eye-catching colours (i.e. greys) in order to not disturb the main message
• two distinct colours differentiate rise and fall, respectively lime-green and pink-red (more on this colour-blindness friendly palette below)
• the chart is vertically oriented, so that shapes of the chords themselves indicate a rise or a fall

Also, even if my first idea was to use a flow chart, it was more appealing and fun to use a circular flow chart :-) Many thanks to Nadieh Bremer for sharing How to create a Flow Diagram with a Circular Twist.

Finally, regarding the color palette, I first use a basic green/red, but @storywithdata immediatly noticed that it was not color-blindness friendly. I first didn’t know how to modify the palette. @visualizingdata brought me the response I was looking for in its wonderfull blog five ways to design for red-green colour-blindness (I choose option #2).

Acknowledgments to :

• D3.js (v5)
• blockbuilder.org, which is a fantastic on-line tool for experimmenting with D3 and sharing experience with the D3 community
• Nadieh Bremer for sharing its experience, and more specifically on How to create a Flow Diagram with a Circular Twist
• @storywithdata for proposing and managing #SWDChallenge
• @visualisingdata for its fantistic collection of blogs called the litlle of visualization desing and five ways to … (https://www.visualisingdata.com/blog/, category ‘design’)