Display a COMBINATION module step by step

0. Download all files in this tutorial.

Download COMBINATION.zip and click *.html file(in COMBINATION.zip) to open this demo in local browser!.

1. Input data.

    Example file: COMBINATION_SNP01.txt

    Data structure

    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.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py COMBINATION_SNP COMBINATION_SNP01.txt > COMBINATION_SNP01.js

    Example file: COMBINATION_SNP01.js

    Details in js file:

    var 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"]
       ]
    ];
        
    Note: explaination for each parameter is available in document

3. Including data

    Use <script> tag to include SNP01.js.

    <script src="js/COMBINATION_SNP01.js"></script> 

4. Initialize NG-Circos with SNP data

    Prepare a <div> tag with “example” id to set the picture position your will draw in html, e.g.:

    NGCircos01 = new NGCircos(SNP01,NGCircosGenome,{ // Initialize with "SNP01" data tag

5. Source code

    When step 1 to 4 are finished, the configuration for NGCircos:

    <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>

6. Visualization of SNP data using NG-Circos

Download svg ↓