final

.block

license: mit

README.md

Built with blockbuilder.org

forked from nicklewis96's block: fresh block

forked from nicklewis96's block: fresh block

d3.layout.chord.sort.js

customChordLayout = function() {
	var ε = 0.000001, ε2 = ε * ε, π = Math.PI, τ = 2.15 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π;
    var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords;
    function relayout() {
      var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
      chords = [];
      groups = [];
      k = 0, i = -1;
      while (++i < n) {
        x = 0, j = -1;
        while (++j < n) {
          x += matrix[i][j];
        }
        groupSums.push(x);
        subgroupIndex.push(d3.range(n).reverse());
        k += x;
      }
      if (sortGroups) {
        groupIndex.sort(function(a, b) {
          return sortGroups(groupSums[a], groupSums[b]);
        });
      }
      if (sortSubgroups) {
        subgroupIndex.forEach(function(d, i) {
          d.sort(function(a, b) {
            return sortSubgroups(matrix[i][a], matrix[i][b]);
          });
        });
      }
      k = (τ - padding * n) / k;
      x = 0, i = -1;
      while (++i < n) {
        x0 = x, j = -1;
        while (++j < n) {
          var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k;
          subgroups[di + "-" + dj] = {
            index: di,
            subindex: dj,
            startAngle: a0,
            endAngle: a1,
            value: v
          };
        }
        groups[di] = {
          index: di,
          startAngle: x0,
          endAngle: x,
          value: (x - x0) / k
        };
        x += padding;
      }
      i = -1;
      while (++i < n) {
        j = i - 1;
        while (++j < n) {
          var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i];
          if (source.value || target.value) {
            chords.push(source.value < target.value ? {
              source: target,
              target: source
            } : {
              source: source,
              target: target
            });
          }
        }
      }
      if (sortChords) resort();
    }
    function resort() {
      chords.sort(function(a, b) {
        return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
      });
    }
    chord.matrix = function(x) {
      if (!arguments.length) return matrix;
      n = (matrix = x) && matrix.length;
      chords = groups = null;
      return chord;
    };
    chord.padding = function(x) {
      if (!arguments.length) return padding;
      padding = x;
      chords = groups = null;
      return chord;
    };
    chord.sortGroups = function(x) {
      if (!arguments.length) return sortGroups;
      sortGroups = x;
      chords = groups = null;
      return chord;
    };
    chord.sortSubgroups = function(x) {
      if (!arguments.length) return sortSubgroups;
      sortSubgroups = x;
      chords = null;
      return chord;
    };
    chord.sortChords = function(x) {
      if (!arguments.length) return sortChords;
      sortChords = x;
      if (chords) resort();
      return chord;
    };
    chord.chords = function() {
      if (!chords) relayout();
      return chords;
    };
    chord.groups = function() {
      if (!groups) relayout();
      return groups;
    };
    return chord;
  };

d3.stretched.chord.js

