Display a CNV module step by step

0. Download all files in this tutorial.

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

1. Input data.

    Example file: CNV01.txt

    Data structure

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

    #chr    start   end     value
    1       764788  87109267        2.5
    1       87109268        120217058       2
    1       144101324       222713034       4
    1       222713035       222867750       6
    ......
    9       30330084        140139368       3.5
    X       105073  114046817       1
    X       114112404       114299959       2
    X       114376344       154884814       1
    

    Following fields are required:

    • The 1 column(chr) is the name of the chromosome.

    • The 2 column(start) is the start of the CNV region.

    • The 3 column(end) is the end of the CNV region.

    • The 4 column(value) is the copy number of CNV region.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py CNV CNV01.txt > CNV01.js

    Example file: CNV01.js

    Details in js file:

    var CNV01 = [ "CNV01" , {
      maxRadius: 175,
      minRadius: 116,
      CNVwidth: 2,
      CNVColor: "#4876FF",
    } , [
      {chr: "1", start: "764788", end: "87109267", value: "2.5"},
      {chr: "1", start: "87109268", end: "120217058", value: "2"},
      {chr: "1", start: "144101324", end: "222713034", value: "4"},
      {chr: "1", start: "222713035", end: "222867750", value: "6"},
      ......
      {chr: "9", start: "30330084", end: "140139368", value: "3.5"},
      {chr: "X", start: "105073", end: "114046817", value: "1"},
      {chr: "X", start: "114112404", end: "114299959", value: "2"},
      {chr: "X", start: "114376344", end: "154884814", value: "1"},
    ]];
        
    Note: explaination for each parameter is available in document

3. Including CNV data

    Use <script> tag to include CNV01.js.

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

4. Initialize NG-Circos with CNV data

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

    NGCircos01 = new NGCircos(CNV01,NGCircosGenome,{ // Initialize with "CNV01" 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/CNV01.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(BACKGROUND01,CNV01,NGCircosGenome,{       // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
         zoom : true,
         target : "NGCircos",                              // Main configuration "target"
         svgWidth : 900,                                  // Main configuration "svgWidth"
         svgHeight : 600,                                 // Main configuration "svgHeight"
         svgClassName: "NGCircos",                  // Main configuration "svgClassName"
         CNVMouseEvent: true,
         CNVMouseClickDisplay: true,
         CNVMouseClickColor: "red",
         CNVMouseClickArcOpacity: 1,
         CNVMouseClickArcStrokeColor: "#F26223",
         CNVMouseClickArcStrokeWidth: 0,
         CNVMouseClickTextFromData: "fourth",
         CNVMouseClickTextOpacity: 1,
         CNVMouseClickTextColor: "red",
         CNVMouseClickTextSize: 8,
         CNVMouseClickTextPostionX: 0,
         CNVMouseClickTextPostionY: 0,
         CNVMouseClickTextDrag: true,
         CNVMouseDownDisplay: true,
         CNVMouseDownColor: "green",
         CNVMouseDownArcOpacity: 1,
         CNVMouseDownArcStrokeColor: "#F26223",
         CNVMouseDownArcStrokeWidth: 0,
         CNVMouseEnterDisplay: true,
         CNVMouseEnterColor: "yellow",
         CNVMouseEnterArcOpacity: 1,
         CNVMouseEnterArcStrokeColor: "#F26223",
         CNVMouseEnterArcStrokeWidth: 0,
         CNVMouseLeaveDisplay: true,
         CNVMouseLeaveColor: "pink",
         CNVMouseLeaveArcOpacity: 1,
         CNVMouseLeaveArcStrokeColor: "#F26223",
         CNVMouseLeaveArcStrokeWidth: 0,
         CNVMouseMoveDisplay: true,
         CNVMouseMoveColor: "red",
         CNVMouseMoveArcOpacity: 1,
         CNVMouseMoveArcStrokeColor: "#F26223",
         CNVMouseMoveArcStrokeWidth: 0,
         CNVMouseOutDisplay: true,
         CNVMouseOutAnimationTime: 500,
         CNVMouseOutColor: "red",
         CNVMouseOutArcOpacity: 1,
         CNVMouseOutArcStrokeColor: "red",
         CNVMouseOutArcStrokeWidth: 0,
         CNVMouseUpDisplay: true,
         CNVMouseUpColor: "grey",
         CNVMouseUpArcOpacity: 1,
         CNVMouseUpArcStrokeColor: "#F26223",
         CNVMouseUpArcStrokeWidth: 0,
         CNVMouseOverDisplay: true,
         CNVMouseOverColor: "red",
         CNVMouseOverArcOpacity: 1,
         CNVMouseOverArcStrokeColor: "#F26223",
         CNVMouseOverArcStrokeWidth: 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>

6. Visualization of CNV data using NG-Circos

Download svg ↓