Download BUBBLE.zip and click *.html file(in BUBBLE.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 value color layer
chr6 1 100 TP53 0.1 red 3
chr6 100 200 TP53 0.4 blue 3
chr6 200 300 TP53 0.8 green 3
chr6 300 400 TP53 0.9 red 3
......
chr6 600 700 TP53 0.8 red 1
chr6 700 800 TP53 0.2 blue 1
chr6 800 900 TP53 0.6 green 1
chr6 900 1000 TP53 0.5 green 1
Following fields are required:
The 1 column(chr) is the name of the chromosome.
The 2 column(start) is the start of the region.
The 3 column(end) is the end of the region.
The 4 column(name) is the name of the bubble.
The 5 column(value) is the value of the bubble.
The 6 column(color) is the specific color of the bubble.
The 7 column(layer) is the layer of the bubble.
python NGCircos_PrepareData.py BUBBLE BUBBLE01.txt > BUBBLE01.jsvar BUBBLE01 = [ "BUBBLE01" , {
minRadius: 20,
maxRadius: 80,
blockStroke:true,
blockStrokeColor:"grey",
blockFill:false,
blockFillColor:"white",
bubbleMaxSize:10,
bubbleMinSize:2,
maxColor: "red",
minColor: "yellow",
totalLayer:3,
} , [
{chr: "chr6", start: "1", end: "100", name: "TP53", value: "0.1", color: "red", layer: "3"},
{chr: "chr6", start: "100", end: "200", name: "TP53", value: "0.4", color: "blue", layer: "3"},
{chr: "chr6", start: "200", end: "300", name: "TP53", value: "0.8", color: "green", layer: "3"},
{chr: "chr6", start: "300", end: "400", name: "TP53", value: "0.9", color: "red", layer: "3"},
......
{chr: "chr6", start: "600", end: "700", name: "TP53", value: "0.8", color: "red", layer: "1"},
{chr: "chr6", start: "700", end: "800", name: "TP53", value: "0.2", color: "blue", layer: "1"},
{chr: "chr6", start: "800", end: "900", name: "TP53", value: "0.6", color: "green", layer: "1"},
{chr: "chr6", start: "900", end: "1000", name: "TP53", value: "0.5", color: "green", layer: "1"},
]];
<script src="js/BUBBLE01.js"></script> NGCircos01 = new NGCircos(BUBBLE01,NGCircosGenome,{ // Initialize with "BUBBLE01" 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/BUBBLE01.js"></script>
<!-- Genome configuration -->
<script>
var NGCircosGenome = [ // Configure your own genome here.
[
["chr6" , 1000],
]
];
NGCircos01 = new NGCircos(BUBBLE01,NGCircosGenome,{ // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
target : "NGCircos",
svgWidth : 900,
svgHeight : 600,
innerRadius: 246,
outerRadius: 250,
zoom : false,
genomeFillColor: ["#999999"],
ticks : {
display : true,
len : 5,
color : "#000",
textSize : 8,
textColor : "#000",
scale : 5000000
},
genomeLabel : {
display : true,
textSize : 16,
textColor : "#000",
dx : 3.14,
dy : "-0.95em"
},
BUBBLEMouseEvent: true,
BUBBLEMouseClickDisplay: true,
BUBBLEMouseClickColor: "green",
BUBBLEMouseClickOpacity: 1,
BUBBLEMouseClickStrokeColor: "#F26223",
BUBBLEMouseClickStrokeWidth: 0,
BUBBLEMouseOutDisplay: true,
BUBBLEMouseOutAnimationTime: 500,
BUBBLEMouseOutColor: "none",
BUBBLEMouseOutOpacity: 1,
BUBBLEMouseOutStrokeColor: "none",
BUBBLEMouseOutStrokeWidth: 0,
BUBBLEMouseOverDisplay: true,
BUBBLEMouseOverColor: "none",
BUBBLEMouseOverOpacity: 1,
BUBBLEMouseOverStrokeColor: "#F26223",
BUBBLEMouseOverStrokeWidth: 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>