stretchedChord = function() {
    var source = d3_source, 
    target = d3_target, 
    radius = d3_svg_chordRadius, 
    startAngle = d3_svg_arcStartAngle, 
    endAngle = d3_svg_arcEndAngle,
    pullOutSize = 0;
    
  var π = Math.PI,
    halfπ = π / 2;

    function subgroup(self, f, d, i) {
    var subgroup = f.call(self, d, i), 
      r = radius.call(self, subgroup, i), 
      a0 = startAngle.call(self, subgroup, i) - halfπ, 
      a1 = endAngle.call(self, subgroup, i) - halfπ;
      return {
        r: r,
        a0: [a0],
        a1: [a1],
        p0: [ r * Math.cos(a0), r * Math.sin(a0)],
        p1: [ r * Math.cos(a1), r * Math.sin(a1)]
      };
    }

    function arc(r, p, a) {
    var sign = (p[0] >= 0 ? 1 : -1);
    return "A" + r + "," + r + " 0 " + +(a > π) + ",1 " + (p[0] + sign*pullOutSize) + "," + p[1];
    }


    function curve(p1) {
    var sign = (p1[0] >= 0 ? 1 : -1);
    return "Q 0,0 " + (p1[0] + sign*pullOutSize) + "," + p1[1];
    }
  
  /*
  M = moveto
  M x,y
  Q = quadratic Bézier curve
  Q control-point-x,control-point-y end-point-x, end-point-y
  A = elliptical Arc
  A rx, ry x-axis-rotation large-arc-flag, sweep-flag  end-point-x, end-point-y
  Z = closepath

  M251.5579641956022,87.98204731514328
  A266.5,266.5 0 0,1 244.49937503334525,106.02973926358392
  Q 0,0 -177.8355222451483,198.48621369706098
  A266.5,266.5 0 0,1 -191.78901944612068,185.0384338992728
  Q 0,0 251.5579641956022,87.98204731514328
  Z
  */  
    function chord(d, i) {
    var s = subgroup(this, source, d, i), 
      t = subgroup(this, target, d, i);
          
  return "M" + (s.p0[0] + pullOutSize) + "," + s.p0[1] + 
      arc(s.r, s.p1, s.a1 - s.a0) + 
      curve(t.p0) + 
      arc(t.r, t.p1, t.a1 - t.a0) + 
      curve(s.p0) + 
      "Z";
   }//chord

    chord.radius = function(v) {
      if (!arguments.length) return radius;
      radius = d3_functor(v);
      return chord;
    };
    chord.pullOutSize = function(v) {
      if (!arguments.length) return pullOutSize;
      pullOutSize = v;
      return chord;
    };
    chord.source = function(v) {
      if (!arguments.length) return source;
      source = d3_functor(v);
      return chord;
    };
    chord.target = function(v) {
      if (!arguments.length) return target;
      target = d3_functor(v);
      return chord;
    };
    chord.startAngle = function(v) {
      if (!arguments.length) return startAngle;
      startAngle = d3_functor(v);
      return chord;
    };
    chord.endAngle = function(v) {
      if (!arguments.length) return endAngle;
      endAngle = d3_functor(v);
      return chord;
    };


  function d3_svg_chordRadius(d) {
      return d.radius;
  }

  function d3_source(d) {
    return d.source;
  }
    
  function d3_target(d) {
      return d.target;
  }

  function d3_svg_arcStartAngle(d) {
      return d.startAngle;
  }
    
  function d3_svg_arcEndAngle(d) {
      return d.endAngle;
  }

  function d3_functor(v) {
    return typeof v === "function" ? v : function() {
      return v;
    };
  }

  return chord;

}//stretchedChord

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>From your Education to your Job</title>

	<!-- D3.js -->	
    <script src="http://d3js.org/d3.v3.js"></script>
	<script src="d3.stretched.chord.js"></script>
	<script src="d3.layout.chord.sort.js"></script>
	
	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	
	<!-- Open Sans & CSS -->
	<link href='http://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;
		}	
		
		line {
		  stroke: #000;
		  stroke-width: 1.px;
		}

		text {
		  font-size: 8px;
		}

		path.chord {
		  fill-opacity: .80;
		}
		
		.title {
			text-anchor: middle;
			fill: #3B3B3B;
			font-weight: 300;
			font-size: 16px;
		}
		.titleLine {
			stroke: #DCDCDC;
			shape-rendering: crispEdges;
		}
		
		.title-h3 {
		    margin-top: 20px;
		    margin-bottom: 10px;
		    font-size: 24px;
		    font-weight: 500;
			line-height: 1.1;
			color: #3B3B3B;
		}
		
		@media (min-width: 500px) {
		  .explanation {
			width: 50%; 
			margin: 0 auto;
		  }
		}
	  </style>
  </head>
  <body>
 
	<div class="title-h3">Gene Comparisons</div>

    <div id="chart"></div>
	
	<div style="width: 100%;">
		<div class="explanation">
		
		</div>
	</div>
	
    <script src="script.js"></script>
    
  </body>
</html>

nema.csv

nema.json

