Display a ARC module step by step

0. Download all files in this tutorial.

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

1. Input data.

    Example file: ARC01.txt

    Data structure

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

    #chr    start   end     color   des
    EGFR    57      167     #CD8500 Recep_L domain
    EGFR    185     338     blue    Furin-like domain
    EGFR    361     480     #CD8500 Recep_L domain
    EGFR    505     636     yellow  GF_recep_IV domain
    EGFR    713     965     red     Pkinase Tyr domain
    

    Following fields are required:

    • The 1 column(chr) is the name of the chromosome. In this example, this field specify the protein name.

    • The 2 column(start) is the start of the arc.

    • The 3 column(end) is the end of the arc.

    • The 4 column(color) is the color of the arc.

    • The 5 column(des) is the description of the arc.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py ARC ARC01.txt > ARC01.js

    Example file: ARC01.js

    Details in js file:

    var ARC01 = [ "ARC01" , {
      innerRadius: 145,
      outerRadius: 155,
    } , [
      {chr: "EGFR", start: "57", end: "167", color: "#CD8500", des: "Recep_L domain"},
      {chr: "EGFR", start: "185", end: "338", color: "blue", des: "Furin-like domain"},
      {chr: "EGFR", start: "361", end: "480", color: "#CD8500", des: "Recep_L domain"},
      {chr: "EGFR", start: "505", end: "636", color: "yellow", des: "GF_recep_IV domain"},
      {chr: "EGFR", start: "713", end: "965", color: "red", des: "Pkinase Tyr domain"},
    ]];
        
    Note: explaination for each parameter is available in document

3. Including ARC data

    Use <script> tag to include ARC01.js.

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

4. Initialize NG-Circos with ARC data

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

    NGCircos01 = new NGCircos(ARC01,NGCircosGenome,{ // Initialize with "ARC01" 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/ARC01.js"></script>
    <!-- Genome configuration -->
    <script>
      var TEXT01 = [ "TEXT01" , {
         x: -20,
         y: 0,
         textSize: 20,
         textWeight: "bold", //normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900
         textColor: "red",
         textOpacity: 1.0,
         text: "EGFR"
      }];
      var NGCircosGenome = [      // Configure your own genome here.
        [
         ["EGFR" , 1211],
        ]
      ];
      NGCircos01 = new NGCircos(TEXT01,ARC01,NGCircosGenome,{       // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
         target : "NGCircos",
         svgWidth : 900,
         svgHeight : 600,
         svgClassName: "NGCircos",
         innerRadius: 246,
         outerRadius: 250,
         zoom : false,
         genomeFillColor: ["#999999"],
         ticks : {
            display : true,
            len : 5,
            color : "#000",
            textSize : 8,
            textColor : "#000",
            scale : 20
         },
         genomeLabel : {
            display : false,
            textSize : 16,
            textColor : "red",
            dx : 3.14,
            dy : "-0.95em"
         },
         ARCMouseEvent: true,
         ARCMouseClickDisplay: true,
         ARCMouseClickColor: "red",
         ARCMouseClickArcOpacity: 1,
         ARCMouseClickArcStrokeColor: "#F26223",
         ARCMouseClickArcStrokeWidth: 0,
         ARCMouseClickTextFromData: "fifth",
         ARCMouseClickTextOpacity: 1,
         ARCMouseClickTextColor: "red",
         ARCMouseClickTextSize: 8,
         ARCMouseClickTextPostionX: 0,
         ARCMouseClickTextPostionY: 0,
         ARCMouseClickTextDrag: true,
         ARCMouseMoveDisplay: true,
         ARCMouseMoveColor: "none",
         ARCMouseMoveArcOpacity: 1,
         ARCMouseMoveArcStrokeColor: "#F26223",
         ARCMouseMoveArcStrokeWidth: 3,
         ARCMouseOutDisplay: true,
         ARCMouseOutAnimationTime: 500,
         ARCMouseOutColor: "none",
         ARCMouseOutArcOpacity: 1,
         ARCMouseOutArcStrokeColor: "red",
         ARCMouseOutArcStrokeWidth: 0,
         ARCMouseOverDisplay: true,
         ARCMouseOverColor: "none",
         ARCMouseOverArcOpacity: 1,
         ARCMouseOverArcStrokeColor: "#F26223",
         ARCMouseOverArcStrokeWidth: 3,
      });
      NGCircos01.draw_genome(NGCircos01.genomeLength);  // NGCircos.js callback
      NGCircos01.draw_genome(NGCircos01.genomeLength2); // NGCircos2.js callback second time // 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 ARC data using NG-Circos

Download svg ↓