D3 Examples - chord gradient test2

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  
 <head> 
<meta charset="utf-8">
<title>Species Chord Diagram</title>
<style>
​
@import url(style.css);
​
#circle circle {
  fill: none;
  pointer-events: all;
}
​
.group path {
  fill-opacity: 1;
  stroke: #000;
  stroke-width: .25px;
}
​
path.chord {
  stroke: #000;
  stroke-width: .25px;
  fill-opacity: 0.74304;
  stroke-opacity: .8;
}
​
#circle:hover path.fade {
  display: none;
}
​
</style>
 </head>
<!-- <p>Built with <a href="https://d3js.org/">d3.js</a>. -->
<body>
<div>
<button id='saveButton' onclick="svgToPng()">Export my D3 visualization to PNG</button>
</div>
​
</body>
 <script src="https://d3js.org/d3.v2.min.js?2.8.1"></script> 
  <script src="d3.layout.chord.sort.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js"></script>
      <script src="https://cdn.jsdelivr.net/gh/exupero/savesvgaspng/gh-pages/savesvgaspng.js"></script>
​
<!--    <script src="imagesave.js"></script> -->
<script type="text/javascript">
​
​
​
var width = 1200,
    height = $(window).height()-20,
    outerRadius = Math.min(width, height) / 2 - 80,
    innerRadius = outerRadius - 28;
​
var formatPercent = d3.format(".3f");
​
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);
​
var layout =customChordLayout()// d3.layout.chord()
    .padding(.045)
    .sortSubgroups(d3.descending)//sort the chords inside an arc from high to low
    .sortChords(d3.ascending);//which chord should be shown on top when chords cross. Now the biggest chord is at the top
​
var path = d3.svg.chord()
    .radius(innerRadius-5);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
svg.append("circle")
    .attr("r", outerRadius);
  
  
  
  