[
 {
   "FIELD1": "Nematode",
   "FIELD2": " Identity"
 },
 {
   "FIELD1": "AgB14_g001_t01",
   "FIELD2": "88.889"
 },
 {
   "FIELD1": "AgE05_g008_t17",
   "FIELD2": "63.636"
 },
 {
   "FIELD1": "AgE04_g004_t05",
   "FIELD2": "50.000"
 },
 {
   "FIELD1": "AgE77_g001_t01",
   "FIELD2": "87.600"
 },
 {
   "FIELD1": "AgE54_g003_t03",
   "FIELD2": "87.500"
 },
 {
   "FIELD1": "AgE09_g003_t02",
   "FIELD2": "26.316"
 },
 {
   "FIELD1": "AgE47_g005_t02",
   "FIELD2": "85.714"
 },
 {
   "FIELD1": "AgB03_g007_t04",
   "FIELD2": "77.778"
 },
 {
   "FIELD1": "AgB04_g462_t03",
   "FIELD2": "42.00"
 },
 {
   "FIELD1": "AgE11_g008_t06",
   "FIELD2": "85.714"
 },
 {
   "FIELD1": "AgE09_g002_t06",
   "FIELD2": "50.000"
 },
 {
   "FIELD1": "AgE66_g002_t01",
   "FIELD2": "43.750"
 },
 {
   "FIELD1": "AgE07_g013_t01",
   "FIELD2": "80.000"
 },
 {
   "FIELD1": "AgE02_g006_t11",
   "FIELD2": "40.000"
 },
 {
   "FIELD1": "AgE13_g008_t01",
   "FIELD2": "30.769"
 },
 {
   "FIELD1": "AgE05_g005_t04",
   "FIELD2": "80.000"
 },
 {
   "FIELD1": "AgE76_g001_t11",
   "FIELD2": "66.7"
 },
 {
   "FIELD1": "AgB19_g001_t04",
   "FIELD2": "66.6"
 },
 {
   "FIELD1": "AgB29_g009_t10",
   "FIELD2": "80.000"
 },
 {
   "FIELD1": "AgE49_g002_t01",
   "FIELD2": "45.000"
 },
 {
   "FIELD1": "AgB21_g006_t03",
   "FIELD2": "34.884"
 },
 {
   "FIELD1": "AgE22_g001_t03",
   "FIELD2": "80.000"
 },
 {
   "FIELD1": "AgE14_g010_t04",
   "FIELD2": "47.826"
 },
 {
   "FIELD1": "AgE46_g003_t05",
   "FIELD2": "32.258"
 },
 {
   "FIELD1": "AgB28X_g018_t01",
   "FIELD2": "80.000"
 },
 {
   "FIELD1": "AgE10_g003_t13",
   "FIELD2": "47.059"
 },
 {
   "FIELD1": "AgE01_g016_t01",
   "FIELD2": "46.154"
 },
 {
   "FIELD1": "AgE06_g024_t02",
   "FIELD2": "70"
 },
 {
   "FIELD1": "AgE01_g026_t01",
   "FIELD2": "66.667"
 },
 {
   "FIELD1": "AgE01_g027_t07",
   "FIELD2": "61.538"
 },
 {
   "FIELD1": "AgB28X_g013_t01",
   "FIELD2": "70"
 },
 {
   "FIELD1": "AgE02_g014_t04",
   "FIELD2": "46.154"
 },
 {
   "FIELD1": "AgB03_g007_t04",
   "FIELD2": "38.095"
 },
 {
   "FIELD1": "AgE52_g004_t02",
   "FIELD2": "70"
 },
 {
   "FIELD1": "AgB23_g079_t04",
   "FIELD2": "50"
 },
 {
   "FIELD1": "AgB28X_g023_t08",
   "FIELD2": "49.387"
 },
 {
   "FIELD1": "AgE01_g004_t02",
   "FIELD2": "71.429"
 },
 {
   "FIELD1": "AgE14_g014_t06",
   "FIELD2": "60"
 },
 {
   "FIELD1": "AgB17_g092_t02",
   "FIELD2": "50"
 },
 {
   "FIELD1": "AgE19_g001_t02",
   "FIELD2": "71.429"
 },
 {
   "FIELD1": "AgE85_g001_t01",
   "FIELD2": "45"
 },
 {
   "FIELD1": "AgB31X_g003_t01",
   "FIELD2": "43.75"
 },
 {
   "FIELD1": "AgE02_g034_t08",
   "FIELD2": "72.727"
 },
 {
   "FIELD1": "AgE01_g027_t07",
   "FIELD2": "52.941"
 },
 {
   "FIELD1": "AgE03_g025_t01",
   "FIELD2": "38.462"
 },
 {
   "FIELD1": "AgE06_g022_t01",
   "FIELD2": "72.727"
 },
 {
   "FIELD1": "AgE03_g022_t01",
   "FIELD2": "60"
 },
 {
   "FIELD1": "AgB24_g004_t05",
   "FIELD2": "50"
 },
 {
   "FIELD1": "AgB23_g072_t01",
   "FIELD2": "75"
 },
 {
   "FIELD1": "AgE11_g006_t01",
   "FIELD2": "37.037"
 },
 {
   "FIELD1": "AgE01_g047_t02",
   "FIELD2": "36.364"
 },
 {
   "FIELD1": "AgE44_g001_t02",
   "FIELD2": "75"
 },
 {
   "FIELD1": "AgE22_g001_t03",
   "FIELD2": "58.433"
 },
 {
   "FIELD1": "AgB31X_g004_t01",
   "FIELD2": "58.333"
 },
 {
   "FIELD1": "AgE07_g004_t04",
   "FIELD2": "75"
 },
 {
   "FIELD1": "AgE01_g054_t02",
   "FIELD2": "40"
 },
 {
   "FIELD1": "AgB24_g005_t05",
   "FIELD2": "33.333"
 },
 {
   "FIELD1": "AgE02_g034_t08",
   "FIELD2": "75"
 },
 {
   "FIELD1": "AgE25_g003_t04",
   "FIELD2": "46.667"
 },
 {
   "FIELD1": "AgE03_g018_t01",
   "FIELD2": "34.783"
 },
 {
   "FIELD1": "AgE42_g003_t02",
   "FIELD2": "75"
 },
 {
   "FIELD1": "AgE01_g016_t01",
   "FIELD2": "53.846"
 },
 {
   "FIELD1": "AgB34_g004_t01",
   "FIELD2": "36.364"
 },
 {
   "FIELD1": "AgE54_g001_t01",
   "FIELD2": "77.778"
 },
 {
   "FIELD1": "AgE01_g037_t02",
   "FIELD2": "35.294"
 },
 {
   "FIELD1": "AgE06_g023_t02",
   "FIELD2": "35"
 },
 {
   "FIELD1": "AgE70_g002_t04",
   "FIELD2": "77.778"
 },
 {
   "FIELD1": "AgE06_g007_t07",
   "FIELD2": "37.5"
 },
 {
   "FIELD1": "AgE04_g007_t14",
   "FIELD2": "21.918"
 }
]

