title: d3v4 - Chord Chart refactor and enhancements
body: <p><a href="https://i.stack.imgur.com/Jou46.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jou46.jpg" alt="enter image description here"></a></p>
  
  <p>I'm playing around with different types of infographics -- I had this idea of a chord diagram - like a ball of yarn -- where you may have 2 sets of data -- like Skills and Experience opposite ends of a circle -- and then using "strings"/lines - to mark which set of skills a person has against their level of experience -- where the strings/lines merge towards the bottom of the chart -- maybe to show a photo of the person etc..</p>
  
  <p>I've recently upgraded this from d3v3 to v4.</p>
  
  <p>//version 4
  <a href="https://jsfiddle.net/7mjfa3bp/" rel="nofollow noreferrer">https://jsfiddle.net/7mjfa3bp/</a></p>
  
  <p>I am interested in cleaning up this code base -- and maybe adding some animation to it -- if it be the dougnut chart aspects tween first -- then the lines draw one by one? I am open to interesting evolutions/enhancements for this chart -- if giving it more aspects will serve a person -- like Skills, Experience, Work Place -- </p>
  
  <p>In this sample to get the groups to separate out - I had to manipulate the input data to add GAPS - and then remove the influence for plotting labels and pointers.</p>
  
  <pre><code>            var id = 0;
              var d = [];
  
              var totalDataSpread = 0;
              $.each(data, function(index, value) {
                totalDataSpread += value.set.length;
              });
  
              console.log("totalDataSpread", totalDataSpread);
  
              $.each(data, function(index, value) {
  
                var segmentTotal = value.set.length;
                $.each(value.set, function(i, v) {
                  d.push({
                    group: value.group,
                    label: v,
                    id: id++,
                    value: 1 // ((segmentTotal/totalDataSpread)*10) 
                  });
                });
  
                var gapSize = 10;
                if (segmentTotal &gt; 10) {
                  gapSize = 20;
                }
  
                //console.log("create GAP", value.set);
                d.push({
                  group: "gap",
                  label: "gap " + id,
                  id: -1,
                  value: gapSize
                });
  
              });
  
  
  
              data = d;
  </code></pre>
  
  <ul>
  <li>notes</li>
  </ul>
  
  <p>Is there a more streamlined approach in this refactor - like mapping or something I've missed in the architecture of the chart. -- Should I use a pie chart base where I faked the "gaps" -- or really work around creating arcs that repel each other to the poles? Then maybe not have the "gap" arcs appearing so it looks more like two opposing arcs</p>