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