script.js

var screenWidth = $(window).innerWidth(), 
	mobileScreen = (screenWidth > 500 ? false : true);

var margin = {left: 50, top: 10, right: 50, bottom: 10},
	width = Math.min(screenWidth, 800) - margin.left - margin.right,
	height = (mobileScreen ? 300 : Math.min(screenWidth, 800)*5/6) - margin.top - margin.bottom;
			
var svg = d3.select("#chart").append("svg")
			.attr("width", (width + margin.left + margin.right))
			.attr("height", (height + margin.top + margin.bottom));
			
var wrapper = svg.append("g").attr("class", "chordWrapper")
			.attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 1.75 + margin.top) + ")");;
			
var outerRadius = Math.min(width, height) / 2  - (mobileScreen ? 80 : 100),
	innerRadius = outerRadius * 0.95,
	opacityDefault = 0.7, //default opacity of chords
	opacityLow = 0.02; //hover opacity of those chords not hovered over
	
//How many pixels should the two halves be pulled apart
var pullOutSize = (mobileScreen? 20 : 50)

//////////////////////////////////////////////////////
//////////////////// Titles on top ///////////////////
//////////////////////////////////////////////////////

var titleWrapper = svg.append("g").attr("class", "chordTitleWrapper"),
	titleOffset = mobileScreen ? 15 : 40,
	titleSeparate = mobileScreen ? 30 : 0;

//Title	top left
titleWrapper.append("text")
	.attr("class","title left")
	.style("font-size", mobileScreen ? "12px" : "30px" )
	.attr("x", (width/2 + margin.left - outerRadius - titleSeparate))
	.attr("y", titleOffset)
	.text("Copepod");
titleWrapper.append("line")
	.attr("class","titleLine left")
	.attr("x1", (width/2 + margin.left - outerRadius - titleSeparate)*0.6)
	.attr("x2", (width/2 + margin.left - outerRadius - titleSeparate)*1.4)
	.attr("y1", titleOffset+8)
	.attr("y2", titleOffset+8);
//Title top right
titleWrapper.append("text")
	.attr("class","title right")
	.style("font-size", mobileScreen ? "12px" : "30px" )
	.attr("x", (width/2 + margin.left + outerRadius + titleSeparate))
	.attr("y", titleOffset)
	.text("Percent Similar");
titleWrapper.append("line")
	.attr("class","titleLine right")
	.attr("x1", (width/2 + margin.left - outerRadius - titleSeparate)*0.6 + 2*(outerRadius + titleSeparate))
	.attr("x2", (width/2 + margin.left - outerRadius - titleSeparate)*1.4 + 2*(outerRadius + titleSeparate))
	.attr("y1", titleOffset+8)
	.attr("y2", titleOffset+8);
	
