D3 Examples - chord 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: .45;
  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(0.0552960000000001)
    .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
// ];
​
//for acidification 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]
]
​
​
//for warming data matrices
var matrix1 =[
[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,2,1,4,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,1,2,2,2,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,4,4,5,4,4,4,4,4],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,2,4,2,3,3,3,3],
[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,2,1,4,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,3,5,2,4,4,4,4],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,1,2,2,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],
[5,2,2,5,4,3,5,2,2,2,4,2,2,2,0,0,0,0,0,0,0,0,0],
[5,1,1,5,4,2,5,1,1,1,3,1,1,1,0,0,0,0,0,0,0,0,0],
[5,4,4,5,5,4,5,4,4,4,5,4,4,4,0,0,0,0,0,0,0,0,0],
[5,1,1,5,4,2,5,1,1,1,2,1,1,1,0,0,0,0,0,0,0,0,0],
[5,2,2,5,4,3,5,2,2,2,4,2,2,2,0,0,0,0,0,0,0,0,0],
[5,2,2,5,4,3,5,2,2,2,4,2,2,2,0,0,0,0,0,0,0,0,0],
[5,2,2,5,4,3,5,2,2,2,4,2,2,2,0,0,0,0,0,0,0,0,0],
[5,2,2,5,4,3,5,2,2,2,4,2,2,2,0,0,0,0,0,0,0,0,0]  
  ]
​
//for sealevel data matrices
var matrix2 =[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,4,5,5,5,4,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,2,4,5,4,1,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,2,4,5,4,1,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,4,5,5,5,4,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,3,4,5,4,2,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,2,4,5,4,1,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,4,5,5,5,4,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,2,4,5,4,1,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,4,5,5,5,4,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,2,4,5,4,1,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,4,5,5,5,3,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,3,4,5,4,2,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,3,4,5,4,2,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,2,4,5,4,1,5],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,4,5,5,5,4,5],
[5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,0,0,0,0,0,0,0,0],
[5,3,3,5,4,3,5,3,5,3,4,4,4,3,5,0,0,0,0,0,0,0,0],
[4,2,2,4,3,2,4,2,4,2,4,3,3,2,4,0,0,0,0,0,0,0,0],
[5,4,4,5,4,4,5,4,5,4,5,4,4,4,5,0,0,0,0,0,0,0,0],
[5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,0,0,0,0,0,0,0,0],
[5,4,4,5,4,4,5,4,5,4,5,4,4,4,5,0,0,0,0,0,0,0,0],
[4,1,1,4,2,1,4,1,4,1,3,2,2,1,4,0,0,0,0,0,0,0,0],
[5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,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,50,50,40,50,50,50,40,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,30,20,40,50,40,10,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,30,20,40,50,40,10,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,50,40,50,50,50,40,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,40,30,40,50,40,20,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,30,20,40,50,40,10,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,50,40,50,50,50,40,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,30,20,40,50,40,10,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,50,40,50,50,50,40,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,30,20,40,50,40,10,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,40,40,50,50,50,30,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,40,30,40,50,40,20,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,40,30,40,50,40,20,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,30,20,40,50,40,10,50],
// [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,50,40,50,50,50,40,50],
// [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,0,0,0,0,0,0,0,0],
// [50,30,30,50,40,30,50,30,50,30,40,40,40,30,50,0,0,0,0,0,0,0,0],
// [40,20,20,40,30,20,40,20,40,20,40,30,30,20,40,0,0,0,0,0,0,0,0],
// [50,40,40,50,40,40,50,40,50,40,50,40,40,40,50,0,0,0,0,0,0,0,0],
// [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,0,0,0,0,0,0,0,0],
// [50,40,40,50,40,40,50,40,50,40,50,40,40,40,50,0,0,0,0,0,0,0,0],
// [40,10,10,40,20,10,40,10,40,10,30,20,20,10,40,0,0,0,0,0,0,0,0],
// [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,0,0,0,0,0,0,0,0]
  
// ]
​
d3.csv("species-oceanic.csv", function(cities) {
 // d3.json("matrix5.json", function(matrix2) {
​
    // Compute the chord layout.
    layout.matrix(matrix2);
​
    // 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", "0.378em")
      .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 + 31) + ")"
            + (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] ==1 ) return 'cyan';
          else if(matrix2[d.source.index][d.target.index] ==2 ) return 'yellow';
          else if(matrix2[d.source.index][d.target.index] ==3 ) return 'purple';
          else if(matrix2[d.source.index][d.target.index] ==4 ) return 'green';
          else return 'red';
//           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 = [
  "Global Solutions " ,
  "Local Solutions",
  "Ecosystem Components ",
  "5",
  "4",
  "3",
"2",
"1"];
​
var colors = [ "#DF7C00", "#BFAE40", "#083E77","red","green", "purple","yellow","cyan"];
​
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",180)
.attr("height",180)
.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<9){return 15;}
    else{return 90;}})
  .attr("y",function(d,i){
    if(i<9){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<9){return 0;}
    else{return 75;}})
  .attr("y",function(d,i){
     if(i<9){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(), 'chord2.png', {scale: 9.0});
        }
​
</script>
​
​
</html>
    