D3 Examples - chord_interactions

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 10px sans-serif;
}
​
svg text{
  fill:grey;
  font-size:11px;
}
svg .values text{
  pointer-events:none;
  stroke-width: 0.5px;
}
.groups:hover{
  cursor:pointer;
  font-weight:bold;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://vizjs.org/viz.v1.1.0.min.js"></script>
<script>
​
var data = [['tig00000013','Chr02',395]
,['tig00000026','Chr06',234]
,['tig00000029','Chr07',183]
,['tig00000031','Chr07',1]
,['tig00000038','Chr09',2]
,['tig00000045','Chr03',191]
,['tig00000053','Chr02',212]
,['tig00000064','Chr08',8]
,['tig00000069','Chr03',2]
,['tig00000086','Chr01',1]
,['tig00000096','Chr01',115]
,['tig00000100','Chr03',135]
,['tig00000102','Chr08',1]
,['tig00000117','Chr11',243]
,['tig00000125','Chr01',300]
,['tig00000146','Chr02',9]
,['tig00000150','Chr09',160]
,['tig00000159','Chr10',1]
,['tig00000160','Chr05',115]
,['tig00000174','Chr11',2]
,['tig00000183','Chr10',16]
,['tig00000185','Chr10',1]
,['tig00000192','Chr08',163]
,['tig00000195','Chr11',9]
,['tig00000235','Chr08',1]
,['tig00000236','Chr02',14]
,['tig00000242','Chr08',77]
,['tig00000253','Chr11',3]
,['tig00000265','Chr06',21]
,['tig00000273','Chr01',62]
,['tig00000275','Chr05',]
,['tig00000276','Chr01',1]
,['tig00000279','Chr01',8]
,['tig00000289','Chr05',43]
,['tig00000300','Chr10',2]
,['tig00000301','Chr03',35]
,['tig00000304','Chr07',101]
,['tig00000305','Chr08',19]
,['tig00000316','scaffold_29',2]
,['tig00000329','Chr04',116]
,['tig00000331','Chr08',3]
,['tig00000334','Chr08',19]
,['tig00000365','Chr08',41]
,['tig00000371','Chr04',2]
,['tig00000377','Chr05',63]
,['tig00000378','Chr04',2]
,['tig00000380','Chr06',70]
,['tig00000383','Chr11',23]
,['tig00000387','Chr05',3]
,['tig00000400','Chr04',1]
,['tig00000414','Chr10',1]
,['tig00000428','Chr09',29]
,['tig00000432','Chr11',11]
,['tig00000440','Chr08',3]
,['tig00000449','Chr05',5]
,['tig00000465','Chr08',1]
,['tig00000469','Chr10',1]
,['tig00000481','Chr04',1]
,['tig00000487','Chr07',38]
,['tig00000502','Chr05',11]
,['tig00000505','Chr01',3]
,['tig00000507','Chr04',3]
,['tig00000508','Chr11',4]
,['tig00000509','Chr08',4]
,['tig00000516','Chr11',14]
,['tig00000533','Chr05',3]
,['tig00000537','Chr09',2]
,['tig00000570','Chr07',8]
,['tig00000593','Chr07',3]
,['tig00000663','Chr06',1]
,['tig00000930','Chr05',2]
,['tig00001846','Chr09',235]
,['tig00001848','Chr01',191]
,['tig00001849','Chr08',2]
,['tig00001853','Chr10',1]
,['tig00001855','Chr10',101]
,['tig00001856','Chr04',126]
,['tig00001858','Chr10',2]
,['tig00001870','Chr11',24]
,['tig00001871','Chr08',262]
,['tig00001872','Chr03',28]
,['tig00001881','Chr04',62]
,['tig00001882','Chr01',4]
,['tig00001886','Chr08',2]
,['tig00001891','Chr06',108]
,['tig00001897','Chr10',2]
,['tig00001899','Chr11',2]
,['tig00001901','Chr11',3]
,['tig00001902','Chr04',1]
,['tig00001909','Chr09',1]
,['tig00001910','Chr02',5]
,['tig00001914','Chr02',1]
,['tig00001924','Chr03',12]
,['tig00001930','Chr07',144]
,['tig00001933','Chr11',2]
,['tig00001935','Chr11',5]
,['tig00001937','Chr11',31]
,['tig00001942','Chr05',1]
,['tig00001945','Chr05',3]
,['tig00001947','Chr08',2]
,['tig00001948','Chr06',4]
,['tig00001950','Chr07',7]
,['tig00001953','Chr03',23]
,['tig00001956','Chr09',13]
,['tig00001958','Chr06',19]
,['tig00001959','Chr10',2]
,['tig00001966','Chr10',51]
,['tig00001981','Chr07',10]
,['tig00001983','scaffold_13',3]
,['tig00001987','scaffold_13',1]
,['tig00001989','Chr06',6]
,['tig00001992','Chr03',86]
,['tig00001993','Chr03',5]
,['tig00001995','Chr04',47]
,['tig00001997','Chr04',42]
,['tig00002010','Chr11',2]
,['tig00002021','Chr01',1]
,['tig00002022','Chr04',1]
,['tig00002033','Chr10',1]
,['tig00002038','Chr09',2]
,['tig00002041','Chr02',1]
,['tig00002054','Chr11',3]
,['tig00002056','Chr09',2]
,['tig00054610','Chr08',15]
,['tig00054615','Chr09',52]
,['tig00054620','Chr09',16]
,['tig00054622','scaffold_12',16]
,['tig00054624','Chr11',]
,['tig00054631','Chr10',2]
,['tig00054632','Chr10',2]
,['tig00054670','Chr05',14]
,['tig00054675','Chr11',6]
];
​
var colors = {
"tig00000013":"#da4480"
,"tig00000026":"#da4480"
,"tig00000029":"#da4480"
,"tig00000031":"#da4480"
,"tig00000038":"#da4480"
,"tig00000045":"#da4480"
,"tig00000053":"#da4480"
,"tig00000064":"#da4480"
,"tig00000069":"#da4480"
,"tig00000086":"#da4480"
,"tig00000096":"#da4480"
,"tig00000100":"#da4480"
,"tig00000102":"#da4480"
,"tig00000117":"#da4480"
,"tig00000125":"#da4480"
,"tig00000146":"#da4480"
,"tig00000150":"#da4480"
,"tig00000159":"#da4480"
,"tig00000160":"#da4480"
,"tig00000174":"#da4480"
,"tig00000183":"#da4480"
,"tig00000185":"#da4480"
,"tig00000192":"#da4480"
,"tig00000195":"#da4480"
,"tig00000235":"#da4480"
,"tig00000236":"#da4480"
,"tig00000242":"#da4480"
,"tig00000253":"#da4480"
,"tig00000265":"#da4480"
,"tig00000273":"#da4480"
,"tig00000275":"#da4480"
,"tig00000276":"#da4480"
,"tig00000279":"#da4480"
,"tig00000289":"#da4480"
,"tig00000300":"#da4480"
,"tig00000301":"#da4480"
,"tig00000304":"#da4480"
,"tig00000305":"#da4480"
,"tig00000316":"#da4480"
,"tig00000329":"#da4480"
,"tig00000331":"#da4480"
,"tig00000334":"#da4480"
,"tig00000365":"#da4480"
,"tig00000371":"#da4480"
,"tig00000377":"#da4480"
,"tig00000378":"#da4480"
,"tig00000380":"#da4480"
,"tig00000383":"#da4480"
,"tig00000387":"#da4480"
,"tig00000400":"#da4480"
,"tig00000414":"#da4480"
,"tig00000428":"#da4480"
,"tig00000432":"#da4480"
,"tig00000440":"#da4480"
,"tig00000449":"#da4480"
,"tig00000465":"#da4480"
,"tig00000469":"#da4480"
,"tig00000481":"#da4480"
,"tig00000487":"#da4480"
,"tig00000502":"#da4480"
,"tig00000505":"#da4480"
,"tig00000507":"#da4480"
,"tig00000508":"#da4480"
,"tig00000509":"#da4480"
,"tig00000516":"#da4480"
,"tig00000533":"#da4480"
,"tig00000537":"#da4480"
,"tig00000570":"#da4480"
,"tig00000593":"#da4480"
,"tig00000663":"#da4480"
,"tig00000930":"#da4480"
,"tig00001846":"#da4480"
,"tig00001848":"#da4480"
,"tig00001849":"#da4480"
,"tig00001853":"#da4480"
,"tig00001855":"#da4480"
,"tig00001856":"#da4480"
,"tig00001858":"#da4480"
,"tig00001870":"#da4480"
,"tig00001871":"#da4480"
,"tig00001872":"#da4480"
,"tig00001881":"#da4480"
,"tig00001882":"#da4480"
,"tig00001886":"#da4480"
,"tig00001891":"#da4480"
,"tig00001897":"#da4480"
,"tig00001899":"#da4480"
,"tig00001901":"#da4480"
,"tig00001902":"#da4480"
,"tig00001909":"#da4480"
,"tig00001910":"#da4480"
,"tig00001914":"#da4480"
,"tig00001924":"#da4480"
,"tig00001930":"#da4480"
,"tig00001933":"#da4480"
,"tig00001935":"#da4480"
,"tig00001937":"#da4480"
,"tig00001942":"#da4480"
,"tig00001945":"#da4480"
,"tig00001947":"#da4480"
,"tig00001948":"#da4480"
,"tig00001950":"#da4480"
,"tig00001953":"#da4480"
,"tig00001956":"#da4480"
,"tig00001958":"#da4480"
,"tig00001959":"#da4480"
,"tig00001966":"#da4480"
,"tig00001981":"#da4480"
,"tig00001983":"#da4480"
,"tig00001987":"#da4480"
,"tig00001989":"#da4480"
,"tig00001992":"#da4480"
,"tig00001993":"#da4480"
,"tig00001995":"#da4480"
,"tig00001997":"#da4480"
,"tig00002010":"#da4480"
,"tig00002021":"#da4480"
,"tig00002022":"#da4480"
,"tig00002033":"#da4480"
,"tig00002038":"#da4480"
,"tig00002041":"#da4480"
,"tig00002054":"#da4480"
,"tig00002056":"#da4480"
,"tig00054610":"#da4480"
,"tig00054615":"#da4480"
,"tig00054620":"#da4480"
,"tig00054622":"#da4480"
,"tig00054624":"#da4480"
,"tig00054631":"#da4480"
,"tig00054632":"#da4480"
,"tig00054670":"#da4480"
,"tig00054675":"#da4480"
,"Chr01":"#4e7bda"
,"Chr02":"#4e7bda"
,"Chr03":"#4e7bda"
,"Chr04":"#4e7bda"
,"Chr05":"#4e7bda"
,"Chr06":"#4e7bda"
,"Chr07":"#4e7bda"
,"Chr08":"#4e7bda"
,"Chr09":"#4e7bda"
,"Chr10":"#4e7bda"
,"Chr11":"#4e7bda"
,"scaffold_12":"#4e7bda"
,"scaffold_13":"#4e7bda"
,"scaffold_29":"#4e7bda"
};
​
var sortOrder =[
"tig00000013"
,"tig00000026"
,"tig00000029"
,"tig00000031"
,"tig00000038"
,"tig00000045"
,"tig00000053"
,"tig00000064"
,"tig00000069"
,"tig00000086"
,"tig00000096"
,"tig00000100"
,"tig00000102"
,"tig00000117"
,"tig00000125"
,"tig00000146"
,"tig00000150"
,"tig00000159"
,"tig00000160"
,"tig00000174"
,"tig00000183"
,"tig00000185"
,"tig00000192"
,"tig00000195"
,"tig00000235"
,"tig00000236"
,"tig00000242"
,"tig00000253"
,"tig00000265"
,"tig00000273"
,"tig00000275"
,"tig00000276"
,"tig00000279"
,"tig00000289"
,"tig00000300"
,"tig00000301"
,"tig00000304"
,"tig00000305"
,"tig00000316"
,"tig00000329"
,"tig00000331"
,"tig00000334"
,"tig00000365"
,"tig00000371"
,"tig00000377"
,"tig00000378"
,"tig00000380"
,"tig00000383"
,"tig00000387"
,"tig00000400"
,"tig00000414"
,"tig00000428"
,"tig00000432"
,"tig00000440"
,"tig00000449"
,"tig00000465"
,"tig00000469"
,"tig00000481"
,"tig00000487"
,"tig00000502"
,"tig00000505"
,"tig00000507"
,"tig00000508"
,"tig00000509"
,"tig00000516"
,"tig00000533"
,"tig00000537"
,"tig00000570"
,"tig00000593"
,"tig00000663"
,"tig00000930"
,"tig00001846"
,"tig00001848"
,"tig00001849"
,"tig00001853"
,"tig00001855"
,"tig00001856"
,"tig00001858"
,"tig00001870"
,"tig00001871"
,"tig00001872"
,"tig00001881"
,"tig00001882"
,"tig00001886"
,"tig00001891"
,"tig00001897"
,"tig00001899"
,"tig00001901"
,"tig00001902"
,"tig00001909"
,"tig00001910"
,"tig00001914"
,"tig00001924"
,"tig00001930"
,"tig00001933"
,"tig00001935"
,"tig00001937"
,"tig00001942"
,"tig00001945"
,"tig00001947"
,"tig00001948"
,"tig00001950"
,"tig00001953"
,"tig00001956"
,"tig00001958"
,"tig00001959"
,"tig00001966"
,"tig00001981"
,"tig00001983"
,"tig00001987"
,"tig00001989"
,"tig00001992"
,"tig00001993"
,"tig00001995"
,"tig00001997"
,"tig00002010"
,"tig00002021"
,"tig00002022"
,"tig00002033"
,"tig00002038"
,"tig00002041"
,"tig00002054"
,"tig00002056"
,"tig00054610"
,"tig00054615"
,"tig00054620"
,"tig00054622"
,"tig00054624"
,"tig00054631"
,"tig00054632"
,"tig00054670"
,"tig00054675"
];
​
function sort(a,b){ return d3.ascending(sortOrder.indexOf(a),sortOrder.indexOf(b)); }
​
var ch = viz.ch().data(data)
      .padding(.01)
      .sort(sort)
      .innerRadius(430)
      .outerRadius(450)
      .duration(1000)
      .chordOpacity(0.3)
      .labelPadding(.03)
      .fill(function(d){ return colors[d];});
​
var width=1200, height=1100;
​
var svg = d3.select("body").append("svg").attr("height",height).attr("width",width);
​
svg.append("g").attr("transform", "translate(600,550)").call(ch);
​
// adjust height of frame in bl.ocks.org
d3.select(self.frameElement).style("height", height+"px").style("width", width+"px");     
</script>
    