var cities = ["X","Y","Z","Dummy","C","B","A","Dummy"];
​
// var matrix = [
//  [0,1,0,0,1,1,1,0], //X
//  [1,0,0,0,1,1,1,0], //Y
//  [0,0,0,0,1,1,1,0], //Z
//  [0,0,1,0,1,0,0,1], //Dummy stroke
//  [1,1,1,0,0,0,0,0], //C
//  [1,1,1,0,0,0,0,0], //B
//  [1,1,1,0,0,0,0,0], //A
//  [0,0,0,1,0,0,0,0] //Dummy stroke
// ];
​
var matrix = [
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0.25,0,0,2,0,0.5,0,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,0,0,0,0,0,0,0,0,0,0,1.666667,0.25,0,0,0,0,0,0,2,0,0,1,2.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,0,0,0,0,0,1.5,0,1.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],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0,1.4,0,0,2,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.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,0,0,0,0,0,0,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.875,1,0,2,0,1.333,0,0.2273,1.6364,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,0,0,0,0,0,0,0.5,1.5,0,0,0.5,0,0,0.5,1,0,2,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,0,0,0,0,0,0.75,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0.25,0,0,0,0,0,1,1,0,0,0,0.6666667,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,0,0,2,0,0,0,2,0,0,0,0,0,0,0.9130435,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,0,0,0,0.12,0.6666667,0,1,0.4444444,0,0,0.1363636,1,0,0.5714286,0.3333333,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0.25,1.666667,1.5,0,1.4,0,2,0.875,0.5,0,0,2,0.12,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],
[1,2,0,0.25,0,0,0,0,0,1,1.5,0.75,0.25,0,0.6666667,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0.1428571,0,0,0,0,0,0,2,1.5,1,0,1],
[0,0,0,0,1.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,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,2,0,0,0,2,0,0,2,0,0,0,0,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,0,0,0],
[0,0,0,0,0,2,2,0,0,0,0.5,0,0,2,0.4444444,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],
[0,0,0.5,0,0,0,0,0.5,0,1.333,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,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,3,0,0,0,0,0,0,0.2273,0.5,0,1,0,0.1363636,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],
[0,0,0,2,0,0,0,0,0,1.6364,1,2,1,0,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,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,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,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,2,0,0,0,0.5714286,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],
[0,0,0,1,0,0,0,0,0,0,0,0,0,0.9130435,0.3333333,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],
[0,0,0,2.5,0,0,0,0,0,0,0,0,0.6666667,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.5,0,0,0,0,0,0,0,0,0.6666667,0,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,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,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,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,0,0.1428571,0,0,0,0,0,0,0,0,0,0,2.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,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,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,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,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,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,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,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,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,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,0,0,0,0,0,0,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.5,0,0,0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0.6666667,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,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,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  
]
​
​
​
var matrix2=[
  
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-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,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.25,0,0,-2,0,0.5,0,-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,0,0,0,0,0,0,0,0,0,0,-1.666667,-0.25,0,0,0,0,0,0,-2,0,0,-1,-2.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,0,0,0,0,0,-1.5,0,-1.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],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-2,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,0,0,0,0,0,0,0,0,0,0,-1.4,0,0,-2,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.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,0,0,0,0,0,0,0,0,0,0,0,0,-2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.875,-1,0,-2,0,-1.333333,0,-0.2272727,-1.636364,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,0,0,0,0,0,0,-0.5,1.5,0,0,-0.5,0,0,-0.5,-1,0,-2,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,0,0,0,0,0,-0.75,0,0,0,0,0,0,2,-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,0,0,0,0,0,0,0,0,0,0.25,0,0,0,0,0,1,-1,0,0,0,-0.6666667,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,0,0,-2,0,0,0,2,0,0,0,0,0,0,0.9130435,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,0,0,0,0.12,0.6666667,0,-1,0.4444444,0,0,0.1363636,1,0,-0.5714286,0.3333333,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,-0.25,-1.666667,-1.5,0,-1.4,0,-2,-0.875,-0.5,0,0,-2,0.12,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],
[-1,2,0,-0.25,0,0,0,0,0,-1,1.5,-0.75,0.25,0,0.6666667,0,0,0,0,0,0,0,0,0,0,0,0,0,-1,2,0,-0.1428571,0,0,0,0,0,0,2,-1.5,-1,0,1],
[0,0,0,0,-1.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,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,-2,0,0,0,-2,0,0,-2,0,0,0,0,-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,0,0,0],
[0,0,0,0,0,-2,2,0,0,0,-0.5,0,0,2,0.4444444,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],
[0,0,0.5,0,0,0,0,-0.5,0,-1.333333,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,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,-3,0,0,0,0,0,0,-0.2272727,-0.5,0,1,0,0.1363636,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],
[0,0,0,-2,0,0,0,0,0,-1.636364,-1,2,-1,0,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,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,-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,0,0,-1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,-2,0,0,0,-0.5714286,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],
[0,0,0,-1,0,0,0,0,0,0,0,0,0,0.9130435,0.3333333,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],
[0,0,0,-2.5,0,0,0,0,0,0,0,0,-0.6666667,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-2.5,0,0,0,0,0,0,0,0,-0.6666667,0,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-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,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,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,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,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,0,-0.1428571,0,0,0,0,0,0,0,0,0,0,-2.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,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,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,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,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,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,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,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,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,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,0,0,0,0,0,0,0,0,0,0,0,0,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-1.5,0,0,0,0,0,0,0,-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,0,0,0,0,0,0,0,0,0,-1,0,0,0,0,0,0,0,0,0,0,-0.6666667,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,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,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  
]
​
//for trohical data matrices
var matrix3 =[
  [0,0,0,0,0,0,-2,-0.4,-1,-0.3333333,2,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,-0.8,0,-0.88888889,-2,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,-1.14285714,-1.1,-2,-1.6666667,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,-1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,-3,0.66666667,1.3333333,-0.25,-1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0.4,0.07142857,-0.173913,0.04761905,0.6590909,0,0,0,0,0,0],
[-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[-0.4,0,0,0,-3,0.4,0,0,0,0,0,0,0,0,0,0,0,0],
[-1,-0.8,-1.14285714,0,0.66666667,0.07142857,0,0,0,0,0,0,2,0.2352941,0,0,-1,-1],
[-0.3333333,0,-1.1,0,1.3333333,-0.173913,0,0,0,0,0,0,0,-3,0,0,0,0],
[2,-0.88888889,-2,-1,-0.25,0.04761905,0,0,0,0,0,0,0,-2,0,0,0,0.5],
[0,-2,-1.6666667,0,-1,0.6590909,0,0,0,0,0,0,0,0,0,0,-0.6666667,0],
[0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0.2352941,-3,-2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,-1,0,0,-0.6666667,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,-1,0,0.5,0,0,0,0,0,0,0]
]
​
var matrix4 = [
  [0,0,0,0,0,0,2,0.4,1,0.3333333,2,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0.8,0,0.88888889,2,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1.14285714,1.1,2,1.6666667,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,3,0.66666667,1.3333333,0.25,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0.4,0.07142857,0.173913,0.04761905,0.6590909,0,0,0,0,0,0],
[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0.4,0,0,0,3,0.4,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0.8,1.14285714,0,0.66666667,0.07142857,0,0,0,0,0,0,2,0.2352941,0,0,1,1],
[0.3333333,0,1.1,0,1.3333333,0.173913,0,0,0,0,0,0,0,3,0,0,0,0],
[2,0.88888889,2,1,0.25,0.04761905,0,0,0,0,0,0,0,2,0,0,0,0.5],
[0,2,1.6666667,0,1,0.6590909,0,0,0,0,0,0,0,0,0,0,0.6666667,0],
[0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0.2352941,3,2,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0,0.6666667,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0.5,0,0,0,0,0,0,0]
]
​
//for trohical data matrices
var matrix5 =[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,5,5,5,5,5,4],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,5,3,3,4,3,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,5,3,3,4,3,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,5,5,5,5,5,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,5,4,4,5,4,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,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,5,3,3,4,3,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,5,5,5,5,5,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,5,4,4,5,4,4],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,5,1,5,5,5,4],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,5,2,3,4,3,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,5,3,3,4,3,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,5,4,4,5,4,4],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,5,3,3,4,3,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[5,4,4,5,5,0,4,5,5,5,4,4,5,4,0,0,0,0,0,0,0,0,0],
[4,2,2,5,4,0,2,5,4,4,2,2,4,2,0,0,0,0,0,0,0,0,0],
[5,5,5,5,5,0,5,5,5,5,5,5,5,5,0,0,0,0,0,0,0,0,0],
[5,3,3,5,4,0,3,5,4,1,2,3,4,3,0,0,0,0,0,0,0,0,0],
[5,3,3,5,4,0,3,5,4,5,3,3,4,3,0,0,0,0,0,0,0,0,0],
[5,4,4,5,5,0,4,5,5,5,4,4,5,4,0,0,0,0,0,0,0,0,0],
[5,3,3,5,4,0,3,5,4,5,3,3,4,3,0,0,0,0,0,0,0,0,0],
[4,2,2,5,4,0,2,5,4,4,2,2,4,2,0,0,0,0,0,0,0,0,0],
]
​
d3.csv("species-trophical.csv", function(cities) {
  d3.json("matrix3.json", function(matrix2) {
​
    // Compute the chord layout.
    layout.matrix(matrix4);
    
    
    ////////////////////////////////////////////////////////////
/////////////// Create the gradient fills //////////////////
////////////////////////////////////////////////////////////
​
//Function to create the id for each chord gradient
function getGradID(d){ return "linkGrad-" + d.source.index + "-" + d.target.index; }
​
//Create the gradients definitions for each chord
var grads = svg.append("defs").selectAll("linearGradient")
    .data(layout.chords())
   .enter().append("linearGradient")
    .attr("id", getGradID)
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", function(d,i) { return innerRadius * Math.cos((d.source.endAngle-d.source.startAngle)/2 + d.source.startAngle - Math.PI/2); })
    .attr("y1", function(d,i) { return innerRadius * Math.sin((d.source.endAngle-d.source.startAngle)/2 + d.source.startAngle - Math.PI/2); })
    .attr("x2", function(d,i) { return innerRadius * Math.cos((d.target.endAngle-d.target.startAngle)/2 + d.target.startAngle - Math.PI/2); })
    .attr("y2", function(d,i) { return innerRadius * Math.sin((d.target.endAngle-d.target.startAngle)/2 + d.target.startAngle - Math.PI/2); })
​
//Set the starting color (at 0%)
grads.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", function(d){ 
 // return "green";
  if(matrix2[d.source.index][d.target.index] < 0) return 'red';
          else return 'green';
    //return colors(d.source.index); 
  });
​
//Set the ending color (at 100%)
grads.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", function(d){ 
      //return "red";
  if(matrix2[d.target.index][d.source.index] < 0) return 'red';
          else return 'green';
    //return colors(d.target.index); 
   });
