Download SCATTER.zip and click *.html file(in SCATTER.zip) to open this demo in local browser!.
Users should prepare the input data in the following format (separated by tabs).
#chr start end name des
1 1102484 1102578 hsa-mir-200b breast cancer
11 122017230 122017301 hsa-let-7a-2 ovarian cancer
22 46508629 46508702 hsa-let-7a-3 leukemia cancer
14 101349316 101349412 hsa-mir-127 breast cancer
Following fields are required:
The 1 column(chr) is the name of the chromosome.
The 2 column(start) is the start position of the scatter.
The 3 column(end) is the end position of the scatter.
The 4 column(name) is the name of the scatter.
The 5 column(des) is the description of the scatter.
python NGCircos_PrepareData.py SCATTER SCATTER01.txt > SCATTER01.jsvar SCATTER01 = [ "SCATTER01" , {
SCATTERRadius: 220,
innerCircleSize: 1,
outerCircleSize: 7,
innerCircleColor: "red",
outerCircleColor: "#CC3399",
innerPointType: "circle", //circle,rect
outerPointType: "circle", //circle,rect
innerrectWidth: 2,
innerrectHeight: 2,
outerrectWidth: 10,
outerrectHeight: 10,
outerCircleOpacity: 1,
random_data: 0
} , [
{chr: "1", start: "1102484", end: "1102578", name: "hsa-mir-200b", des: "breast cancer"},
{chr: "11", start: "122017230", end: "122017301", name: "hsa-let-7a-2", des: "ovarian cancer"},
{chr: "22", start: "46508629", end: "46508702", name: "hsa-let-7a-3", des: "leukemia cancer"},
{chr: "14", start: "101349316", end: "101349412", name: "hsa-mir-127", des: "breast cancer"},
]];
<script src="js/SCATTER01.js"></script> NGCircos01 = new NGCircos(SCATTER01,NGCircosGenome,{ // Initialize with "SCATTER01" 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/SCATTER01.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(SCATTER01,NGCircosGenome,{ // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
target : "NGCircos", // Main configuration "target"
svgWidth : 900, // Main configuration "svgWidth"
svgHeight : 600, // Main configuration "svgHeight"
svgClassName: "NGCircos", // Main configuration "svgClassName"
zoom : true,
SCATTERMouseClickDisplay: true,
SCATTERMouseClickColor: "none",
SCATTERMouseClickCircleSize: "none",
SCATTERMouseClickCircleOpacity: 1,
SCATTERMouseClickCircleStrokeColor: "#F26223",
SCATTERMouseClickCircleStrokeWidth: 0,
SCATTERMouseClickTextFromData: "fourth",
SCATTERMouseClickTextOpacity: 1,
SCATTERMouseClickTextColor: "red",
SCATTERMouseClickTextSize: 8,
SCATTERMouseClickTextPostionX: 5,
SCATTERMouseClickTextPostionY: 15,
SCATTERMouseClickTextDrag: true,
SCATTERMouseOverDisplay: true,
SCATTERMouseOverColor: "none",
SCATTERMouseOverCircleSize: "none",
SCATTERMouseOverCircleOpacity: 1,
SCATTERMouseOverCircleStrokeColor: "none",
SCATTERMouseOverCircleStrokeWidth: 0,
SCATTERMouseOverTooltipsHtml01 : "chr : ",
SCATTERMouseOverTooltipsHtml02 : "<br>start : ",
SCATTERMouseOverTooltipsHtml03 : "<br>end : ",
SCATTERMouseOverTooltipsHtml04 : "<br>name : ",
SCATTERMouseOverTooltipsHtml05 : "<br>cancer type : ",
SCATTERMouseOutDisplay: true,
SCATTERMouseOutColor: "none",
SCATTERMouseOutCircleSize: "none",
SCATTERMouseOutCircleOpacity: 1,
SCATTERMouseOutCircleStrokeColor: "none",
SCATTERMouseOutCircleStrokeWidth: 0,
});
NGCircos01.draw_genome(NGCircos01.genomeLength); // NGCircos.js callback
NGCircos01.draw_genome(NGCircos01.genomeLength2);
</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>