Download WIG.zip and click *.html file(in WIG.zip) to open this demo in local browser!.
Users should prepare the input data in the following format (separated by tabs).
#chr posStart posEnd value
1 813468 813470 6
1 3383745 3383747 3
1 6157646 6157648 3
1 24793116 24793118 9
......
X 136860114 136860116 3
X 138413104 138413106 9
X 149344414 149344416 9
X 154203563 154203565 5
Following fields are required:
The 1 column(chr) is the name of the chromosome.
The 2 column(posStart) is the start position of the sequence.
The 3 column(posEnd) is the end position of the sequence.
The 4 column(value) is the value of the point.
python NGCircos_PrepareData.py WIG WIG01.txt > WIG01.jsvar WIG01 = [ "WIG01" , {
maxRadius: 220,
minRadius: 170,
WIGStrokeColor: "#EEAD0E",
WIGColor: "red",
WIGWIGStrokeType: "cardinal",
} , [
{chr: "1", pos: "813468", value: "6"},
{chr: "1", pos: "813469", value: "6"},
{chr: "1", pos: "813470", value: "6"},
{chr: "1", pos: "3383745", value: "3"},
......
{chr: "X", pos: "136860114", value: "3"},
{chr: "X", pos: "136860115", value: "3"},
{chr: "X", pos: "136860116", value: "3"},
{chr: "X", pos: "138413104", value: "9"},
]];
<script src="js/WIG01.js"></script> NGCircos01 = new NGCircos(WIG01,NGCircosGenome,{ // Initialize with "WIG01" 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/WIG01.js"></script>
<!-- Genome configuration -->
<script>
var BACKGROUND01 = [ "BACKGROUND01" , {
BginnerRadius: 220,
BgouterRadius: 170,
BgFillColor: "#F2F2F2",
BgborderColor : "#000",
BgborderSize : 0.3
}];
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,WIG01,NGCircosGenome,{ // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
target : "NGCircos", // Main configuration "target"
svgWidth : 900, // Main configuration "svgWidth"
svgHeight : 600, // Main configuration "svgHeight"
WIGMouseEvent : true,
WIGMouseClickDisplay : false,
WIGMouseClickLineOpacity : 1, //"none"
WIGMouseClickLineStrokeColor : "red", //"none"
WIGMouseClickLineStrokeWidth : "none", //"none"
WIGMouseClickFillColor : "none", //"none"
WIGMouseDownDisplay : false,
WIGMouseDownLineOpacity : 1, //"none"
WIGMouseDownLineStrokeColor : "red", //"none"
WIGMouseDownLineStrokeWidth : "none", //"none"
WIGMouseDownFillColor : "none", //"none"
WIGMouseEnterDisplay : false,
WIGMouseEnterLineOpacity : 1, //"none"
WIGMouseEnterLineStrokeColor : "red", //"none"
WIGMouseEnterLineStrokeWidth : "none", //"none"
WIGMouseEnterFillColor : "none", //"none"
WIGMouseLeaveDisplay : false,
WIGMouseLeaveLineOpacity : 1, //"none"
WIGMouseLeaveLineStrokeColor : "red", //"none"
WIGMouseLeaveLineStrokeWidth : "none", //"none"
WIGMouseLeaveFillColor : "none", //"none"
WIGMouseMoveDisplay : false,
WIGMouseMoveLineOpacity : 1, //"none"
WIGMouseMoveLineStrokeColor : "red", //"none"
WIGMouseMoveLineStrokeWidth : "none", //"none"
WIGMouseMoveFillColor : "none", //"none"
WIGMouseOutDisplay : true,
WIGMouseOutAnimationTime : 500,
WIGMouseOutLineOpacity : 1.0, //"none"
WIGMouseOutLineStrokeColor : "red", //"none"
WIGMouseOutLineStrokeWidth : "none", //"none"
WIGMouseOutFillColor : "none", //"none"
WIGMouseUpDisplay : false,
WIGMouseUpLineOpacity : 1, //"none"
WIGMouseUpLineStrokeColor : "red", //"none"
WIGMouseUpLineStrokeWidth : "none", //"none"
WIGMouseUpFillColor : "none", //"none"
WIGMouseOverDisplay : false,
WIGMouseOverLineOpacity : 1, //"none"
WIGMouseOverLineStrokeColor : "red", //"none"
WIGMouseOverLineStrokeWidth : "none", //"none"
WIGMouseOverFillColor : "none", //"none"
WIGMouseOverTooltipsHtml01 : "Line",
WIGMouseOverTooltipsPosition : "absolute",
WIGMouseOverTooltipsBackgroundColor : "white",
WIGMouseOverTooltipsBorderStyle : "solid",
WIGMouseOverTooltipsBorderWidth : 0,
WIGMouseOverTooltipsPadding : "3px",
WIGMouseOverTooltipsBorderRadius : "3px",
WIGMouseOverTooltipsOpacity : 0.8,
});
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>