////////////////////////////////////////////////////////////
    
    // Add a group per neighborhood.
    var group = svg.selectAll(".group")
        .data(layout.groups)
      .enter().append("g")
        .attr("class", "group")
        .on("mouseover", mouseover);
​
    // Add a mouseover title.
    group.append("title").text(function(d, i) {
       return cities[i].name + ", Total Value:" + formatPercent(d.value) 
    });
​
    // Add the group arc.
    var groupPath = group.append("path")
        .attr("id", function(d, i) { return "group" + i; })
        .attr("d", arc)
        .style("fill", function(d, i) { return cities[i].color; });
​
    // Add a text label.
    var groupText = group.append("text")
        //.attr("x", function(d, i){console.log( groupPath[0][i].getTotalLength()/2);})   //6
        .attr("dy", 15)
         
​
//     groupText.append("textPath")
//         .attr("xlink:href", function(d, i) { return "#group" + i; })
//         .text(function(d, i) { return cities[i].name; });
​
    // Remove the labels that don't fit. :(
//     groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 30 < this.getComputedTextLength(); })
//         .remove();
    
    
    
      group.append("svg:text")
      .each(function(d,i) { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
            + "translate(" + (innerRadius + 30) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .text(function(d,i) { return cities[i].name; })
      .style("fill", function(d, i) { return cities[i].color; })
    .attr("shape-rendering","crispEdges")
    .attr("font-family","cursive")
    .attr("font-size","15px");
    
    
    
    
    
    
​
    // Add the chords.
    var chord = svg.selectAll(".chord")
        .data(layout.chords)
      .enter().append("path")
        .attr("class", "chord")
        .style("fill", function(d,i) { 
          //console.log(d);
          //console.log(matrix2[d.source.index][d.target.index]);
         // if(matrix2[d.source.index][d.target.index] < 0) return 'red';
         // else return 'green';
          return "url(#" + getGradID(d) + ")";
          //return cities[d.source.index].color; 
        })
        .attr("d", path);
​
    //Add an elaborate mouseover title for each chord.
    chord.append("title").text(function(d) {
      return cities[d.source.index].name
          + " → " + cities[d.target.index].name
          + ": " + formatPercent(d.source.value)
          + "\n" + cities[d.target.index].name
          + " → " + cities[d.source.index].name
          + ": " + formatPercent(d.target.value);
    });
​
    function mouseover(d, i) {
      chord.classed("fade", function(p) {
        return p.source.index != i
            && p.target.index != i;
      });
    }
    
​
 //Append Legend
var teams = [
  "Invasive Marines" ,
  "Native Marines",
  "Terrestrial Marines",
  "Positive Chords",
  "Negative Chords",
];
​
var colors = [ "#DF7C00", "#BFAE40", "#083E77","green","red"];
​
var color = d3.scale.ordinal()      //custom color scale for teams
                .range(colors)
                .domain(teams);
svg.append("rect")   
.attr("x",-width/2)
.attr("y",-height/2)
.attr("width",150)
.attr("height",120)
.attr("style","fill-opacity:0;stroke:black;stroke-width:1.5px");
​
var legend = svg.append("g")
    .attr("class", "legend")
    .attr("width", 150)
    .attr("height", 150)
    .attr("transform", "translate(-"+ ((width/2)-5) + ",-"+ ((height/2)-10) +" )");
​
var gs = legend.selectAll("g.keybox")
          .data(teams).enter().append("g")
          .attr("class", "keybox")
          .attr("width", 80)
          .attr("height", 15);
​
gs.append("text")
  .attr("class","keybox").attr("x",function(d,i){
    if(i<5){return 15;}
    else{return 90;}})
  .attr("y",function(d,i){
    if(i<5){return i*20 +9;}
    else{return (i-4)*20 +9;}})
  .text(function(d,i){
    return teams[i];})
.attr("shape-rendering","crispEdges")
    //.attr("font-family","cursive")
    .attr("font-size","16px");
  ;
​
gs.append("rect")        
  .attr("x",function(d,i){
    if(i<5){return 0;}
    else{return 75;}})
  .attr("y",function(d,i){
     if(i<5){return i*20;}
     else{return (i-4) * 20;}})
  .attr("width",10)
  .attr("height",10)
  .style("fill",function(d, i){
    return colors[i];});
​
​
​
​
  });
});
​
  function svgToPng() {
            saveSvgAsPng(d3.select('svg').node(), 'chart.png');
        }
​
</script>
​
​
</html>
    