D3 Examples - #SWDChallenge

#SWDChallenge - Sept '18

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')

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>Rise and Fall of Tourist Destination - #SWDChallenge sept '18</title>
​
    <!-- load entire D3.js -->
  <!--script src="https://d3js.org/d3.v5.js"></script-->
  <!-- or load only required packages -->
  <script src="https://d3js.org/d3-selection.v1.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script src="https://d3js.org/d3-array.v1.min.js"></script>
  <script src="https://d3js.org/d3-path.v1.min.js"></script>
    <script src="https://d3js.org/d3-shape.v1.min.js"></script>
    
    <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <script src="https://d3js.org/d3-transition.v1.min.js"></script>
    
    <script src="d3.stretched.chord.js"></script>
    <script src="d3.layout.chord.sort.js"></script>
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <!-- Open Sans & CSS -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
      <style>
      body {
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #525252;
        text-align: center;
        background-color: #fafafa;
      }
      
      #chart {
        position: absolute;
        top: 0px;
      }
    
      #title {
        font-size: 20px;
        padding: 10px;
      }
​
      #subtitle {
        font-size: 16px;
      }
      
      #years {
        font-size: 16px;
        padding-top: 35px;
        color: grey;
      }
      
      #year-2000 {
        padding-right : 65px;
      }
      
      #year-2016 {
        padding-left : 65px;
      }
      
      #legend {
        position: absolute;
        bottom: 60px;
        width: 20%;
        padding-left: 40%;
        color: lightgrey;
      }
      
      .footer {
        position: absolute;
        bottom: 10px;
        color: lightgrey;
      }
      .footer.left {
        left: 10px;
      }
      .footer.center {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
      }
      .footer.right {
        right:10px;
      }
      .footer a {
        color: lightgrey;
        text-decoration: none;
      }
      
      .rise {
        color: #9BBF85;
      }
      
      .fall {
        color: #B3589A;
      }
        
      line {
        stroke: #000;
        stroke-width: 1.px;
      }
​
      text {
        font-size: 8px;
      }
​
      .titles{
        font-size: 12px;
        fill: grey;
      }
​
      path.chord {
        fill-opacity: .80;
      }
      </style>
  </head>
  <body>
​
    <div id="title">THE <span class="rise">RISE</span> AND <span class="fall">FALL</span> OF TOURIST DESTINATIONS</div>
    <div id="subtitle"> From 2000 to 2016 <span class="rise">Asia Pacific</span> became the prefered tourist destination at the expense of <span class="fall">Europe</span> and <span class="fall">North America</span>.</div>
    <div id="years">
      <span id="year-2000">2000</span>
      <span id="inter-year"></span>
      <span id="year-2016">2016</span>
    </div>
    
    <div id="legend">
      semi-circles show regional share of total tourism contribution to global GDP.
    </div>
    
    <div id="chart"></div>  
    
    <div class="footer center"><a href="https://bl.ocks.org/Kcnarf/7ebd3a8baebb3a7e03f3e4e147a2bc02">https://bl.ocks.org/Kcnarf/7ebd3a8baebb3a7e03f3e4e147a2bc02</a></div>
    <div class="footer left"><a href="https://www.storytellingwithdata.com/blog/2018/8/24/swdchallenge-how-would-you-makeover-this-graph">#SWDChallenge - Sept'18</a></div>
    <div class="footer right"><a href="https://twitter.com/_Kcnarf">Designed by: @_kcnarf</a></div>
    
    
    <script src="script.js"></script>
  </body>
</html>
    