////////////////////////////////////////////////////////////
/////////////////// Animated gradient //////////////////////
////////////////////////////////////////////////////////////

var defs = wrapper.append("defs");
var linearGradient = defs.append("linearGradient")
	.attr("id","animatedGradient")
	.attr("x1","0%")
	.attr("y1","0%")
	.attr("x2","100%")
	.attr("y2","0")
	.attr("spreadMethod", "reflect");

linearGradient.append("animate")
	.attr("attributeName","x1")
	.attr("values","0%;100%")
  .attr("from","0%")
	.attr("to","100%")
	.attr("dur","7s")
	.attr("repeatCount","indefinite");

linearGradient.append("animate")
	.attr("attributeName","x2")
	.attr("values","100%;200%")
	.attr("from","100%")
	.attr("to","200%")
	.attr("dur","7s")
	.attr("repeatCount","indefinite");

linearGradient.append("stop")
	.attr("offset","5%")
	.attr("stop-color","#F8FF66");
linearGradient.append("stop")
	.attr("offset","45%")
	.attr("stop-color","#EB97FF");
linearGradient.append("stop")
	.attr("offset","55%")
	.attr("stop-color","#EB97FF");
linearGradient.append("continuous")
	.attr("offset","95%")
	.attr("stop-color","#F8FF66");
	
////////////////////////////////////////////////////////////
////////////////////////// Data ////////////////////////////
///////////////////////////////////////////////////////////

var Names = ["High","Medium","Low","","a62032;8:g129","a181091;6:g176","a123900;7:g103","a101529;8:g128","a52440;9:g147","a69769;9:g66","a44833;11:g29","a18604;33:g5","a62666;11:g270","a171373;7:g183","a110923;7:g272","a139729;7:g99","a100325;8:g116","a156879;7:g122","a185333;7:g026","a68619;8:g91","a190650;6:g235","a109509;7:g234","a75038;8:g287","a178293;6:g100","a59106;10:g106","a68702;9:g25","a60722;8:g150",""];

var respondents = 5730.1 //Total number of respondents (i.e. the number that make up the total group
	emptyPerc = 0.5, //What % of the circle should become empty
	emptyStroke = Math.round(respondents*emptyPerc); 
