Display a GENE module step by step

0. Download all files in this tutorial.

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

1. Input data.

    Example file: GENE01.txt

    Data structure

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

    #chr   strand   start   end   type   name
EGFR +       57      965     gene    EGFR
EGFR +       57      167     cds     EGFR
EGFR +       185     338     cds     EGFR
EGFR +       361     480     cds     EGFR
EGFR +       505     636     cds     EGFR
EGFR +       713     965     cds     EGFR

    Following fields are required:

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

    • The 2 column(strand) is the strand of the gene.

    • The 3 column(start) is the start position of the gene.

    • The 4 column(end) is the end position of the point.

    • The 5 column(type) is the type of this fragment in gene.

    Others are optional:

    • The 6 column(name) is the neme of the fragment.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py GENE GENE01.txt > GENE01.js

    Example file: GENE01.js

    Details in js file:

    var GENE01 = [ "GENE01" , {
   outerRadius: 225,
   innerRadius: 210,
   arrowGap: 2,
   arrowColor: "blue",
   arrowSize: "12px",
   cdsColor: "blue",
   cdsStrokeColor: "blue",
   cdsStrokeWidth: 1,
   utrWidth: -5,
   utrColor: "blue",
   utrStrokeColor: "blue",
   utrStrokeWidth: 1,
   } , [
     {chr: "EGFR", strand: "+", start: "57", end: "965", type: "gene", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "57", end: "167", type: "cds", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "185", end: "338", type: "cds", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "361", end: "480", type: "cds", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "505", end: "636", type: "cds", name: "EGFR""},
     {chr: "EGFR", strand: "+", start: "713", end: "965", type: "cds", name: "EGFR"},
]];
    Note: explaination for each parameter is available in document

3. Including GENE data

    Use <script> tag to include GENE01.js.

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

4. Initialize NG-Circos with GENE data

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

    NGCircos01 = new NGCircos(GENE01,NGCircosGenome,{ // Initialize with "GENE01" 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/GENE01.js"></script>
<!-- Genome configuration -->
<script>
var NGCircosGenome = [[
  ["EGFR",1211],
  ]];
  NGCircos01 = new NGCircos(GENE01, NGCircosGenome,{
  target:"NGCircos",
  svgWidth:900,
  svgHeight:600,
  svgClassName:"gene",
  chrPad:0.04,
  innerRadius:246,
  outerRadius:250,
  zoom:true,
  genomeFillColor:["#999999"],
  ticks:{
  display:false,
  len:5,
  color:"#000",
  textSize:10,
  textColor:"#000",
  scale:30000000,
  realLength:false,
  },
  genomeLabel:{
  display:true,
  textSize:15,
  textColor:"#000",
  dx:0.028,
  dy:"-0.55em",
  },
  genomeBorder:{
  display:true,
  borderColor:"#000",
  borderSize:0.5,
  },
  GENEMouseEvent : true,
   GENEMouseClickDisplay : true,
   GENEMouseClickColor : "none",
   GENEMouseClickArcOpacity : 1.0,
   GENEMouseClickArcStrokeColor : "#F26223",
   GENEMouseClickArcStrokeWidth : 1,
   GENEMouseClickTextFromData : "fifth",   //first,second,third,fifth column
   GENEMouseClickTextOpacity : 1,
   GENEMouseClickTextColor : "#000",
   GENEMouseClickTextSize : 8,
   GENEMouseClickTextPostionX : 0,
   GENEMouseClickTextPostionY : 0,
   GENEMouseClickTextDrag : false,
   GENEMouseDownDisplay : false,
   GENEMouseDownColor : "none",
   GENEMouseDownArcOpacity : 1.0,
   GENEMouseDownArcStrokeColor : "#F26223",
   GENEMouseDownArcStrokeWidth : 1,
   GENEMouseEnterDisplay : false,
   GENEMouseEnterColor : "none",
   GENEMouseEnterArcOpacity : 1.0,
   GENEMouseEnterArcStrokeColor : "#F26223",
   GENEMouseEnterArcStrokeWidth : 1,
   GENEMouseLeaveDisplay : false,
   GENEMouseLeaveColor : "none",
   GENEMouseLeaveArcOpacity : 1.0,
   GENEMouseLeaveArcStrokeColor : "#F26223",
   GENEMouseLeaveArcStrokeWidth : 0,
   GENEMouseMoveDisplay : false,
   GENEMouseMoveColor : "none",
   GENEMouseMoveArcOpacity : 1.0,
   GENEMouseMoveArcStrokeColor : "#F26223",
   GENEMouseMoveArcStrokeWidth : 0,
   GENEMouseOutDisplay : true,
   GENEMouseOutAnimationTime : 500,
   GENEMouseOutColor : "none",
   GENEMouseOutArcOpacity : 1.0,
   GENEMouseOutArcStrokeColor : "red",
   GENEMouseOutArcStrokeWidth : 0,
   GENEMouseUpDisplay : false,
   GENEMouseUpColor : "grey",
   GENEMouseUpArcOpacity : 1.0,
   GENEMouseUpArcStrokeColor : "#F26223",
   GENEMouseUpArcStrokeWidth : 0,
   GENEMouseOverDisplay : true,
   GENEMouseOverColor : "none",
   GENEMouseOverArcOpacity : 1.0,
   GENEMouseOverArcStrokeColor : "red", //"none","#F26223"
   GENEMouseOverArcStrokeWidth : "none", //"none",3
   GENEMouseOverTooltipsHtml01 : "Gene: ",
   GENEMouseOverTooltipsHtml02 : "<br>Start: ",
   GENEMouseOverTooltipsHtml03 : "<br>End: ",
   GENEMouseOverTooltipsHtml04 : "<br>Name: ",
   GENEMouseOverTooltipsHtml05 : "<br>Strand: ",
   GENEMouseOverTooltipsHtml06 : "<br>Type: ",
   GENEMouseOverTooltipsHtml07 : "",
   GENEMouseOverTooltipsPosition : "absolute",
   GENEMouseOverTooltipsBackgroundColor : "white",
   GENEMouseOverTooltipsBorderStyle : "solid",
   GENEMouseOverTooltipsBorderWidth : 0,
   GENEMouseOverTooltipsPadding : "3px",
   GENEMouseOverTooltipsBorderRadius : "3px",
   GENEMouseOverTooltipsOpacity : 0.8,
  });
  NGCircos01.draw_genome(NGCircos01.genomeLength);
  NGCircos01.draw_genome(NGCircos01.genomeLength2);
</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 GENE data using NG-Circos

Download svg ↓