Display a COMPARE module step by step

0. Download all files in this tutorial.

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

1. Add 2 groups of chromosome

    Modify the genome configuration

    Before add the COMPARE module, the genome configuration looks like this:

    var NGCircosGenome = [
[
   ["chr8",1000],
]
];

    To start using COMPARE module, we will add another group of chromosome as the following:

    var NGCircosGenome = [
[
   ["chr8",1000],
],[
   ["chr8",1000],
]
];

2. Set compareEvent as true(default false) in NGCircos01

    The code should looks like below:

    NGCircos01 = new NGCircos(LOLLIPOP01,NGCircosGenome,{
   target:"NGCircos",
   svgWidth:900,
   svgHeight:600,
   svgClassName:"lollipop",
   ......
   compareEvent:true,
   compareEventGroupGapRate:0.2,      //Empty gap rate
   compareEventGroupDistance:100,      //Distance between 2 groups
   ......

3. Assign group number in each module with compareGroup

    Before add the COMPARE module, the COMPARE01.js looks like this:

    var WIG01 = [ "WIG01" , {
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.09827044025157233",value:"0.0199"},
   {chr:"chr8",pos:"1.3266509433962264",value:"0.0199"},
   {chr:"chr8",pos:"2.5550314465408803",value:"0.0199"},
   {chr:"chr8",pos:"3.7834119496855347",value:"0.0498"},
   ......
   {chr:"chr8",pos:"996.314858490566",value:"0.0299"},
   {chr:"chr8",pos:"997.5432389937107",value:"0.0398"},
   {chr:"chr8",pos:"998.7716194968554",value:"0.0896"},
   {chr:"chr8",pos:"1000.0",value:"0.1195"},
]];

var WIG02 = [ "WIG02" , {
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.024557353699565337",value:"5"},
   {chr:"chr8",pos:"0.5157044276908721",value:"5"},
   {chr:"chr8",pos:"1.0068515016821786",value:"4"},
   {chr:"chr8",pos:"1.4979985756734855",value:"4"},
   ......
   {chr:"chr8",pos:"998.5265587780261",value:"1"},
   {chr:"chr8",pos:"999.0177058520175",value:"1"},
   {chr:"chr8",pos:"999.5088529260087",value:"1"},
   {chr:"chr8",pos:"1000.0",value:"1"},
]];

    To start using COMPARE module, we will add compareGroup (default 1) of chromosome as the following:

    var WIG01 = [ "WIG01" , {
   compareGroup:2,
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.09827044025157233",value:"0.0199"},
   {chr:"chr8",pos:"1.3266509433962264",value:"0.0199"},
   {chr:"chr8",pos:"2.5550314465408803",value:"0.0199"},
   {chr:"chr8",pos:"3.7834119496855347",value:"0.0498"},
   ......
   {chr:"chr8",pos:"996.314858490566",value:"0.0299"},
   {chr:"chr8",pos:"997.5432389937107",value:"0.0398"},
   {chr:"chr8",pos:"998.7716194968554",value:"0.0896"},
   {chr:"chr8",pos:"1000.0",value:"0.1195"},
]];

var WIG02 = [ "WIG02" , {
   compareGroup:1,
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.024557353699565337",value:"5"},
   {chr:"chr8",pos:"0.5157044276908721",value:"5"},
   {chr:"chr8",pos:"1.0068515016821786",value:"4"},
   {chr:"chr8",pos:"1.4979985756734855",value:"4"},
   ......
   {chr:"chr8",pos:"998.5265587780261",value:"1"},
   {chr:"chr8",pos:"999.0177058520175",value:"1"},
   {chr:"chr8",pos:"999.5088529260087",value:"1"},
   {chr:"chr8",pos:"1000.0",value:"1"},
]];

    Example file: COMPARE01.js

4. Source code

    When step 1 to 3 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/COMPARE01.js"></script>
<!-- Genome configuration -->
<script>
var NGCircosGenome = [
  [
    ["chr8",1000],
  ],[
    ["chr8",1000],
  ]
  ];
  NGCircos01 = new NGCircos(WIG01,WIG02, NGCircosGenome,{
  target:"NGCircos",
  svgWidth:900,
  svgHeight:600,
  svgClassName:"compare",
  chrPad:0.04,
  innerRadius:246,
  outerRadius:250,
  zoom:true,
  compareEvent:true,
  compareEventGroupGapRate:0.2,
  compareEventGroupDistance:100,
  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,
  },
  });
  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>

5. Try and see the COMPARE

Download svg ↓