Display a SNP module step by step

0. Download all files in this tutorial.

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

1. Input data.

    Example file: SNP01.txt

    Data structure

    Users should prepare the input data in the following format (separated by tabs).

    #chr    pos     value   des
10      100315722       20.2218 rs603424
10      101219450       19      rs11190870
10      103086421       25.1549 rs11191548
10      112998590       74.0969 rs7903146
 ......
X       5266661 24.699  rs6638512
X       67343176        90.699  rs2497938
X       69578860        18.1549 rs11796357
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 SNP SNP01.txt > SNP01.js

    Example file: 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)"},
   ......
  {chr: "X", pos: "5266661", value: "24.699", des: "rs6638512", color: "rgb(153,153,153)"},
  {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)"},
]];
    Note: explaination for each parameter is available in document

3. Including SNP data

    Use <script> tag to include SNP01.js.

    <script src="js/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/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,{  // Initialize with "SNP01" data tag
  //Main configuration
     target : "NGCircos",                       // Main configuration "target"
     svgWidth : 900,                             // Main configuration "svgWidth"
     svgHeight : 600,                            // Main configuration "svgHeight"
     svgClassName: "NGCircos",                  // Main configuration "svgClassName"
     chrPad : 0.04,                              // Main configuration "chrPad"
     innerRadius: 246,                           // Main configuration "innerRadius"
     outerRadius: 270,                           // Main configuration "outerRadius"
  });
  NGCircos01.draw_genome(NGCircos01.genomeLength); // NGCircos2.js callback
  NGCircos01.draw_genome(NGCircos01.genomeLength2); // NGCircos2.js callback
</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