Display a LINE module step by step

0. Download all files in this tutorial.

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

1. Input data.

    Example file: LINE01.txt

    Data structure

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

    #chr    pos     value
    1       813468  0.5
    1       3383745 0.22385
    1       6157646 0.238643
    1       24793116        0.876947
    ......
    X       136860114       0.267261
    X       138413104       0.847613
    X       149344414       0.830811
    X       154203563       0.43466
    

    Following fields are required:

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

    • The 2 column(pos) is the position of the point.

    • The 3 column(value) is the value of the point.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py LINE LINE01.txt > LINE01.js

    Example file: LINE01.js

    Details in js file:

    var LINE01 = [ "LINE01" , {
      maxRadius: 220,
      minRadius: 170,
      LineColor: "#EEAD0E",
      LineWidth: 2,
    } , [
      {chr: "1", pos: "813468", value: "0.5"},
      {chr: "1", pos: "3383745", value: "0.22385"},
      {chr: "1", pos: "6157646", value: "0.238643"},
      {chr: "1", pos: "24793116", value: "0.876947"},
      ......
      {chr: "X", pos: "136860114", value: "0.267261"},
      {chr: "X", pos: "138413104", value: "0.847613"},
      {chr: "X", pos: "149344414", value: "0.830811"},
      {chr: "X", pos: "154203563", value: "0.43466"},
    ]];
        
    Note: explaination for each parameter is available in document

3. Including LINE data

    Use <script> tag to include LINE01.js.

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

4. Initialize NG-Circos with LINE data

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

    NGCircos01 = new NGCircos(LINE01,NGCircosGenome,{ // Initialize with "LINE01" 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/LINE01.js"></script>
    <!-- Genome configuration -->
    <script>
    var BACKGROUND01 = [ "BACKGROUND01" , {
      BginnerRadius: 220,
      BgouterRadius: 170,
      BgFillColor: "#F2F2F2",
      BgborderColor : "#000",
      BgborderSize : 0.3
    }];
    
      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,LINE01,NGCircosGenome,{       // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
         target : "NGCircos",                              // Main configuration "target"
         svgWidth : 900,                                  // Main configuration "svgWidth"
         svgHeight : 600,                                 // Main configuration "svgHeight"
         LINEMouseEvent : true,
         LINEMouseClickDisplay : false,
         LINEMouseClickLineOpacity : 1,           //"none"
         LINEMouseClickLineStrokeColor : "red",   //"none"
         LINEMouseClickLineStrokeWidth : "none",  //"none"
         LINEMouseDownDisplay : false,
         LINEMouseDownLineOpacity : 1,           //"none"
         LINEMouseDownLineStrokeColor : "red",   //"none"
         LINEMouseDownLineStrokeWidth : "none",  //"none"
         LINEMouseEnterDisplay : false,
         LINEMouseEnterLineOpacity : 1,           //"none"
         LINEMouseEnterLineStrokeColor : "red",   //"none"
         LINEMouseEnterLineStrokeWidth : "none",  //"none"
         LINEMouseLeaveDisplay : false,
         LINEMouseLeaveLineOpacity : 1,           //"none"
         LINEMouseLeaveLineStrokeColor : "red",   //"none"
         LINEMouseLeaveLineStrokeWidth : "none",  //"none"
         LINEMouseMoveDisplay : false,
         LINEMouseMoveLineOpacity : 1,           //"none"
         LINEMouseMoveLineStrokeColor : "red",   //"none"
         LINEMouseMoveLineStrokeWidth : "none",  //"none"
         LINEMouseOutDisplay : true,
         LINEMouseOutAnimationTime : 500,
         LINEMouseOutLineOpacity : 1.0,   //"none"
         LINEMouseOutLineStrokeColor : "red",    //"none"
         LINEMouseOutLineStrokeWidth : "none",    //"none"
         LINEMouseUpDisplay : false,
         LINEMouseUpLineOpacity : 1,           //"none"
         LINEMouseUpLineStrokeColor : "red",   //"none"
         LINEMouseUpLineStrokeWidth : "none",  //"none"
         LINEMouseOverDisplay : false,
         LINEMouseOverLineOpacity : 1,           //"none"
         LINEMouseOverLineStrokeColor : "red",   //"none"
         LINEMouseOverLineStrokeWidth : "none",  //"none"
         LINEMouseOverTooltipsHtml01 : "Line",
         LINEMouseOverTooltipsPosition : "absolute",
         LINEMouseOverTooltipsBackgroundColor : "white",
         LINEMouseOverTooltipsBorderStyle : "solid",
         LINEMouseOverTooltipsBorderWidth : 0,
         LINEMouseOverTooltipsPadding : "3px",
         LINEMouseOverTooltipsBorderRadius : "3px",
         LINEMouseOverTooltipsOpacity : 0.8,
    
      });
      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 LINE data using NG-Circos

Download svg ↓