D3 Examples - genomes_comparison

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]
];
​
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"
,"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 =[
"Chr01"
,"Chr02"
,"Chr03"
,"Chr04"
,"Chr05"
,"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"
];
​
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>
​
    