var matrix = [
	[0,0,0,0,88.9,87.6,85.7,85.7,80,80,80,80,80,70,70,70,71.4,71.4,72.7,72.7,75,75,75,75,75,77.8,77.8,0],
  [0,0,0,0,63.6,87.5,77.8,50,40,66.7,45,47.8,47,66.7,46.2,50,60,45,52.9,60,37,58.4,40,46.7,53.8,35.3,37.5,0],
  [0,0,0,0,50,26.3,42,43.8,30.8,66.6,34.9,32.3,46.1,61.5,38.1,49.4,50,43.7,38.5,50,36,58.3,33.3,34.8,36.3,35,21.9,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,emptyStroke],
  [88.9,63.6,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [87.6,87.5,26.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [85.7,77.8,42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [85.7,50,43.8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [80,40,30.8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [80,66.7,66.6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [80,45,34.9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [80,47.8,32.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [80,47,46.1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [70,66.7,61.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [70,46.2,38.1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [70,50,49.4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [71.4,60,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [71.4,45,43.7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],     
  [72.7,52.9,38.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [72.7,60,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [75,37,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [75,58.4,58.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [75,40,33.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [75,46.7,34.8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [75,53.8,36.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [77.8,35.3,35,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [77.8,37.5,21.9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 [0,0,0,emptyStroke,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

];
//Calculate how far the Chord Diagram needs to be rotated clockwise to make the dummy
//invisible chord center vertically
var offset = (2 * Math.PI) * (emptyStroke/(respondents + emptyStroke))/4;

//Custom sort function of the chords to keep them in the original order
var chord = customChordLayout() //d3.layout.chord()
	.padding(0.02)
	.sortChords(d3.descending) //which chord should be shown on top when chords cross. Now the biggest chord is at the bottom
	.matrix(matrix);

var arc = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius)	.startAngle(startAngle) //startAngle and endAngle now include the offset in degrees
	.endAngle(endAngle);

var path = stretchedChord() //Call the stretched chord function 
	.radius(innerRadius)
	.startAngle(startAngle)
	.endAngle(endAngle)
	.pullOutSize(pullOutSize);

////////////////////////////////////////////////////////////
//////////////////// Draw outer Arcs ///////////////////////
////////////////////////////////////////////////////////////

var g = wrapper.selectAll("g.group")
	.data(chord.groups)
	.enter().append("g")
	.attr("class", "group")
	.on("mouseover", fade(opacityLow))
	.on("mouseout", fade(opacityDefault));

g.append("path")
	.style("stroke", function(d,i) { return (Names[i] === "" ? "none" : "#00A1DE"); })
	.style("fill", function(d,i) { return (Names[i] === "" ? "none" : "#00A1DE"); })
	.style("pointer-events", function(d,i) { return (Names[i] === "" ? "none" : "auto"); })
	.attr("d", arc)
	.attr("transform", function(d, i) { //Pull the two slices apart
				d.pullOutSize = pullOutSize * ( d.startAngle + 0.001 > Math.PI ? -1 : 1);
				return "translate(" + d.pullOutSize + ',' + 0 + ")";
	});

////////////////////////////////////////////////////////////
////////////////////// Append Names ////////////////////////
////////////////////////////////////////////////////////////

//The text also needs to be displaced in the horizontal directions
//And also rotated with the offset in the clockwise direction
g.append("text")
	.each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2) + offset;})
	.attr("dy", ".35em")
	.attr("class", "titles")
	.style("font-size", mobileScreen ? "8px" : "10px" )
	.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
	.attr("transform", function(d,i) { 
		var c = arc.centroid(d);
		return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")"
		+ "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
		+ "translate(" + 20 + ",0)"
		+ (d.angle > Math.PI ? "rotate(180)" : "")
	})
  .text(function(d,i) { return Names[i]; })
  .call(wrapChord, 100);

////////////////////////////////////////////////////////////
//////////////////// Draw inner chords /////////////////////
////////////////////////////////////////////////////////////
var dataset = []
d3.csv("nema.csv", function  (data){
  dataset = data.map(function (d) {return [ +d["Nematode"], +d["Identity"]];});
  console.log(dataset)
	wrapper.selectAll("path.chord")
  .data(data)
	.data(chord.chords)
	.enter().append("path")
	.attr("class", "chord")
	.style("stroke", "none")
	.style("fill", "url(#animatedGradient)") //An SVG Gradient to give the impression of a flow from left to right
	.style("opacity", function(d) { return (Names[d.source.index] === "" ? 0 : opacityDefault); }) //Make the dummy strokes have a zero opacity (invisible)
	.style("pointer-events", function(d,i) { return (Names[d.source.index] === "" ? "none" : "auto"); }) //Remove pointer events from dummy strokes
	.attr("d", path)
	.on("mouseover", fadeOnChord)
	.on("mouseout", fade(opacityDefault))
  .append("title")
	.text(function (d) {
		return [Math.round(d.source.value), "% Identical ", [d.Nematode], " to ", Names[d.source.index]].join(""); 
	})});	

	
////////////////////////////////////////////////////////////
////////////////// Extra Functions /////////////////////////
////////////////////////////////////////////////////////////

//Include the offset in de start and end angle to rotate the Chord diagram clockwise
function startAngle(d) { return d.startAngle + offset; }
function endAngle(d) { return d.endAngle + offset; }

// Returns an event handler for fading a given chord group
function fade(opacity) {
  return function(d, i) {
	wrapper.selectAll("path.chord")
		.filter(function(d) { return d.source.index !== i && d.target.index !== i && Names[d.source.index] !== ""; })
		.transition()
		.style("opacity", opacity);
  };
}//fade

// Fade function when hovering over chord
function fadeOnChord(d) {
	var chosen = d;
	wrapper.selectAll("path.chord")
		.transition()
		.style("opacity", function(d) {
			return d.source.index === chosen.source.index && d.target.index === chosen.target.index ? opacityDefault : opacityLow;
		});
}//fadeOnChord

/*Taken from http://bl.ocks.org/mbostock/7555321
//Wraps SVG text*/
function wrapChord(text, width) {
  text.each(function() {
	var text = d3.select(this),
		words = text.text().split(/\s+/).reverse(),
		word,
		line = [],
		lineNumber = 0,
		lineHeight = 1.1, // ems
		y = 0,
		x = 0,
		dy = parseFloat(text.attr("dy")),
		tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");

	while (word = words.pop()) {
	  line.push(word);
	  tspan.text(line.join(" "));
	  if (tspan.node().getComputedTextLength() > width) {
		line.pop();
		tspan.text(line.join(" "));
		line = [word];
		tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
	  }
	}
  });
}//wrapChord