Download CNV.zip and click *.html file(in CNV.zip) to open this demo in local browser!.
Users should prepare the input data in the following format (separated by tabs).
#chr start end value
1 764788 87109267 2.5
1 87109268 120217058 2
1 144101324 222713034 4
1 222713035 222867750 6
......
9 30330084 140139368 3.5
X 105073 114046817 1
X 114112404 114299959 2
X 114376344 154884814 1
Following fields are required:
The 1 column(chr) is the name of the chromosome.
The 2 column(start) is the start of the CNV region.
The 3 column(end) is the end of the CNV region.
The 4 column(value) is the copy number of CNV region.
python NGCircos_PrepareData.py CNV CNV01.txt > CNV01.jsvar CNV01 = [ "CNV01" , {
maxRadius: 175,
minRadius: 116,
CNVwidth: 2,
CNVColor: "#4876FF",
} , [
{chr: "1", start: "764788", end: "87109267", value: "2.5"},
{chr: "1", start: "87109268", end: "120217058", value: "2"},
{chr: "1", start: "144101324", end: "222713034", value: "4"},
{chr: "1", start: "222713035", end: "222867750", value: "6"},
......
{chr: "9", start: "30330084", end: "140139368", value: "3.5"},
{chr: "X", start: "105073", end: "114046817", value: "1"},
{chr: "X", start: "114112404", end: "114299959", value: "2"},
{chr: "X", start: "114376344", end: "154884814", value: "1"},
]];
<script src="js/CNV01.js"></script> NGCircos01 = new NGCircos(CNV01,NGCircosGenome,{ // Initialize with "CNV01" data tag<button class="svg-action-btn download-img" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black">Download png ↓</button>
<a href="javascript:(function () { var e = document.createElement('script');if (window.location.protocol === 'https:') { e.setAttribute('src', './lib/svg-crowbar.js'); } else { e.setAttribute('src', './lib/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black" >Download svg ↓</a>
<div id="NGCircos"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="NGCircos"></div>
</div>
</div>
<!-- Data configuration -->
<script src="./lib/jquery.js"></script>
<script src="./lib/d3.js"></script>
<script src="./lib/NGCircos.js"></script>
<script src="js/CNV01.js"></script>
<!-- Genome configuration -->
<script>
var NGCircosGenome = [ // Configure your own genome here.
[
["1" , 249250621],
["2" , 243199373],
["3" , 198022430],
["4" , 191154276],
["5" , 180915260],
["6" , 171115067],
["7" , 159138663],
["8" , 146364022],
["9" , 141213431],
["10" , 135534747],
["11" , 135006516],
["12" , 133851895],
["13" , 115169878],
["14" , 107349540],
["15" , 102531392],
["16" , 90354753],
["17" , 81195210],
["18" , 78077248],
["19" , 59128983],
["20" , 63025520],
["21" , 48129895],
["22" , 51304566],
["X" , 155270560],
["Y" , 59373566]
]
];
NGCircos01 = new NGCircos(BACKGROUND01,CNV01,NGCircosGenome,{ // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
zoom : true,
target : "NGCircos", // Main configuration "target"
svgWidth : 900, // Main configuration "svgWidth"
svgHeight : 600, // Main configuration "svgHeight"
svgClassName: "NGCircos", // Main configuration "svgClassName"
CNVMouseEvent: true,
CNVMouseClickDisplay: true,
CNVMouseClickColor: "red",
CNVMouseClickArcOpacity: 1,
CNVMouseClickArcStrokeColor: "#F26223",
CNVMouseClickArcStrokeWidth: 0,
CNVMouseClickTextFromData: "fourth",
CNVMouseClickTextOpacity: 1,
CNVMouseClickTextColor: "red",
CNVMouseClickTextSize: 8,
CNVMouseClickTextPostionX: 0,
CNVMouseClickTextPostionY: 0,
CNVMouseClickTextDrag: true,
CNVMouseDownDisplay: true,
CNVMouseDownColor: "green",
CNVMouseDownArcOpacity: 1,
CNVMouseDownArcStrokeColor: "#F26223",
CNVMouseDownArcStrokeWidth: 0,
CNVMouseEnterDisplay: true,
CNVMouseEnterColor: "yellow",
CNVMouseEnterArcOpacity: 1,
CNVMouseEnterArcStrokeColor: "#F26223",
CNVMouseEnterArcStrokeWidth: 0,
CNVMouseLeaveDisplay: true,
CNVMouseLeaveColor: "pink",
CNVMouseLeaveArcOpacity: 1,
CNVMouseLeaveArcStrokeColor: "#F26223",
CNVMouseLeaveArcStrokeWidth: 0,
CNVMouseMoveDisplay: true,
CNVMouseMoveColor: "red",
CNVMouseMoveArcOpacity: 1,
CNVMouseMoveArcStrokeColor: "#F26223",
CNVMouseMoveArcStrokeWidth: 0,
CNVMouseOutDisplay: true,
CNVMouseOutAnimationTime: 500,
CNVMouseOutColor: "red",
CNVMouseOutArcOpacity: 1,
CNVMouseOutArcStrokeColor: "red",
CNVMouseOutArcStrokeWidth: 0,
CNVMouseUpDisplay: true,
CNVMouseUpColor: "grey",
CNVMouseUpArcOpacity: 1,
CNVMouseUpArcStrokeColor: "#F26223",
CNVMouseUpArcStrokeWidth: 0,
CNVMouseOverDisplay: true,
CNVMouseOverColor: "red",
CNVMouseOverArcOpacity: 1,
CNVMouseOverArcStrokeColor: "#F26223",
CNVMouseOverArcStrokeWidth: 3,
});
NGCircos01.draw_genome(NGCircos01.genomeLength); // NGCircos.js callback
NGCircos01.draw_genome(NGCircos01.genomeLength2); // NGCircos2.js callback second time
</script>
<script src=./lib/saveSvgAsPng.js></script>
<script>
(function(){
var downloadImg = getEle(".download-img"),
imgName = getEle("."+NGCircos01.svgClassName);
// imgScale = getEle(".img-scale");
downloadImg.addEventListener("click",function(){
var mySvg = getEle("."+NGCircos01.svgClassName),
//iImgScale = parseInt(imgScale.value) || 1,
oImgName = imgName.value || NGCircos01.svgClassName;
// saveSvgAsPng(mySvg, oImgName+".png", iImgScale);
saveSvgAsPng(mySvg, oImgName+".png");
})
function getEle(obj){
var d = document;
return d.querySelector(obj);
}
})()
</script>