Download COMBINATION.zip and click *.html file(in COMBINATION.zip) to open this demo in local browser!.
Users should prepare the input data in the following format (separated by tabs).
#chr pos value des color eas sas afr eur amr image
10 100315722 20.2218 rs603424
10 101219450 19 rs11190870
10 103086421 25.1549 rs11191548
10 121577821 169.699 rs2981579 #991ECC 0.551 0.61 0.339 0.549 0.57 https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs2981579.400kb-1.png
......
X 5266661 24.699 rs6638512
X 67343176 90.699 rs2497938
8 19986711 149 rs12678919 #991ECC 0.12 0.08 0.116 0.13 0.06 https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs12678919.400kb-1.png
X 79241621 32.699 rs5912838
Following fields are required:
The 1 column(chr) is the name of the chromosome.
The 2 column(pos) is the position of the SNP.
The 3 column(value) is the value(density, P-value, etc.) of the SNP.
The 4 column(des) is the description of the SNP.
python NGCircos_PrepareData.py COMBINATION_SNP COMBINATION_SNP01.txt > COMBINATION_SNP01.jsvar SNP01 = [ "SNP01" , {
maxRadius: 205,
minRadius: 153,
SNPFillColor: "#9400D3",
PointType: "circle",
circleSize: 2,
rectWidth: 2,
rectHeight: 2
} , [
{chr: "10", pos: "100315722", value: "20.2218", des: "rs603424", color: "rgb(153,102,0)"},
{chr: "10", pos: "101219450", value: "19", des: "rs11190870", color: "rgb(153,102,0)"},
{chr: "10", pos: "103086421", value: "25.1549", des: "rs11191548", color: "rgb(153,102,0)"},
{chr: "10", pos: "112998590", value: "74.0969", des: "rs7903146", color: "rgb(153,102,0)"},
{chr: "10", pos: "121577821", value: "169.699", des: "rs2981579", color: "rgb(153,102,0)", index: "1", image: "https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs2981579.400kb-1.png"},
......
{chr: "8", pos: "19986711", value: "149", des: "rs12678919", color: "rgb(102,102,102)", index: "66", image: "https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs12678919.400kb-1.png"},
{chr: "X", pos: "67343176", value: "90.699", des: "rs2497938", color: "rgb(153,153,153)"},
{chr: "X", pos: "69578860", value: "18.1549", des: "rs11796357", color: "rgb(153,153,153)"},
{chr: "X", pos: "79241621", value: "32.699", des: "rs5912838", color: "rgb(153,153,153)"},
],[
["eas","sas","afr","eur"],
["0.551","0.61","0.339","0.549"],
["0.583","0.54","0.875","0.348"],
["0.953","0.74","0.601","0.786"],
["0.759","0.81","0.94","0.907"],
["0.296","0.12","0.09","0.365"],
["0.97","0.82","0.963","0.847"],
["0.941","0.85","0.181","0.726"],
["0.565","0.33","0.183","0.311"],
["0.567","0.16","0.697","0.363"],
["0.951","0.71","0.638","0.638"],
["0.204","0.29","0.411","0.346"],
["0.216","0.0","0.001","0.0"],
["0.063","0.24","0.239","0.263"],
["0.123","0.04","0.014","0.161"],
["0.189","0.35","0.424","0.409"],
["0.002","0.07","0.028","0.636"],
["0.0","0.0","0.004","0.014"],
["0.168","0.29","0.411","0.414"],
["0.0","0.01","0.003","0.062"],
["0.34","0.44","0.213","0.441"],
["0.001","0.06","0.135","0.241"],
["0.025","0.2","0.16","0.304"],
["0.001","0.07","0.04","0.242"],
["0.001","0.02","0.006","0.121"],
["0.012","0.08","0.147","0.110"],
["0.98","0.89","0.733","0.85"],
["0.614","0.36","0.66","0.31"],
["0.877","0.63","0.62","0.767"],
["0.211","0.28","0.077","0.328"],
["0.115","0.13","0.078","0.298"],
["0.154","0.28","0.173","0.291"],
["0.28","0.44","0.281","0.5"],
["0.375","0.22","0.205","0.367"],
["0.13","0.44","0.493","0.298"],
["0.13","0.44","0.486","0.298"],
["0.009","0.16","0.867","0.23"],
["0.005","0.15","0.628","0.216"],
["0.005","0.14","0.617","0.21"],
["0.006","0.14","0.618","0.208"],
["0.572","0.46","0.628","0.327"],
["0.297","0.36","0.52","0.417"],
["0.441","0.24","0.3","0.232"],
["0.3","0.54","0.094","0.583"],
["0.013","0.2","0.48","0.214"],
["0.041","0.05","0.161","0.031"],
["0.959","0.87","0.816","0.89"],
["0.864","0.87","0.815","0.89"],
["0.052","0.2","0.084","0.143"],
["0.315","0.31","0.36","0.273"],
["0.001","0.01","0.002","0.047"],
["0.001","0.01","0.002","0.047"],
["0.052","0.07","0.042","0.187"],
["0.52","0.46","0.344","0.382"],
["0.994","0.98","0.973","0.88"],
["0.354","0.38","0.236","0.451"],
["0.365","0.31","0.28","0.393"],
["0.003","0.23","0.268","0.305"],
["0.002","0.09","0.164","0.242"],
["0.676","0.34","0.475","0.422"],
["0.794","0.39","0.326","0.403"],
["0.365","0.31","0.28","0.393"],
["0.455","0.41","0.08","0.54"],
["0.005","0.02","0.449","0.082"],
["0.006","0.06","0.277","0.104"],
["0.299","0.34","0.851","0.057"],
["0.999","0.97","0.688","0.912"],
["0.12","0.08","0.116","0.13"]
]
];
<script src="js/COMBINATION_SNP01.js"></script> NGCircos01 = new NGCircos(SNP01,NGCircosGenome,{ // Initialize with "SNP01" 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/COMBINATION_SNP01.js"></script>
<!-- Genome configuration -->
<script>
var NGCircosGenome = [
[
["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(SNP01,NGCircosGenome,{
target:"NGCircos",
svgWidth:900,
svgHeight:600,
svgClassName:"combination_snp",
chrPad:0.04,
innerRadius:246,
outerRadius:270,
zoom:true,
compareEvent:false,
genomeFillColor:["#996601","#666600","#98991F","#CC0000","#FF0000","#FF00CC","#FFCCCC","#FF9900","#FFCC02","#FEFF00","#CCFF00","#00FF00","#368000","#0F00CC","#6699FF","#99CCFE","#01FFFF","#CCFFFF","#9900CB","#CC33FF","#CC9AFF","#666666","#999999","#CCCCCC"],
ticks:{
display:true,
len:5,
color:"#000",
textSize:10,
textColor:"#000",
scale:3e+07,
realLength:false,
},
genomeLabel:{
display:true,
textSize:15,
textColor:"#000",
dx:0.028,
dy:"-0.55em",
},
genomeBorder:{
display:true,
borderColor:"#000",
borderSize:0.5,
},
SNPMouseEvent:true,
SNPMouseCombinationEvent:true,
SNPMouseCombinationImageDisplay:true,
SNPMouseCombinationImageTitle:"LD",
SNPMouseCombinationImageTitleSize:20,
SNPMouseCombinationImageTitleWeight:"bold",
SNPMouseCombinationImageTitleColor:"black",
SNPMouseCombinationImagePositionX:300,
SNPMouseCombinationImagePositionY:-242,
SNPMouseCombinationImageHeight:200,
SNPMouseCombinationImageWidth:400,
SNPMouseCombinationGraphDisplay:true,
SNPMouseCombinationGraphTitle:"Mutation in population",
SNPMouseCombinationGraphTitleSize:20,
SNPMouseCombinationGraphTitleWeight:"bold",
SNPMouseCombinationGraphTitleColor:"black",
SNPMouseCombinationGraphType:"histogram", //histogram,pie,line
SNPMouseCombinationGraphPositionX:350,
SNPMouseCombinationGraphPositionY:200,
SNPMouseCombinationGraphHeight:200,
SNPMouseCombinationGraphWidth:300,
SNPMouseCombinationGraphHistogramBarColor:"#99CCFE",
SNPMouseCombinationGraphHistogramPadding:30,
SNPMouseCombinationGraphHistogramPositionCorrectX:10,
SNPMouseCombinationGraphPieAutoColor:true,
SNPMouseCombinationGraphPieColor:["black","blue","orange","red","green"],
SNPMouseCombinationGraphPieSize:100,
SNPMouseCombinationGraphPieStroke:true,
SNPMouseCombinationGraphPieStrokeColor:"black",
SNPMouseCombinationGraphPieStrokeWidth:1,
SNPMouseCombinationGraphPieOpacity:1.0,
SNPMouseCombinationGraphLineType:"linear",
SNPMouseCombinationGraphLineColor:"black",
SNPMouseCombinationGraphLineWidth:1,
SNPMouseCombinationGraphLinePoint:true,
SNPMouseCombinationGraphLinePointSize:5,
SNPMouseCombinationGraphLinePointAutoColor:true,
SNPMouseCombinationGraphLinePointColor:["black","blue","orange","red","green"],
SNPMouseCombinationGraphLinePointStroke:true,
SNPMouseCombinationGraphLinePointStrokeColor:"black",
SNPMouseCombinationGraphLinePointStrokeWidth:1,
SNPMouseCombinationGraphLinePointOpacity:1,
SNPMouseCombinationGraphLinePositionCorrectX:45,
SNPMouseCombinationTextDisplay:true,
SNPMouseCombinationTextColor:"#666666",
SNPMouseCombinationTextSize:13,
SNPMouseCombinationTextWeight:"bold",
SNPMouseCombinationTextPositionCorrectX:45,
SNPMouseCombinationTextPositionCorrectY:40,
SNPMouseOverDisplay : true,
SNPMouseOverColor : "red",
SNPMouseOverCircleSize : 5,
SNPMouseOverCircleOpacity : 1.0,
SNPMouseOverCircleStrokeColor : "#F26223",
SNPMouseOverCircleStrokeWidth : 3,
SNPMouseOverTooltipsHtml01 : "chr : ",
SNPMouseOverTooltipsHtml02 : "<br>position : ",
SNPMouseOverTooltipsHtml03 : "<br>-log10(Pvalue) : ",
SNPMouseOverTooltipsHtml04 : "<br>rsid : ",
SNPMouseOverTooltipsHtml05 : "",
SNPMouseOverTooltipsBorderWidth : 1,
SNPMouseOutDisplay : true,
SNPMouseOutAnimationTime : 700,
SNPMouseOutColor : "none",
SNPMouseOutCircleSize : "none",
SNPMouseOutCircleOpacity : 1.0,
SNPMouseOutCircleStrokeWidth : 0,
});
NGCircos01.draw_genome(NGCircos01.genomeLength);
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>